Can I set a "scope" for dependencies bundled by webpack?

[rzahn]

I use webpack to to bundle a ReactJS component. This ReactJS component has some dependencies and one of them is jQuery. Right now I just run webpack to create the bundled script.

Now I'd like to integrate the bundled script (representing my ReactJS component) into a legacy application. This application uses another version of jQuery (by directly importing the jQuery javascript file).

I wonder if this can lead to any problems because of having two jQuery versions in one application. I don't really understand how webpack handles the dependencies in the bundle. Are they kind of "scoped" in the bundle so that they don't affect parts of my legacy application? Or is there any way to do so?

My webpack.config:

var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    entry: "./js/components/Application.js",
    output: {
        path: "./target/dist",
        filename: "application.js"
    },
    module: {
        loaders: [
            {
              loader: "babel-loader",
              test: /\.js$/,
              exclude: /(node_modules|dist|__tests__)/
            },
            {
              loader: "style-loader!css-loader",
              test: /\.css$/
            },
            {
                test: /\.(jpg|png)$/,
                loader: 'url-loader',
                include: /img/
            }
        ]
    },

    devtool: 'source-map',
    plugins: [
      new CopyWebpackPlugin([
        {from: 'static/index.html'},
        {from: 'css/*.css'},
        {from: 'fonts/*'},
          {from: 'img/*.*'},
        {from: 'data/*'}
      ])
    ]
};

Thanks a lot!

[bebraw]

Is there any chance you could make both depend on the same version of jQuery? Would it be possible for you to refactor jQuery out of the React portion? Either of these would be a better option before getting into the kind of scoping you described.

Assuming you can import jQuery as a regular dependency instead of relying on it as a global, your two versions of jQuery should remain separate. But in this case you end up bloating your bundle somewhat.

It may take some experimentation to figure out the right approach.

Note that this repository is for book related questions and you may find support channels as Stack Overflow more fruitful. If you can't resolve it with the tips above, feel free to link me to a Stack Overflow question later on. Thanks.

[rzahn]

Thanks for the quick reply (and sorry if this was the wrong place to ask). Refactoring might cause some problems but it should be possible. The bundle is not that big so that shoudn't be a problem.

However, I put it as a question on StackOverflow, maybe someone has an idea.

[bebraw]

No worries. I would prioritize refactoring. If you consume jQuery as a global, you can use externals for that. Here's an example. If I remember right, ProvidePlugin might come in handy here too.

[rzahn]

I think I can refactor it becaus it's just used for fetching data from a webservice.

Just one more question about the dependency handling: Let's say I have a dependency to a module which has a jQuery dependency. Can this transitive depedency affect my legacy app's jQuery version?

[bebraw]

I think I can refactor it becaus it's just used for fetching data from a webservice.

Ok. I would probably go with fetch then and polyfill it unless there are some very special requirements related to that (like progress etc.). Nice and standard.

Let's say I have a dependency to a module which has a jQuery dependency. Can this transitive dependency affect my legacy app's jQuery version?

To give the correct answer I would have to see the project as these kind of cases can get a little messy. One option would be to configure the dependency to consume jQuery through a global. That could get around the problem neatly.

The worst case here is that a badly designed dependency (points to jQuery as a direct dependency instead of something user managed through peer dependency) forces it to bundle jQuery to the main bundle.

[rzahn]

I'll give fetcha try, sounds good! Thanks a lot for your help!