I tried to include jQuery plugin Jeditable as a webpack module from bower. I use bower-webpack-plugin to include some libraries, but it doesn't work in this case.
Edit: I use this webpack config.
webpack.config.js
const BowerWebpackPlugin = require("bower-webpack-plugin");
module.exports = {
entry: './src/script/index.jsx',
output: {
filename: 'bundle.js',
publicPath: 'http://localhost:8090/assets'
},
devtool: 'evil-source-map',
module: {
loaders: [
{
test: /\.js[x]?$/,
loaders: ['react-hot', 'jsx', 'babel'],
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
}
]
},
plugins: [
new BowerWebpackPlugin()
],
externals: {
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx']
}
}
bower.json
{
"name": "Won",
"version": "0.0.1",
"description": "Internal app",
"main": "index.js",
"authors": [
"and"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"devDependencies": {
"jquery": "~2.1.4",
"babel-polyfill": "~0.0.1",
"bootstrap": "~3.3.5",
"col-resizable": "*",
"datatables": "~1.10.8",
"immutable": "~3.7.4",
"jeditable": "~1.7.3",
"jquery-resizable-columns": "~0.2.3",
"jquery-ui": "~1.11.4",
"kefir": "~2.8.0",
"lodash": "~3.10.1"
}
}
At first I get error:
Uncaught TypeError: $(...).find(...).editable is not a function
Then I tried to add Jeditable plugin
var editable = require('jeditable')
or
var editable = require('jquery.jeditable')
but i get errors like
Module not found: Error: Cannot resolve module 'jeditable' in ...
Then I tried
var editable = require('../../bower_components/jeditable/jquery.jeditable')
I get error
Uncaught ReferenceError: jQuery is not defined
(anonymous function) @ jquery.jeditable.js:494
Then I tried to add Jquery:
var jQuery = require('../../bower_components/jeditable/js/jquery')
var editable = require('../../bower_components/jeditable/jquery.jeditable')
but I get error:
./bower_components/jeditable/js/jquery.js
Module build failed: SyntaxError: /Users/an/Won_webpack_25_08/bower_components/jeditable/js/jquery.js: 'with' in strict mode (2907:13)
2905 | var left = 0, top = 0, elem = this[0], results;
2906 |
> 2907 | if ( elem ) with ( jQuery.browser ) {
| ^
2908 | var absolute = jQuery.css(elem, "position") == "absolute",
2909 | parent = elem.parentNode,
2910 | offsetParent = elem.offsetParent,
When I add window.jQuery = $;
it works now