How do I get webpack to transform the react production files?

Question

When I bundle my app using webpack with React 16 I get "Uncaught ReferenceError: require is not defined" in the browser for both react and react-dom. The resources causing the error are react.production.min.js and react-dom.production.min.js (from node_modules/react/cjs). When I inspect those files I clearly see the "require" references that are the source the of the error. This doesn't happen with React 15.6.2 (or lower) because the production bundles are free of any require calls. It seems that webpack is not transforming those files and I have no idea why not. I've google and google, re-read the webpack docs, and I'm just coming up totally empty handed. I'm sure this is a basic webpack config issue but I'm just not getting it. I'm using webpack 3.6.0. The exact same project is fine with React 15.6.2 (which seems reasonable as those production bundles don't have any require calls). This is only a problem when I create "production" bundles. In "development mode" I use react-hot-loader (version 3.0.0-beta.7) and have no problem. Development and production webpack config share the exact same module.rules which is:

config.module.rules = [
  // javascript
  {
    test: /\.jsx?$/,
    use: 'babel-loader',
    include: [path.join(__dirname, '../src/client'), path.join(__dirname, '../src/common')]
  },
];

How do I get webpack to transform the react production files? I'm surprised I'm the only one encountering this... but then sometimes I feel webpack has more control over me that I of it. Any tips would be really appreciated.

'This is only a problem when I create "production" bundles.' <-- Had that issue with a different problem, turned out I needed to upgrade my browser (which was 2+ years out of date). — HoldOffHunger
This is happening in Chrome 61.0.3163.79 and Safari 11. Haven't tried Firefox or Edge... but I don't believe it's a browser issue. The bundles aren't getting built correctly — Howard Burrows

Howard Burrows Howard Burrows · Accepted Answer · 2017-09-30T00:40:17

I knew it would be a simple solution: the following line needed to be removed

noParse: /\.min\.js/

From the docs: "Prevent webpack from parsing any files matching the given regular expression(s). Ignored files should not have calls to import, require, define or any other importing mechanism."

I had included this a some point, for some reason and that was the issue which is of course obvious. Amazing how you can stare at something for hours and not see the most obvious.

How do I get webpack to transform the react production files?

1 Answers