Fix Webpack 4 DefinePlugin config

[jbruni]

What?

I've found that the usage of webpack.DefinePlugin at Cornerstone's Webpack configuration is wrong:

new webpack.DefinePlugin({
    'process.env.NODE_ENV': 'development',
}),

According to official DefinePlugin documentation, if the definition value is a string, it will be used as a code fragment.

The plugin does a direct text replacement. The recommended way, broadly used, and also referred in official documentation, is to wrap the string in a JSON.stringify call:

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development'),
}),

This way, in code, process.env.NODE_ENV will be properly substituted by the string "development", instead of the literal code snippet development, which results in a 'development' is not defined error because development is considered an undefined variable.

I've stumbled upon this issue when adding Vue.js and vue-loader as dependencies. When bundling Vue.js, Webpack substitutes process.env.NODE_ENV in Vue.js code. Due to the misconfiguration, Vue.js fails with a development is not defined error.

Tickets / Documentation

• Official DefinePlugin documentation
• Sample DefinePlugin usage in Vue.js documentation
• Another sample of proper DefinePlugin usage

Post Scriptum

In fact, this whole DefinePlugin usage in Cornerstone config seems obsolete, now that Webpack 4 automatically uses the mode configuration value for process.env.NODE_ENV replacements.

I have completely removed the whole DefinePlugin usage from Webpack config locally, and everything worked. If we were setting other definitions, or if we wanted to override mode value in process.env.NODE_ENV, then it would make sense to keep using DefinePlugin.

[junedkazi]

@jbruni the changes look good. Can you also add a changelog entry please.

[jbruni]

@junedkazi - 👍 I've added a changelog entry.