webpackJsonp is not defined

Created on 31 Jul 2016  路  1Comment  路  Source: webpack/webpack

We are working on one large scale app, and one part of app is using the vuejs, but for some reasons, this vuejs part of app doesn't work and we got this error:

Uncaught ReferenceError: webpackJsonp is not defined

Our webpack.config.js file looks like this

var webpack = require('webpack'),
    path    = require('path');

module.exports = {
  resolve: {
    modulesDirectories: ['./node_modules', './resources/assets/scripts']
  },

  entry: {
    // Commons and Libraries
    common: ['jquery', './resources/assets/scripts/main.js'],

    // Chunks per Page
    home: './resources/assets/scripts/home.js',
    blog: './resources/assets/scripts/blog.js',
    about: './resources/assets/scripts/about.js',
    contact: './resources/assets/scripts/contact.js',
    shop: './resources/assets/scripts/shop.js', // This is VueJS chunk
  },

  output: {
    path: path.join(__dirname, 'public/assets/js'),
    filename: '[name].min.js'
  },

  devtool: "source-map",

  module: {
    loaders: [
      {
        test:     /\.js$/,
        loader:   'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      { test: /jquery\.js$/, loader: 'expose?$' },
      { test: /jquery\.js$/, loader: 'expose?jQuery' },
      {
        test: /\.(png|jpg)$/,
        loader: 'url',
        query: {
            // limit for base64 inlining in bytes
            limit: 10000,
            // custom naming format if file is larger than
            // the threshold
            name: '[name].[ext]?[hash]'
          },
        },
        {
      // Use SVG File loader
      test: /\.svg$/,
      loader: 'svg-url-loader'
    }
    ],
  },

  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("package.json", ["main"])
    ),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks: 2
    }),

    new webpack.optimize.UglifyJsPlugin({minimize: true, preserveComments: 'license'})
  ]
};

question

Most helpful comment

You have to include the common chunk before any other chunks, and it cannot be async. The common chunk defines webpackJsonp, that the other chunks will use to register themselves.

>All comments

You have to include the common chunk before any other chunks, and it cannot be async. The common chunk defines webpackJsonp, that the other chunks will use to register themselves.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

d4goxn picture d4goxn  路  3Comments

dubrowgn picture dubrowgn  路  3Comments

IngwiePhoenix picture IngwiePhoenix  路  3Comments

zerkalica picture zerkalica  路  3Comments

andersekdahl picture andersekdahl  路  3Comments