webpack. How to fix Uncaught ReferenceError: webpackJsonp_name

K

KnightForce2017-02-15 23:32:23

webpack

KnightForce, 2017-02-15 23:32:23

webpack. How to fix Uncaught ReferenceError: webpackJsonp_name_ is not defined error?

When you open the index.html page in a browser, the following is displayed in the console:

Uncaught ReferenceError: webpackJsonp_name_ is not defined at babelPolyfill.js:2

babelPolyfill.js - polyfill from babel.
webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    //devtool: 'cheap-module-eval-source-map',
    context: path.join(__dirname, 'frontend'),
    entry: {
        babelPolyfill: "babel-polyfill",
        index: "./index",
        common: "./common",
    },
    output: {
        path: path.join(__dirname, 'public'),
        filename: '[name].js',
        publicPath: '/public/',
        library: '[name]'
    },
    resolve: {
        modules: [path.resolve(__dirname, "node_modules")]
    },
    resolveLoader: {
         modules: ["web_loaders", "web_modules", "node_loaders", "node_modules"],
    },

    module: {
      rules: [
        {
            exclude: /\/node_modules/,
            loader: "babel-loader",
            options: {
                presets: [['es2015', {modules: false}], "es2016", "es2017", "react"],
                plugins: ['transform-runtime'], 
            },
        },
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract(
                {
                    fallback: "style-loader",
                    use: ["css-loader","autoprefixer-loader?browsers=last 2 versions"]
                }),
            
        },
        {
            test: /\.less$/,
            use: ExtractTextPlugin.extract(
                {
                    fallback: "style-loader",
                    use: ["css-loader","autoprefixer-loader?browsers=last 2 versions","less-loader"],
                }),

        },
        {
            test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
            use: "file?name=[name][hash].[ext]",
        }
      ]
    },
    plugins: [

        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: "commons",
            filename: "commons.js",
            minChunks: 2,

        }),

    ],
    watch: true,
}

index.html:

<html>
  <head>
    <title>Title</title>
  </head>
  <body>
  	<script src="./public/babelPolyfill.js"></script>
  <script src="./public/commons.js"></script>
    <script src="./public/index.js"></script>
  </body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

[[+comments_count]] answer(s)

A

amokrushin, 2017-02-16
@KnightForce

The problem is that webpack adds its own loader (webpack runtime) to each entry module. The CommonsChunkPlugin has removed this loader into the commons.js file, which is loaded second in the browser. And at the time of execution of the code of the babelPolyfill.js file, the loader code is missing and an error occurs.
How to fix?
There are the following options:
1. remove the CommonsChunkPlugin plugin
2. remove babelPolyfill.js from the webpack config and include the ready-made version before the rest of the script tags
3. include it in the recommended way in the script that is loaded first
4. you can move the webpack runtime to a separate file by adding it again plugin CommonsChunkPlugin after what is already there

new webpack.optimize.CommonsChunkPlugin({
    name: 'webpack.runtime',
    minChunks: Infinity,
})

and download it first

<script src="./public/webpack.runtime.js"></script>

but it's definitely a crutch