correct webpackoverride

Author: adeelibr

scripts/build.js

@@ -1,23 +1,22 @@
-const { nodeEnv, scriptName, configFilePath, paths } = require('./paths.utils');
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+const { modulePath, configFilePath } = require('./paths.utils');
 const { getFile, defaultOverridesConfig } = require('./helpers.utils');
 const overrides = getFile(configFilePath) || defaultOverridesConfig;
 
-// react-scripts files
-const pathsPath = `${scriptName}/config/paths`;
-const webpackConfigPath = `${scriptName}/config/webpack.config`;
-const devServerConfigPath = `${scriptName}/config/webpackDevServer.config`;
+const pathsPath = `${modulePath}/config/paths`;
+const webpackConfigPath = `${modulePath}/config/webpack.config`;
+const paths = require(pathsPath);
 const webpackConfig = require(webpackConfigPath);
-const devServerConfig = require(devServerConfigPath);
 
 // override config in memory
 require.cache[require.resolve(pathsPath)].exports = overrides.paths(
   paths,
-  nodeEnv
-);
-require.cache[require.resolve(webpackConfigPath)].exports = overrides.webpack(
-  webpackConfig,
-  nodeEnv
+  process.env.NODE_ENV
 );
+require.cache[require.resolve(webpackConfigPath)].exports = (env) => {
+  return overrides.webpack(webpackConfig(env), process.env.NODE_ENV);
+};
 
 // run original script
-require(`${scriptName}/scripts/build`);
+require(`${modulePath}/scripts/build`);

scripts/helpers.utils.js

@@ -10,19 +10,12 @@ const getFile = (file) => {
   } catch (error) {
     return false;
   }
-}
+};
 
 const defaultOverridesConfig = {
-  paths: (paths, env) => {
-    return paths;
-  },
-  webpack: (config, env) => {
-    return config;
-  },
-  devServer: (configFn) => (proxy, allowedHost) => {
-    const config = configFn(proxy, allowedHost);
-    return config;
-  }
+  paths: (paths, env) => paths,
+  webpack: (config, env) => config,
+  devServer: (configFn) => (proxy, allowedHost) => configFn(proxy, allowedHost),
 };
 
-module.exports = { getFile, defaultOverridesConfig }
+module.exports = { getFile, defaultOverridesConfig };

scripts/paths.utils.js

@@ -1,9 +1,15 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
-const nodeEnv = process.env.NODE_ENV || 'development';
+const fs = require('fs');
+const path = require('path');
+
+const projectDir = path.resolve(fs.realpathSync(process.cwd()));
+const scriptName = 'react-scripts';
+const modulePath = path.join(
+  require.resolve(`${scriptName}/package.json`),
+  '..'
+);
 
 module.exports = {
-  nodeEnv,
-  scriptName: 'react-scripts',
-  configFilePath: './config-extends',
-  paths: require(`react-scripts/config/paths`)
-}
+  modulePath,
+  configFilePath: `${projectDir}/config-overrides`,
+  paths: require(`${modulePath}/config/paths`);,
+};

scripts/start.js

@@ -1,27 +1,27 @@
-const { nodeEnv, scriptName, configFilePath, paths } = require('./paths.utils');
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+const { modulePath, configFilePath } = require('./paths.utils');
 const { getFile, defaultOverridesConfig } = require('./helpers.utils');
 const overrides = getFile(configFilePath) || defaultOverridesConfig;
 
-// react-scripts files
-const pathsPath = `${scriptName}/config/paths`;
-const webpackConfigPath = `${scriptName}/config/webpack.config`;
-const devServerConfigPath = `${scriptName}/config/webpackDevServer.config`;
+const pathsPath = `${modulePath}/config/paths`;
+const webpackConfigPath = `${modulePath}/config/webpack.config`;
+const devServerConfigPath = `${modulePath}/config/webpackDevServer.config`;
+const paths = require(pathsPath);
 const webpackConfig = require(webpackConfigPath);
 const devServerConfig = require(devServerConfigPath);
 
 // override config in memory
 require.cache[require.resolve(pathsPath)].exports = overrides.paths(
   paths,
-  nodeEnv
-);
-require.cache[require.resolve(webpackConfigPath)].exports = overrides.webpack(
-  webpackConfig,
-  nodeEnv
-);
-require.cache[require.resolve(devServerConfigPath)].exports = overrides.devServer(
-  devServerConfig,
-  nodeEnv
+  process.env.NODE_ENV
 );
+require.cache[require.resolve(webpackConfigPath)].exports = (env) => {
+  return overrides.webpack(webpackConfig(env), process.env.NODE_ENV);
+};
+require.cache[
+  require.resolve(devServerConfigPath)
+].exports = overrides.devServer(devServerConfig, process.env.NODE_ENV);
 
 // run original script
-require(`${scriptName}/scripts/start`);
+require(`${modulePath}/scripts/start`);