Uncaught ReferenceError: webpackJsonp is not defined

Do you want to request a feature or report a bug?

bug

What is the current behavior?
After packaging, the loading page will appear this situation:

Uncaught ReferenceError: webpackJsonp is not defined
at vendor.0d1ec0a758.js:1
Uncaught ReferenceError: webpackJsonp is not defined
at app.ec87183347.js:1

View the page js load order, like this:

vendor.0d1ec0a758.js
app.ec87183347.js
mainifest.b14e5d617f.js?368&x9wj=0i

webpack config:

var webpack = require('webpack'),
  config = require('./webpack.base.conf'),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  CopyWebpackPlugin = require('copy-webpack-plugin'),
  CleanWebpackPlugin = require('clean-webpack-plugin'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  SOURCE_MAP = false;

config.output.filename = '[name].[chunkhash:10].js';
config.output.chunkFilename = '[name].[chunkhash:10].js';

config.devtool = SOURCE_MAP ? 'source-map' : false;

config.module.loaders.push({
  test: /\.css$/,
  loader: ExtractTextPlugin.extract('style', 'css')
},  {
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract('style', 'css!sass')
});
config.plugins.push(
  new CleanWebpackPlugin('build', {
    root: config.commonPath.rootPath,
    verbose: false
  }),
  new CopyWebpackPlugin([ 
    {
      context: config.commonPath.staticDir,
      from: '**/*',
      ignore: ['*.md']
    }
  ]),
  // new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
      drop_debugger: true,
      drop_console: true
    }
  }),
  // new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.optimize.CommonsChunkPlugin({
    names: ['vendor', 'mainifest']
  }),
  new webpack.optimize.AggressiveMergingPlugin(),
  new webpack.optimize.MinChunkSizePlugin({
    minChunkSize: 30000
  }),
  new ExtractTextPlugin('[name].[contenthash:6].css', {
    // allChunks : true 
  }),
  new HtmlWebpackPlugin({
    filename: 'index.html',
    favicon: config.commonPath.favicon,
    template: config.commonPath.template,
    chunksSortMode: 'dependency', 
    hash: false,
    inject: 'body'
  })
);
module.exports = config;

index.html :
……

<script type="text/javascript" src="mainifest.7adaf766e3.js"></script>
<script type="text/javascript" src="vendor.a74e31e640.js"></script>
<script type="text/javascript" src="app.4cf76f96d7.js"></script>

……

Js loading order is incorrect.

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

The expected page loading order is:

mainifest.7adaf766e3.js
vendor.a74e31e640.js
app.4cf76f96d7.js?559&x9wj=0i

Follow this order to load, then this issue does not appear.How can i guarantee the js loading order?

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

the browser version: Google Chrome 58.0.3029.110 (64-bit)
Node.js version: v6.9.5
webpack version: ~1.13.2 (Note: version 2.0 Also appears this issue)
Operating System: Window 7

Author: Fantashit

5 thoughts on “Uncaught ReferenceError: webpackJsonp is not defined

  1. I am based on the solution in this issue:
    https://github.com/webpack/webpack/issues/959

    Done these two changes:
    1.

    new ExtractTextPlugin('[name].[contenthash:6].css', {
        allChunks : true 
      }),
    
    new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'mainifest'],
        minChunks: 1
      }),
    

    Then, the page loading order does not matter.

    But who can tell me why?

  2. You must load the chunks in the correct order. Run webpack with --display-entrypoints and it will print the correct order.

  3. You can sort the list like this :

    new HtmlWebpackPlugin({
    template: ‘src/index.html’,
    filename: ‘dist/index.html’,
    chunksSortMode: function (chunk1, chunk2) {
    var order = [‘polyfills’, ‘vendor’, ‘images’, ‘app’];
    var order1 = order.indexOf(chunk1.names[0]);
    var order2 = order.indexOf(chunk2.names[0]);
    return order1 – order2;
    }
    }),

Comments are closed.