NG6-starter
NG6-starter copied to clipboard
PatrickJS
Uncaught ReferenceError: webpackJsonp is not defined
hi there, well, only when run the tests, this happens when I split my app into chunks by using the CommonsChunkPlugin to split vendor libraries in this case angular
here's my webpack.config.js
var path = require('path'),
webpack = require('webpack');
var config = {
context: __dirname,
devtool: 'source-map',
entry: {
main: [
'babel-polyfill',
'./client/crm/crm.js',
'./client/build/vendors.js',
'./client/crm/assets/stylus/styles.styl'
],
// Since angular is installed as a node module, node_modules/angular,
// we can point to it directly, just like require('angular');
vendors: ['angular']
},
output: {
path: __dirname + '/client/build',
//publicPath: 'http://localhost:8080/client/crm/',
filename: 'bundle.js'
},
module: {
preLoaders: [{test: /\.js$/, loader: 'jshint-loader', exclude: /node_modules/}],
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: [
path.resolve(__dirname, 'node_modules')
],
// Options to configure babel with
query: {
cacheDirectory: true,
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-2']
}
},
{test: /\.html$/, loader: 'html', exclude: /node_modules/},
{test: /\.css$/, loader: 'style!css', exclude: /node_modules/},
{test: /\.styl$/, loader: 'style!css!stylus', exclude: /node_modules/},
{test: /\.png/, loader: 'url?limit=100000&mimetype=image/png' },
{test: /\.jpg/, loader: 'file-loader' },
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader'},
{test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader' }
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
]
};
if (process.env.NODE_ENV === 'production') {
config.output.path = __dirname + '/dist';
config.plugins.push(new webpack.optimize.UglifyJsPlugin());
config.devtool = 'source-map';
}
module.exports = config;
and offcourse I added to my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CRM+</title>
<link rel="stylesheet" href="crm/assets/css/bootstrap.css">
</head>
<body class="CRM-background">
<crm></crm>
<script src="build/vendors.js"></script>
<script src="build/bundle.js"></script>
</body>
</html>
but when I run the tests, I got this:
even that I added to the spec.bundle.js I got the same error
is there something that I missing??? I've searched but coudn't find something similar to this case, hope somebody help me :)
Read the following and should fixes the issue. https://github.com/webpack/webpack/issues/368
In my case, in .html I was referencing app.js BEFORE vendor.js, reversed/corrected the order, and the webpackJsonp error was gone.
Hope this helps.
I believe it's because your config entry points are in in an incorrect order. Shouldn't the vendor entry come before app?
Strangely enough, I was able to fix this by clearing my cache with ctrl+F5. This error randomly showed up after updating an HTML file with a button, but that seems unrelated as it stuck with I removed what I added.
Kind of related, kind of not. But if you are using Safari, I can confirm this is a cache issue. I resolved it by opening safari > preferences > privacy > manage website data > clear all
