-
-
Notifications
You must be signed in to change notification settings - Fork 148
Webpack 4 "--mode production" breaks #484
Comments
@developit This is the same issue I was facing 3 weeks ago. Provides process.env.NODE_ENV with value production. Enables FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin and UglifyJsPlugin |
Happens for me as well, in production mode,
There is no type of props there. Everything looks fine in dev mode. Narrowed it down to |
AnalysisI looked into this further and it seems (at least in Before: /** Virtual DOM Node */
function VNode() {}
// Skipped code
function h(nodeName, attributes) {
// Skipped code
var p = new VNode();
// Skipped code
return p;
} After (interpreted by me): /*** No class declaration here ***/
function h(nodeName, attributes) {
// Skipped code
// `function VNode() {}` becomes the below anonymous class
var p = new function() {};
// Skipped code
return p;
} As a side-node, even renaming it to anything but still kept the in top-level scope would still work: /** Virtual DOM Node */
function fooBar() {}
// Skipped code
function h(nodeName, attributes) {
// Skipped code
var p = new fooBar();
// Skipped code
return p;
} So it seems the class declarations is being used as a global somewhere or there is some identity conditional that never evaluates to WorkaroundA work around for this is to use Here is a webpack config that can be merged into an existing config (I use WebPack merge to do this). It splits out const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
output: {
// Add chunk name to filename so Uglify's include/exclude can target it.
chunkFilename: '[chunkhash].[name].js',
},
optimization: {
splitChunks: {
cacheGroups: {
// Create a separate chunk for preact to apply slightly different
// Uglify options on it.
preact: {
name: 'preact',
chunks: 'all',
minSize: 0,
test: /[\\/]preact[\\/]/,
priority: 99,
},
},
},
minimizer: [
// Prevent function reduction in preact for preact-compat to work.
new UglifyJsPlugin({
include: /preact\.js$/,
uglifyOptions: {
compress: {
reduce_funcs: false,
},
},
}),
// Normal uglifying for everything else.
new UglifyJsPlugin({
exclude: /preact\.js$/,
cache: true,
parallel: true,
}),
],
},
}; |
I did also had this problem where I was using preact in production. But found that I would need the const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// and this config
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
reduce_vars: false // see https://github.com/developit/preact/issues/961
}
}
})
]
} And with another package var _jsx2 = require('babel-runtime/helpers/jsx'); I am no babel-expert but it looks to me like babel-runtime is a deprecated method to use, so I upgraded the package and after switching to this my project works fine with preact-compat and webpack 4 |
Sorry for the absence. I believe we may have merged a workaround for this Uglify bug in Preact itself, which will fix the issues described here. Sorry for the really difficult debugging! Here's the PR to Preact: We'll release it as a patch update shortly. As mentioned by @gerhardsletten, a temporary workaround is to disable |
This is fixed in Preact 8.3.0. Update and enjoy! |
On the lazy component loading: Even though the component was ES6, it was still necessary to import by calling default. Ref: https://webpack.js.org/migrate/4#import-and-commonjs Disabled the web pack mode behaviour of setting the nodeEnv based on the set mode. This is because we expect nodeEnv to have more than two possible values. Upgraded preact compat. This was in hope to fix the lazy loading, but it probably didn’t have much effect. Still an upgrade should be better. Ref: preactjs/preact-compat#484 Updated uglify JS for the same reason that updated preact compat.
For some reason, when I start the server with
cross-env NODE_ENV=production webpack --config='config/webpack.config.js' --mode production
it breaks and ReactDOM.render(...) returns
<undefined></undefined>
. Changing it to--mode development
fixes it.cross-env NODE_ENV=production webpack --config='config/webpack.config.js' --mode development
Webpack config:
The text was updated successfully, but these errors were encountered: