Error under Webpack 4: it can't access process.env.NODE_ENV

[thunderkid]

I'm trying to get a simple case working. My webpack plugins are as follows:

    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"'
        }),
        new MiniCssExtractPlugin({
            filename: "style.css",
            chunkFilename: "[id].css",
        }),
        new HtmlWebpackPlugin({
            template: resolve(_qdir, appDir(env) + '/index.html'),
            favicon: 'images/favicon.png'
        }),
        new WebpackCdnPlugin({
            modules: [
                { name: 'react', var: 'React'}
            ]
        }),
    ]

The bundle is output with no errors, but when I point my browser to my index.html file, it gives a runtime error in the browser saying process is not defined on this line:

if (process.env.NODE_ENV === 'production') {                      <<<<<<<<<<< here
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

Without WebpackCdnPlugin, it works fine, and it also works fine if I instead use dynamic-cdn-webpack-plugin. I've tried putting in another webpack.DefinePlugin after WebpackCdnPlugin in case Webpack 4 has some ordering issue, but no difference. If nothing else, is there an option I can pass to the plugin to tell it to use production mode without trying to reference process.env.NODE_ENV? Thanks.

[shirotech]

Hi @thunderkid not sure what you are trying to do, why would you need to run this in a browser environment?

[thunderkid]

I thought that's what this plugin was designed for.
I'm using webpack to bundle a React single-page app. I'd like to reduce my gzipped bundle size. I thought that WebpackCdnPlugin with the above config was was designed to automatically remove the React part of the bundle and instead to direct the browser to download React from .cjs/react.production.min.js.
Is that not its purpose?

[shirotech]

The purpose of this plugin is to help webpack build your html files directly with the said scripts and styles from CDN. Okay I see what you're trying to do, please read the documentations on the README, I think what you want is the devUrl and prodUrl properties in your config. You do not need to detect it manually in your example. I hope this makes sense.

[thunderkid]

Thanks. I'd left prodUrl out because the readme says that if it's not specified it would fall back to using unpkg.com. So I thought I could just list React (and some other large libraries too) and that WebpackCdnPlugin would direct the browser to the cdn version at unpkg.com. Do I actually need to provide an explicit URL for each library?

[shirotech]

You don't need to if filename is the same, in your case you are using it as a means to using both prod and dev a local file with min and non-min respectively. I'm not sure if you're wanting to use the CDN feature?

[thunderkid]

Thanks for your help. Yes I am trying to use the CDN feature. I have a 150k+ gzipped bundle and I was hoping I could just list React, Mobx, SomeOtherLibrary in the WebpackCdnPlugin modules section of my config as above, and the plugin would reduce my bundle size by using the unpkg.com versions instead. It's the prod version that I'm trying to minimize.

[shirotech]

Okay then in your case you just need to specify the path property. e.g. This would simplify the process just to use the min.

modules: [
  {
    name: 'react',
    var: 'React',
    path: 'cjs/react.production.min.js'
  }
]

Then you can just use require('react') or import React from 'react'.

[shirotech]

You're also welcome to do a PR to support devPath and prodPath or something.