{ 
    test: require.resolve("./src/plugins/froala_editor.min"),
    loader: "imports?$=jQuery"
}

var $ = require("jquery");

webpack chrome console error : Uncaught TypeError: $(...).editable is not a function

{ 
    test: require.resolve("./src/plugins/froala_editor.min"),
    loader: "imports?$=jQuery"
}

var $ = require("jquery");

webpack chrome console error : Uncaught TypeError: $(...).editable is not a function

• javascript
• webpack

• Give us more detail to answer your question. Where is your code placed? All in webpack.config? Only loader object is in webpack.config? Do you have var $ = require("jquery"); in webpack.config? – Everettss Commented May 28, 2016 at 12:13
• jsbin./futakaposa/edit?html,css,js,console,output my code – Cydmi Joe Commented May 28, 2016 at 13:37

3 Answers 3

Regarding jQuery and webpack config you can do this :

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

so when you use $ or jQuery in ur froala editor it will load jquery.

In ur case froala is using jquery UI before it loads jquery

OR!! UPDATE:

npm install --save-dev script-loader

main.js

require('jquery')
require("script!./path-to-froala-editor.min");

OMG!! you have froala on npm just install it from there and require it in ur main.js

https://www.npmjs./package/froala-editor

Please see the url and make sure you have added Jquery min js file in your angular json add node_modules/jquery/dist/jquery.min.js under script

to plement @Shailendra Tiwari's answer, I do the same thing with the imports-loader webpack tool, I imported my library like this:

import 'imports-loader?window.jQuery=jquery!icheck';

notice how I didn't use import 'imports-loader?jQuery=jquery!icheck';, that doesn't work because that library only looks in window.jQuery