Crash in react-app-rewired 2 / Webpack 4 (and fix)

[nabilfreeman]

Hello, thanks for making this library, very simple but magical to someone like me without much Webpack experience!!

I ran into an issue when trying to use this library in react-app-rewired 2 / webpack 4 and had to adjust slightly.

This was causing a crash:

const ReactWebConfig = require('react-web-config/lib/ReactWebConfig').ReactWebConfig;

const envFilePath = path.resolve(__dirname, '.env.storefront.web.staging');

config.plugins.push(
	ReactWebConfig(envFilePath),
);

It was very strange because if I console logged the contents of the DefinePlugin and manually entered it it would build correctly.

The inside of the build helper is very simple so I just required dotenv directly in the webpack override and everything worked.

const dotenv = require('dotenv');

const envFilePath = path.resolve(__dirname, '.env.storefront.web.staging');

config.plugins.push(
	new webpack.DefinePlugin({
		__REACT_WEB_CONFIG__: JSON.stringify(dotenv.config({ path: envFilePath }).parsed),
	}),
);

Really weird, I don't understand why this has happened but too inexperienced and tired to work it out right now.

Here is the stack trace. Some research suggests that it's a very generic error due to a bad Webpack plugin.

Starting the development server...

/Users/freeman/Projects/lesalon/reactnative-common-repo/node_modules/neo-async/async.js:16
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (/Users/freeman/Projects/lesalon/reactnative-common-repo/node_modules/neo-async/async.js:16:11)
    at /Users/freeman/Projects/lesalon/reactnative-common-repo/node_modules/neo-async/async.js:2818:7
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! LeSalonApp@0.0.1 web:storefront: `EXTEND_ESLINT=1 SKIP_PREFLIGHT_CHECK=true PORT=5000 react-app-rewired start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the LeSalonApp@0.0.1 web:storefront script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/freeman/.npm/_logs/2020-10-08T19_42_30_569Z-debug.log

[BayCo]

@nabilfreeman, Did you resolve this issue, i am facing the same one?

[gsanguinetti]

Same here.

[fachrihawari]

I try to make the webpack & dotenv version the same like on the react-scripts and it works