Integrating Response with Webpack2

[gonzaloplaza]

Hi Ryan

I'm developing a project using this theme from themeforest (https://themeforest.net/item/kosmo-multi-purpose-responsive-bootstrap-4-admin-template-ui-framework/19506620) wich uses Response.js.

I'm using Webpack2 to generate a unique bundle and can't load Response.js -> I'm getting this error after generating bundle, in console:

Uncaught TypeError: Cannot read property 'jQuery' of undefined

This is the config i've used for webpack2:

new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: 'jquery',
      "window.jQuery": 'jquery',
      "window.$" : "jquery",
      jquery: 'jquery',
      Response: 'response.js',
      "window.Response": "response.js",
      Popper: ['popper.js', 'default'],
      Tether: 'tether',
      'window.Tether': 'tether'
    })

Looks like when Response is being loaded, it doesn't recognize jQuery , this is the exactly line that fails. What is root?

Note: i'm using jQuery 3.2.1

var $ = root['jQuery'] || root['Zepto'] || root['ender'] || root['elo'];

Do you have any idea if something not compatible or i'm doing something wrong?. Thank you in advance

[ryanve]

@gonzaloplaza Thanks for the detailed report! Hmm. I wonder...does it work as root?

"root.jQuery": "jquery",

Do you know which version of response.js the theme uses? Is there a way to upgrade the version? If so I imagine that I could adjust that line to make it work with your original way and then do a release.

[ryanve]

In that pattern root equals the this context from the outer function.

If webpack somehow forces it to run in strict mode then this === undefined

[davesunny1985]

Hi Ryan,

Any updates on this? because I think it is quite similar to the issue I am facing....

Thanks,
Sunny Dave

[kierzniak]

This webpack configuration works for me:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: ["babel-polyfill", './src/js/app.js'],
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: 'js/',
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: require.resolve('response.js'),
        use: 'imports-loader?this=>window'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      'window.jQuery': 'jquery',
    })
  ]
}

Sample js file can looks like this:

import Response from 'response.js';

console.log(Response);

This is is working because response.js file is imported with window as this context and jQuery is available in window object. This is not recommended way to import libraries and response.js should be rewrited to be fully compatible with webpack.

[gonzaloplaza]

That configuration worked for me too. Thank you very much! .

[ryanve]

@kierzniak Thx for posting that solution! Do you think that changing line 9 to do this || window would make it work as you'd expect?

[ryanve]

I just released v0.10.0 with this || window included. Is that helpful? I have some other ideas too.

[kbherbert]

This update (v0.10.0) did not work for me in Webpack 3. I had to revert to v0.9.1 in combination with @kierzniak 's suggestion above.

[ryanve]

Ok @kbherbert thanks for reporting. FYI #76 is loosely related regarding the root export name.

[adrexia]

@ryanve we've been having similar issues with a gulp pipeline (the issue just started, so I'm unsure of the cause). Your solution went partway to fixing it, but we also needed to change this line

response.js/response.js

Line 19 in 701e98d

, root = this

to , root = this || window

[ryanve]

Thanks @adrexia

Patched in v0.10.1

Available from npm like

npm install [email protected]