Support webpack config factory (CRA v2.1.2) (#346)

* react-app-rewired support react-scripts more than 2.1.2 version

* Fix for CRA 2.1.2 #343, builds on #344

* See about using node 6 and 8 in CI

.travis.yml

@@ -1,5 +1,6 @@
 language: node_js
 node_js:
-  - "7"
+  - "6"
+  - "8"
 cache:
   yarn: true

packages/react-app-rewired/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "cross-spawn": "^5.1.0",
-    "dotenv": "^4.0.0"
+    "dotenv": "^4.0.0",
+    "semver": "^5.6.0"
   },
   "repository": {
     "type": "git",

packages/react-app-rewired/scripts/build.js

@@ -1,13 +1,22 @@
 process.env.NODE_ENV = 'production';
 
-const paths = require('./utils/paths');
+const semver = require('semver');
+
+const { scriptVersion } = require('./utils/paths');
 const overrides = require('../config-overrides');
-const webpackConfigPath = paths.scriptVersion + "/config/webpack.config.prod";
+const scriptPkg = require(`${scriptVersion}/package.json`);
+
+// CRA 2.1.2 switched to using a webpack config factory
+// https://github.com/facebook/create-react-app/pull/5722
+// https://github.com/facebook/create-react-app/releases/tag/v2.1.2
+const isWebpackFactory = semver.gte(scriptPkg && scriptPkg.version, '2.1.2');
 
-// load original config
+const webpackConfigPath = `${scriptVersion}/config/webpack.config${!isWebpackFactory ? '.prod' : ''}`;
 const webpackConfig = require(webpackConfigPath);
+
 // override config in memory
-require.cache[require.resolve(webpackConfigPath)].exports =
-  overrides.webpack(webpackConfig, process.env.NODE_ENV);
+require.cache[require.resolve(webpackConfigPath)].exports = isWebpackFactory
+  ? (env) => overrides.webpack(webpackConfig(env), env)
+  : overrides.webpack(webpackConfig, process.env.NODE_ENV);
 // run original script
-require(paths.scriptVersion + '/scripts/build');
+require(`${scriptVersion}/scripts/build`);

packages/react-app-rewired/scripts/start.js

@@ -1,19 +1,28 @@
-process.env.NODE_ENV = process.env.NODE_ENV || "development";
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
-const paths = require("./utils/paths");
+const semver = require('semver');
+
+const { scriptVersion } = require('./utils/paths');
 const overrides = require('../config-overrides');
-const webpackConfigPath = paths.scriptVersion + "/config/webpack.config.dev";
-const devServerConfigPath = paths.scriptVersion + "/config/webpackDevServer.config.js";
+const scriptPkg = require(`${scriptVersion}/package.json`);
+
+// CRA 2.1.2 switched to using a webpack config factory
+// https://github.com/facebook/create-react-app/pull/5722
+// https://github.com/facebook/create-react-app/releases/tag/v2.1.2
+const isWebpackFactory = semver.gte(scriptPkg && scriptPkg.version, '2.1.2');
 
-// load original configs
+const webpackConfigPath = `${scriptVersion}/config/webpack.config${!isWebpackFactory ? '.dev' : ''}`;
+const devServerConfigPath = `${scriptVersion}/config/webpackDevServer.config.js`;
 const webpackConfig = require(webpackConfigPath);
 const devServerConfig = require(devServerConfigPath);
+
 // override config in memory
-require.cache[require.resolve(webpackConfigPath)].exports =
-  overrides.webpack(webpackConfig, process.env.NODE_ENV);
+require.cache[require.resolve(webpackConfigPath)].exports = isWebpackFactory
+  ? (env) => overrides.webpack(webpackConfig(env), env)
+  : overrides.webpack(webpackConfig, process.env.NODE_ENV);
 
 require.cache[require.resolve(devServerConfigPath)].exports =
   overrides.devServer(devServerConfig, process.env.NODE_ENV);
 
 // run original script
-require(paths.scriptVersion + "/scripts/start");
+require(`${scriptVersion}/scripts/start`);