Webpack - _ is not defined

Question

When I run webpack, _ returns as undefined on window: window._ ::: Error: _ is not defined. I thought that putting _ inside the plugins will expose it to window. Is my understanding incorrect?

const webpack = require('webpack');

const plugins = new webpack.ProvidePlugin({
    $: "jquery",
    _: "underscore"
});

module.exports = {
    entry: {
        app: './src/main/app/components/main.module.js',
        vendor: [
            'jquery',
            'underscore'
        ]
    },
    output: {
        filename: './src/main/resources/dist/app/scripts/[name].bundle.js',
    },
    plugins: [plugins],
    devtool: 'inline-source-map'
};

Don't you need a `resolve` block to tell Webpack **where** to find `jquery` and `underscore`? See https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack — Phil, Nov 02 '17 at 00:04
providePlugin doesn't expose libs to the window - it provides access to those libs in the context of other modules in the webpack bundle — hackerrdave, Nov 02 '17 at 00:06
can use the expose-loader to add to window: https://github.com/webpack-contrib/expose-loader — hackerrdave, Nov 02 '17 at 00:12

score 1 · Answer 1 · answered Nov 02 '17 at 00:13

1

You're trying to add it as a global variable? Try adding this to your .ts / .js file:

window['_'] = require('underscore');

answered Nov 02 '17 at 00:13

Faisal

139
7

score 1 · Answer 2 · answered Nov 02 '17 at 00:17

providePlugin is used to make libraries available in the context of other modules in the webpack bundle. For example, this usage of providePlugin:

const plugins = new webpack.ProvidePlugin({
  $: "jquery",
  _: "underscore"
});

will allow access to jquery lib in ./src/main/app/components/main.module.js via the $ variable.

If you want to expose jquery to the window as window.$, you can either use webpack's expose-loader, or simply update the window in your entry file (main.module.js):

window.$ = $; //$ is defined via providePlugin
window._ = _; //_ is defined via providePlugin

score 1 · Answer 3 · answered Nov 02 '17 at 00:25

1

Did you load the underscore.js in your index file?

<script src = 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js'></script>

answered Nov 02 '17 at 00:25

Voro

235
1
12

Webpack - _ is not defined

3 Answers3