CODEWITHSUNDEEP
javascriptnode.jswebpack
Stretch0
Stretch0

Reputation: 9285

Webpack build error

Having some issues with webpack. It builds fine but when I open my site, i get: Getting error: "Uncaught ReferenceError: webpackJsonp is not defined"

I believe my CommonsChunkPlugin is running before my app is bundled?

It may help to know I have my config in src/config/webpack.config.js which is building to dist/js/.

Have read https://medium.com/@MarkEwersDev/note-to-self-if-you-ever-get-this-uncaught-referenceerror-webpackjsonp-is-not-defined-message-and-d354f5c4d335#.9cysuil5p and https://github.com/webpack/webpack/issues/368 but neither seem to help unless I am missing something.

  devtool: 'source-map',
  entry: {
    vendor: [
      'react', 'react-dom', 'react-router', 'react-helmet', 'react-redux', 'moment-timezone', 'cookies-js', 'superagent', 'classnames', 'es6-promise'
    ],
    app: [
      './src/client/entry',
      './scss/main.scss',

    ]
  }
  output:{
    path: __dirname + '../../dist/js',
    filename: 'app.js'
  }
  plugins:[
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),

    new ExtractTextPlugin('../css/app.css', {
        allChunks: true
    }),
    new webpack.DefinePlugin({
      'process.env':{
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: true
      },
      output: {
        comments: false
      }
    }),
    ...persistentPlugins
  ],

Upvotes: 4

Views: 6212

Answers (2)

Rafael Grilli
Rafael Grilli

Reputation: 2039

I'm facing the same problem on my production environment. I don't know why, but when I upload just the bundle + vendors, built with the production webpack config, I get the same error. I just solved this error restarting the node application. But I know that it's not a good approach.

I'm using exactly the same plugins on my webpack production config as you, and I'm quite sure that the reason is one of the webpack optimization plugins.

My suggestion is: Try to comment one by one of those optimization plugins (AggressiveMergingPlugin, DedupePlugin and UglifyJsPlugin), and you might find out which one is causing the problem.

I can't test it right now because it just happens on my production environment and I can't stop/test it at this time. But, if it works for you, please let me know :)

Upvotes: 0

Jessidhia
Jessidhia

Reputation: 534

The webpackJsonp function is defined by the commons chunk, so you must always put the commons chunk (vendor.js in your case) first when writing <script> tags. You also can't use <script async>.

Another possibility is that your vendor chunk is being overwritten by the entry chunk as you set output.filename to a constant string. Try naming it [name].js instead of app.js.

Upvotes: 12

Related Questions