Webpack - Uncaught ReferenceError: webpackJsonp is not defined

javascript node.js angular webpack multi-project
brevleq picture brevleq · Oct 21, 2017 · Viewed 10.1k times · Source

I'm developing a project that has two Angular 4 application and I'm having some problem configuring Webpack (3.5.2). Im getting this error in just one of the applications:

Uncaught ReferenceError: webpackJsonp is not defined
at styles.bundle.js:1
(anonymous) @ styles.bundle.js:1
vendor.bundle.js:1 

Uncaught ReferenceError: webpackJsonp is not defined
at vendor.bundle.js:1
(anonymous) @ vendor.bundle.js:1
main.bundle.js:1 

Uncaught ReferenceError: webpackJsonp is not defined
at main.bundle.js:1
(anonymous) @ main.bundle.js:1

My Webpack's configuration is splitted in two files:

webpack.common.js

const StringReplacePlugin = require('string-replace-webpack-plugin');
const MergeJsonWebpackPlugin = require("merge-jsons-webpack-plugin");

const utils = require('./utils.js');

module.exports = function(options) {
    const DATAS = {
        VERSION: `'${utils.parseVersion()}'`,
        DEBUG_INFO_ENABLED: options.env === 'development',
        SERVER_API_URL: `"/"`
    };
    return {
        resolve: {
            extensions: ['.ts', '.js'],
            modules: ['node_modules']
        },
        stats: {
            children: false
        },
        module: {
            rules: [
                { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },
                { 
                    test: /\.html$/,
                    loader: 'html-loader',
                    options: {
                        minimize: true,
                        caseSensitive: true,
                        removeAttributeQuotes:false,
                        minifyJS:false,
                        minifyCSS:false
                    },
                    exclude: ['./src/main/webapp/admin/index.html','./src/main/webapp/app/index.html']
                },
                {
                    test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
                    loaders: ['file-loader?&hash=sha512&digest=hex&name=admin/assets/fonts/[hash].[ext]']
                },
                {
                    test: /app.constants.ts$/,
                    loader: StringReplacePlugin.replace({
                        replacements: [{
                            pattern: /\/\* @toreplace (\w*?) \*\//ig,
                            replacement: (match, p1, offset, string) => `_${p1} = ${DATAS[p1]};`
                        }]
                    })
                }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env': {
                    'NODE_ENV': JSON.stringify(options.env)
                }
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'polyfills',
                chunks: ['polyfills']
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'admin/app/vendor',
                chunks: ['admin/app/main'],
                minChunks: module => utils.isExternalLib(module)
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: ['polyfills', 'admin/app/vendor'].reverse()
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'app/app/vendor',
                chunks: ['app/app/main'],
                minChunks: module => utils.isExternalLib(module)
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: ['polyfills', 'app/app/vendor'].reverse()
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: ['manifest'],
                minChunks: Infinity
            }),
            new webpack.ContextReplacementPlugin(
                /angular(\\|\/)core(\\|\/)@angular/,
                utils.root('src/main/webapp/admin/app'), {}
            ),
            new webpack.ContextReplacementPlugin(
                /angular(\\|\/)core(\\|\/)@angular/,
                utils.root('src/main/webapp/app/app'), {}
            ),
            new CopyWebpackPlugin([
                { from: './node_modules/core-js/client/shim.min.js', to: 'core-js-shim.min.js' },
                { from: './node_modules/swagger-ui/dist/css', to: 'admin/swagger-ui/dist/css' },
                { from: './node_modules/swagger-ui/dist/lib', to: 'admin/swagger-ui/dist/lib' },
                { from: './node_modules/swagger-ui/dist/swagger-ui.min.js', to: 'admin/swagger-ui/dist/swagger-ui.min.js' },
                { from: './src/main/webapp/admin/swagger-ui/', to: 'admin/swagger-ui' },
                { from: './src/main/webapp/admin/favicon.ico', to: 'admin/favicon.ico' },
                { from: './src/main/webapp/static/', to: 'static' },
                { from: './src/main/webapp/admin/assets', to: 'admin/assets' },
                { from: './src/main/webapp/app/assets', to: 'app/assets' }
        ]),
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                echarts: "echarts"
            }),
            new MergeJsonWebpackPlugin({
                output: {
                    groupBy: [
                        { pattern: "./src/main/webapp/admin/i18n/pt-br/*.json", fileName: "./admin/i18n/pt-br.json" },
                        { pattern: "./src/main/webapp/admin/i18n/en/*.json", fileName: "./admin/i18n/en.json" }
                    ]
                }
            }),
            new HtmlWebpackPlugin({
                template: './src/main/webapp/admin/index.html',
                chunksSortMode: 'dependency',
                inject: 'body',
                filename: 'admin/index.html',
                excludeChunks: ['app/app/main','app/app/styles', 'app/app/vendor']
            }),
            new HtmlWebpackPlugin({
                template: './src/main/webapp/app/index.html',
                chunksSortMode: 'dependency',
                inject: 'body',
                filename: 'app/index.html',
                excludeChunks: ['admin/app/main','admin/app/styles', 'admin/app/vendor']
            }),
            new StringReplacePlugin()
        ]
    };
};

