webpackJsonp is not defined

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'})
  ]
};

Author: Fantashit

1 thought on “webpackJsonp is not defined

  1. 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.

Comments are closed.

1 thought on “webpackJsonp is not defined

  1. I just ran across a similar issue. I am using angular with ASP.Net. I have to include the script libraries in my main page. The included script library statements have worked fine since CLI release beta.14. However, the location of WebpackJsonp changed since release beta.14. It was moved from inline.js to inline.bundle.js.

    I had to copy the script statements from the dist\index.html file and place the statement in my ASP.Net Views\Shared_Layout.cshtml file. I also had to update the path for each .js file to reflect the location in my ASP.Net solution.

    Hope this helps someone.

Comments are closed.

webpackJsonp is not defined

Bug Report or Feature Request (mark with an x)

- [x] bug report 
- [ ] feature request

Versions.

Output from: ng --version.
@angular/cli: 1.4.6
node: 6.11.3
os: darwin x64
@angular/animations: 4.4.4
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.6
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
@angular/service-worker: 1.0.0-beta.16
typescript: 2.3.4
macOS Sierra 10.12.6

Android Devices :

  • Samsung Galaxy S7 Edge, Android 7.0, Chrome 61.0.3163.98
  • Motorola Moto E4, Android 7.1.1, Chrome 61.0.3163.98
  • Pixel C, Android 8.0, Chrome 61.0.3163.98

Repro steps.

I have a webapp with a SW (generate by CLI), I build it with the “ng build –prod” command.

  • Open the webapp in Chrome on Android Device
  • Close Chrome
  • Repeat open (the webapp opened previously reload)/close Chrome few times, and the error happen

Important : I can’t reproduce it without a registered SW.

OR

  • Install app on Android Device
  • Repeat open/close the app few times, and the error happen

I can’t reproduce the error on my Mac.

The log given by the failure.

 Uncaught ReferenceError: webpackJsonp is not defined at sw-register.cddb6ecf3e30717910a9.bundle.js:1 

Desired functionality.

Webapp launch & display OK.

Mention any other details that might be useful.

I’ve already find this similar issue : #4998
But my uglify version is 3.

Author: Fantashit

5 thoughts on “webpackJsonp is not defined

  1. webpackJsonp is not defined usually mean you are not loading the javascript bundles in the right order. They must be loaded in the order present in the index.html that the CLI generates.

    Can you setup a minimal repro please? You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

  2. I had the same problem a while ago, turned out it was a problem with my browser (chrome). I cleaned the cache and then it worked great.

  3. Closing as no reproduction was provided.

    If the problem persists, please open a new issue following our submission guidelines.

    A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

Comments are closed.

1 thought on “webpackJsonp is not defined

  1. I’m getting this error now, launching in an environment were I cannot specify the cache of the HTTP server so easily. webpackJsonp is not defined because manifest file is not being loaded. And in my case it had to do with #574 app bootstrap JS files hashes not being updated. My guess is server cache.

    As a workaround I was setting (as mentioned here: https://github.com/nuxt/nuxt.js/pull/600/files) the same hashes (hard-coded) to the app, vendor and manifest files. But, for sure, is not a definitive solution…

    Like this:

    filenames: { // in nuxt.config.js, section `build`
      manifest: 'manifest.4410cd906ee37ddc6844.js?v1', // last cached hash for manifest file
      vendor: 'vendor.d119f49fae2480d12c47.js?v1', // last cached hash for vendor file
      app: 'app.9cb66721da158cd5c7bc.js?v1', // last cached hash for app file
    },

    Edit: Since I updated to Nuxt 2(.1), this error did not happen again and I could delete this section of the nuxt.config.js file entirely.

Comments are closed.

webpackJsonp is not defined

Ionic version: (check one with “x”)
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I’m submitting a … (check one with “x”)
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Since updating to 3.6 i’m getting “webpackJsonp is not defined” when I try to run my project.

Author: Fantashit

1 thought on “webpackJsonp is not defined

  1. My experience on this issue was missing <script src=”build/vendor.js”></script> inside index.html

Comments are closed.

webpackJsonp is not defined

Ionic version:
[ ] 1.x
[ ] 2.x
[x] 3.x

I’m submitting a …
[x] bug report
[ ] feature request
[ ] support request

Current behavior:
Just in case you don’t know guys…

API docs are giving an Uncaught ReferenceError: webpackJsonp is not defined and the demo device is empty (black screen)

Expected behavior:
See the demo device content

Steps to reproduce:
Go to https://ionicframework.com/docs/api/components/modal/ModalController/ and check the device

Amazing job btw ❤️

Author: Fantashit

3 thoughts on “webpackJsonp is not defined

  1. Nope.

    Runtime Error
    webpackJsonp is not defined
    Stack
    ReferenceError: webpackJsonp is not defined
        at http://localhost:8100/build/main.js:1:1
    

    Ionic Framework: ^3.6.1
    Ionic Native: 2.4.1
    Ionic App Scripts: 2.1.4
    Angular Core: 4.1.3
    Angular Compiler CLI: 4.1.3
    Node: 8.2.1

  2. @NecroMan k, that preserves vendor.js, but now get:

    Cannot find module “ionic-native”

    This is launching browser via ionic serve.

    Might need to ionic cordova platform add browser (blew away old install, migrating to latest Ionic + Angular5).

Comments are closed.