Fix: Support webpack configs from react-scripts > 2.1.1 (#1241)

Closes #1243
styleguidist · Jan 17, 2019 · 8554a3d · 8554a3d
1 parent 4818ffe
commit 8554a3d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/src/scripts/utils/__tests__/findUserWebpackConfig.spec.js b/src/scripts/utils/__tests__/findUserWebpackConfig.spec.js
@@ -3,9 +3,20 @@ import findUserWebpackConfig from '../findUserWebpackConfig';
 const cwd = process.cwd();
 afterEach(() => process.chdir(cwd));
 
-it('should return path to Create React App Webpack config', () => {
+it('should return path to Create React App Webpack old config (react-scripts <= 2.1.1)', () => {
 	const result = findUserWebpackConfig(a => a);
-	expect(result).toMatch(/^react-scripts\//);
+	expect(result).toMatchInlineSnapshot(`"react-scripts/config/webpack.config.dev"`);
+});
+
+it('should return path to Create React App Webpack config (react-scripts > 2.1.1)', () => {
+	const result = findUserWebpackConfig(a => {
+		if (/webpack\.config\.dev/.test(a)) {
+			// Simulate an error. For example, if the file doesn't exist.
+			throw new Error();
+		}
+		return a;
+	});
+	expect(result).toMatchInlineSnapshot(`"react-scripts/config/webpack.config"`);
 });
 
 it('should return an absolute path to user Webpack config located in project root folder', () => {

diff --git a/src/scripts/utils/findUserWebpackConfig.js b/src/scripts/utils/findUserWebpackConfig.js
@@ -1,7 +1,10 @@
 const fs = require('fs');
 const path = require('path');
 
-const CREATE_REACT_APP_WEBPACK_CONFIG = 'react-scripts/config/webpack.config.dev';
+// react-scripts <= 2.1.1
+const CREATE_REACT_APP_WEBPACK_CONFIG_OLD = 'react-scripts/config/webpack.config.dev';
+// react-scripts > 2.1.1
+const CREATE_REACT_APP_WEBPACK_CONFIG = 'react-scripts/config/webpack.config';
 const USER_WEBPACK_CONFIG_NAMES = ['webpack.config.js', 'webpackfile.js'];
 
 const absolutize = filePath => path.resolve(process.cwd(), filePath);
@@ -17,14 +20,19 @@ const absolutize = filePath => path.resolve(process.cwd(), filePath);
 module.exports = function findUserWebpackConfig(resolve) {
 	resolve = resolve || require.resolve;
 	try {
-		// Create React App
-		return resolve(CREATE_REACT_APP_WEBPACK_CONFIG);
+		// Create React App <= 2.1.1
+		return resolve(CREATE_REACT_APP_WEBPACK_CONFIG_OLD);
 	} catch (err) {
-		// Check in the root folder
-		for (const configFile of USER_WEBPACK_CONFIG_NAMES) {
-			const absoluteConfigFile = absolutize(configFile);
-			if (fs.existsSync(absoluteConfigFile)) {
-				return absoluteConfigFile;
+		try {
+			// Create React App > 2.1.1
+			return resolve(CREATE_REACT_APP_WEBPACK_CONFIG);
+		} catch (err) {
+			// Check in the root folder
+			for (const configFile of USER_WEBPACK_CONFIG_NAMES) {
+				const absoluteConfigFile = absolutize(configFile);
+				if (fs.existsSync(absoluteConfigFile)) {
+					return absoluteConfigFile;
+				}
 			}
 		}
 	}