webpack.dev.js

const webpack = require('webpack');
const writeFilePlugin = require('write-file-webpack-plugin');
const webpackMerge = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');

const utils = require('./utils.js');
const commonConfig = require('./webpack.common.js');

const ENV = 'development';

module.exports = webpackMerge(commonConfig({ env: ENV }), {
    devtool: 'eval-source-map',
    devServer: {
        contentBase: './target/www',
        proxy: [{
            context: [
                '/api',
                '/management',
                '/swagger-resources',
                '/v2/api-docs',
                '/h2-console'
            ],
            target: 'http://127.0.0.1:8080',
            secure: false
        }]
    },
    entry: {
        polyfills: './src/main/webapp/shared/polyfills',
        'admin/app/styles': './src/main/webapp/admin/app/@theme/styles/styles.scss',
        'admin/app/main': './src/main/webapp/admin/app/app.main',
        'app/app/styles': './src/main/webapp/app/app/app.main',
        'app/app/main': './src/main/webapp/app/app/app.scss'
    },
    output: {
        path: utils.root('target/www'),
        publicPath: '/',
        filename: '[name].bundle.js',
        chunkFilename: '[id].chunk.js'
    },
    module: {
        rules: [{
            test: /\.ts$/,
            enforce: 'pre',
            loaders: 'tslint-loader',
            exclude: ['node_modules', new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
        },
        {
            test: /\.ts$/,
            loaders: [
                'awesome-typescript-loader',
                'angular-router-loader?debug=true',
                'angular2-template-loader'
            ],
            exclude: ['node_modules/generator-jhipster']
        },
        {
            test: /\.scss$/,
            loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
            exclude: /(styles\.scss)/
        },
        {
            test: /(styles\.scss)/,
            loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
        },
        {
            test: /\.css$/,
            loaders: ['to-string-loader', 'css-loader'],
            exclude: /(styles\.css)/
        },
        {
            test: /(styles\.css)/,
            loaders: ['style-loader', 'css-loader']
        }]
    },
    plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 9000,
            proxy: {
                target: 'http://localhost:9060'
            }
        }, {
            reload: false
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.NamedModulesPlugin(),
        new writeFilePlugin(),
        new webpack.WatchIgnorePlugin([
            utils.root('src/test')
        ]),
        new WebpackNotifierPlugin({
            title: 'JHipster',
            contentImage: path.join(__dirname, 'logo-jhipster.png')
        })
    ]    
});

The directory structure was generated as expected:

webpack multi project generated files

What I did wrong in this configuration?

Answer

brevleq picture brevleq · Oct 21, 2017

I talked to a friend and he said me the problem was the order of the import files in index.html, it should be:

<script type="text/javascript" src="/manifest.bundle.js"></script>
<script type="text/javascript" src="/polyfills.bundle.js"></script>
<script type="text/javascript" src="/app/app/vendor.bundle.js"></script>
<script type="text/javascript" src="/app/app/styles.bundle.js"></script>
<script type="text/javascript" src="/app/app/main.bundle.js"></script>

but was:

<script type="text/javascript" src="/app/app/styles.bundle.js"></script>
<script type="text/javascript" src="/app/app/vendor.bundle.js"></script>
<script type="text/javascript" src="/app/app/main.bundle.js"></script>
<script type="text/javascript" src="/manifest.bundle.js"></script>
<script type="text/javascript" src="/polyfills.bundle.js"></script>

So I could use one of two approachs, use only one vendor for the two projects or configure the HtmlWebpackPlugin to manually order the files. As I could use one vendor for the two applications, I decided use only one vendor:

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StringReplacePlugin = require('string-replace-webpack-plugin');
const MergeJsonWebpackPlugin = require("merge-jsons-webpack-plugin");

const utils = require('./utils.js');

