Webpack - Uncaught ReferenceError: webpackJsonp is not defined

javascript node.js angular webpack multi-project
11,133

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()
        ]    
    };
};
Share:
11,133
brevleq
Author by

brevleq

@brevleq

Updated on June 23, 2022

Comments

  • brevleq
    brevleq almost 2 years

    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?

Recents

Why Is PNG file with Drop Shadow in Flutter Web App Grainy?
How to troubleshoot crashes detected by Google Play Store for Flutter app
Cupertino DateTime picker interfering with scroll behaviour
Why does awk -F work for most letters, but not for the letter "t"?
Flutter change focus color and icon color but not works
How to print and connect to printer using flutter desktop via usb?
Critical issues have been reported with the following SDK versions: com.google.android.gms:play-services-safetynet:17.0.0
Flutter Dart - get localized country name from country code
navigatorState is null when using pushNamed Navigation onGenerateRoutes of GetMaterialPage
Android Sdk manager not found- Flutter doctor error
Flutter Laravel Push Notification without using any third party like(firebase,onesignal..etc)
How to change the color of ElevatedButton when entering text in TextField

Related

"Uncaught ReferenceError: require is not defined" with Angular 2/webpack
Turning off Strict Mode in Angular?
How to code HTML with jade and webpack with hot reload
React - '$' is not defined
Send email using nodemailer angular 6
Import a module from string variable
webpack & babel-polyfill: Can't resolve 'core-js/modules/es6.array.map' in source directory
the source list for content security policy directive 'script-src' contains an invalid source in safari angular 5
npm run dev command does not work on vuejs' hackernews example
Uncaught Error: [HMR] Hot Module Replacement is disabled