I am trying to use Underscore globally via Webpack ProvidePlugin, however it is not recognising Underscore, and in the console I get the following error.

VM43994:1 Uncaught ReferenceError: _ is not defined(…)

I am importing Underscore in my index.js (perhaps this is not needed now I am using a vendor bundle?), and my webpack config is as below. At one stage I thought I had it working (before doing the vendor bundle), however I now think I may have been mistaken, as I feel I have tried all the avenues that I tried before.

const webpack = require('webpack');
const path = require('path');
const precss = require('precss');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssImport = require('postcss-import');

module.exports = {

  context: __dirname + '/frontend',
  devtool: 'source-map',
  entry: {
    app: './index.js',
    vendor: ['underscore'],
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, './static'),
  },
  module: {
    loaders: [
    { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015'] } },
    { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap&importLoaders=1!postcss') },
    ],
  },
  plugins: [
    new ExtractTextPlugin('si-styles.css'),
    new webpack.ProvidePlugin({ underscore: 'underscore' }),
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.bundle.js', Infinity),
  ],
  postcss: function(webpack) {
    return [
      postcssImport({ addDependencyTo: webpack }), // Must be first item in list
      precss,
      autoprefixer({ browsers: ['last 2 versions'] }),
    ];
  },

};

I am trying to use Underscore globally via Webpack ProvidePlugin, however it is not recognising Underscore, and in the console I get the following error.

VM43994:1 Uncaught ReferenceError: _ is not defined(…)

I am importing Underscore in my index.js (perhaps this is not needed now I am using a vendor bundle?), and my webpack config is as below. At one stage I thought I had it working (before doing the vendor bundle), however I now think I may have been mistaken, as I feel I have tried all the avenues that I tried before.

const webpack = require('webpack');
const path = require('path');
const precss = require('precss');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssImport = require('postcss-import');

module.exports = {

  context: __dirname + '/frontend',
  devtool: 'source-map',
  entry: {
    app: './index.js',
    vendor: ['underscore'],
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, './static'),
  },
  module: {
    loaders: [
    { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015'] } },
    { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap&importLoaders=1!postcss') },
    ],
  },
  plugins: [
    new ExtractTextPlugin('si-styles.css'),
    new webpack.ProvidePlugin({ underscore: 'underscore' }),
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.bundle.js', Infinity),
  ],
  postcss: function(webpack) {
    return [
      postcssImport({ addDependencyTo: webpack }), // Must be first item in list
      precss,
      autoprefixer({ browsers: ['last 2 versions'] }),
    ];
  },

};

• javascript
• underscore.js
• webpack

Share Improve this question Follow edited Feb 8, 2020 at 8:54 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Jun 23, 2016 at 16:29 matt-pmatt-p 1,06722 gold badges1212 silver badges2121 bronze badges 1

• Any luck figuring this out? I am having a similar issue. – Jackie Commented Jul 18, 2016 at 16:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

A little more investigating and this seems to work

{
    plugins: [
        new webpack.ProvidePlugin({
            _: 'underscore'
        })
    ]
}

Also in your TS file you can add window['_'] = require('underscore')