module.exports = function(options) {
    const DATAS = {
        VERSION: `'${utils.parseVersion()}'`,
        DEBUG_INFO_ENABLED: options.env === 'development',
        SERVER_API_URL: `"/"`
    };
    return {
        resolve: {
            extensions: ['.ts', '.js'],
            modules: ['node_modules']
        },
        stats: {
            children: false
        },
        module: {
            rules: [
                { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },
                {
                    test: /\.html$/,
                    loader: 'html-loader',
                    options: {
                        minimize: true,
                        caseSensitive: true,
                        removeAttributeQuotes:false,
                        minifyJS:false,
                        minifyCSS:false
                    },
                    exclude: ['./src/main/webapp/admin/index.html','./src/main/webapp/app/index.html']
                },
                {
                    test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
                    loaders: ['file-loader?&hash=sha512&digest=hex&name=admin/assets/fonts/[hash].[ext]']
                },
                {
                    test: /app.constants.ts$/,
                    loader: StringReplacePlugin.replace({
                        replacements: [{
                            pattern: /\/\* @toreplace (\w*?) \*\//ig,
                            replacement: (match, p1, offset, string) => `_${p1} = ${DATAS[p1]};`
                        }]
                    })
                }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env': {
                    'NODE_ENV': JSON.stringify(options.env)
                }
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'polyfills',
                chunks: ['polyfills']
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                chunks: ['admin/app/main','app/app/main'],
                minChunks: module => utils.isExternalLib(module)
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: ['polyfills', 'vendor'].reverse()
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: ['manifest'],
                minChunks: Infinity
            }),
            new webpack.ContextReplacementPlugin(
                /angular(\\|\/)core(\\|\/)@angular/,
                utils.root('src/main/webapp/admin/app'), {}
            ),
            new webpack.ContextReplacementPlugin(
                /angular(\\|\/)core(\\|\/)@angular/,
                utils.root('src/main/webapp/app/app'), {}
            ),
            new CopyWebpackPlugin([
                { from: './node_modules/core-js/client/shim.min.js', to: 'core-js-shim.min.js' },
                { from: './node_modules/swagger-ui/dist/css', to: 'admin/swagger-ui/dist/css' },
                { from: './node_modules/swagger-ui/dist/lib', to: 'admin/swagger-ui/dist/lib' },
                { from: './node_modules/swagger-ui/dist/swagger-ui.min.js', to: 'admin/swagger-ui/dist/swagger-ui.min.js' },
                { from: './src/main/webapp/admin/swagger-ui/', to: 'admin/swagger-ui' },
                { from: './src/main/webapp/admin/favicon.ico', to: 'admin/favicon.ico' },
                { from: './src/main/webapp/static/', to: 'static' },
                { from: './src/main/webapp/admin/assets', to: 'admin/assets' },
                { from: './src/main/webapp/app/assets', to: 'app/assets' }
            ]),
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                echarts: "echarts"
            }),
            new MergeJsonWebpackPlugin({
                output: {
                    groupBy: [
                        { pattern: "./src/main/webapp/admin/i18n/pt-br/*.json", fileName: "./admin/i18n/pt-br.json" },
                        { pattern: "./src/main/webapp/admin/i18n/en/*.json", fileName: "./admin/i18n/en.json" }
                    ]
                }
            }),
            new HtmlWebpackPlugin({
                template: './src/main/webapp/admin/index.html',
                chunksSortMode: 'dependency',
                inject: 'body',
                filename: 'admin/index.html',
                excludeChunks: ['app/app/main','app/app/styles']
            }),
            new HtmlWebpackPlugin({
                template: './src/main/webapp/app/index.html',
                chunksSortMode: 'dependency',
                inject: 'body',
                filename: 'app/index.html',
                excludeChunks: ['admin/app/main','admin/app/styles']
            }),
            new StringReplacePlugin()
        ]    
    };
};

Related questions

Update to Angular 5

How to update to Angular 5? This is from my package.json: "dependencies": { "@angular/animations": "5.0.0", "@angular/common": "5.0.0", "@angular/compiler": "5.0.0", "@angular/core": "5.0.0", "@angular/forms": "5.0.0", "@angular/http": "5.0.0", "@angular/platform-browser": "5.0.0", "@angular/platform-browser-dynamic": "5.0.0", "@angular/router": "5.0.0", "@types/jwt-decode": "^2.2.1", "bootstrap": "^3.3.7", "bootstrap-sass": "^3.3.7", "classlist.js": "^1.1.20150312", "core-js": "^2.4.1", "intl": "^1.2.5", "jquery": "^3.2.1", "jwt-decode": "^2.2.0", "…

Read More
Angular 2 Karma Test 'component-name' is not a known element

In the AppComponent, I'm using the nav component in the HTML code. The UI looks fine. No errors when doing ng serve. and no errors in console when I look at the app. But when I ran Karma for my …

Read More
Error: npm ERR! write after end

I am having issues installing Cordova and Ionic. At first I couldn't because of what seems to be a corrupted installation, that led me to uninstall NodeJS - Cordova - Ionic. Now, I've reinstalled NodeJS, without issues but when it …

Read More