webpack: Uncaught TypeError: __webpack_require__(...).ensure is not a function
I’m not able to load my chunks on demand because require.ensure
is not defined. What I’m getting wrong here?
if (!global.Intl) {
require.ensure(["intl"], function (require) {
require('intl');
});
}
produces:
Uncaught TypeError: __webpack_require__(...).ensure is not a function
I’m loading CommonsChunkPlugin
new webpack.optimize.CommonsChunkPlugin("vendor", 'vendor.js'),
and injecting vendor.js
correctly into my page along with the main chunks.
I’m using the following webpack versions:
“webpack”: “^1.12.9”, “webpack-dev-middleware”: “^1.4.0”, “webpack-hot-middleware”: “^2.5.0”
and my webpack.prod.config.js
require('babel/polyfill');
// Webpack config for creating the production bundle.
var path = require('path');
var webpack = require('webpack');
var CleanPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var strip = require('strip-loader');
var relativeAssetsPath = '../static/dist';
var assetsPath = path.join(__dirname, relativeAssetsPath);
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
module.exports = {
devtool: 'source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'bootstrap-sass!./src/theme/bootstrap.config.prod.js',
'font-awesome-webpack!./src/theme/font-awesome.config.prod.js',
'./src/client.js'
],
intl: [
'intl'
]
},
output: {
path: assetsPath,
filename: '[name]-[chunkhash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: '/dist/'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loaders: [strip.loader('debug'), 'babel']},
{ test: /\.(yml|yaml)$/, loader: 'json-loader!yaml-loader' },
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]
},
progress: true,
resolve: {
modulesDirectories: [
'src',
'node_modules'
],
extensions: ['', '.json', '.js']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", '[name]-[chunkhash].js'),
new CleanPlugin([relativeAssetsPath]),
// css files from the extract-text-plugin loader
new ExtractTextPlugin('[name]-[chunkhash].css', {allChunks: true}),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: false,
__DEVTOOLS__: false
}),
// ignore dev config
new webpack.IgnorePlugin(/\.\/dev/, /\/config$/),
// set global vars
new webpack.DefinePlugin({
'process.env': {
// Useful to reduce the size of client-side libraries, e.g. react
NODE_ENV: JSON.stringify('production')
}
}),
// optimizations
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
/*new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),*/
webpackIsomorphicToolsPlugin
]
};
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Comments: 15 (3 by maintainers)
Commits related to this issue
- ES6, but wtf, export default issue https://github.com/webpack/webpack/issues/1685 https://www.npmjs.com/package/babel-plugin-add-module-exports — committed to johnykov/webpack-angular-es6 by deleted user 8 years ago
require.ensure
takes an array as first argument.Hi, if you are using
webpack-isomorphic-tools
you should setpatch_require: true
, it is false by default.From documentation:
I found the issue.
This piece of code is returning and object when we use export default in a ES6 module:
So we have to explicitly return the default function to be use in the callback like this:
Now you can load the module on demand:
@joliveros Can you try with babel-plugin-add-module-exports? Just a hunch.