Loading jEditable library in Webpack

Question

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, 

Answer 1

When I add window.jQuery = $; it works now