Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 604
Howard Burrows Avatar asked Sep 29 '17 23:09

Howard Burrows


1 Answers

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.

like image 168
Howard Burrows Avatar answered Nov 09 '22 10:11

Howard Burrows