CODEWITHSUNDEEP
javascriptreactjswebpack
Barrard
Barrard

Reputation: 2043

Create React App production build runtime error: Cannot read property 'call' of undefined

I have a CRA project that runs fine when i use react-scripts start in development. But once I build react-scripts build and then serve these files, I get this error Uncaught TypeError: Cannot read property 'call' of undefined enter image description here

I dont have any custom webpack config. I've tried to comment large areas of source code, and I still get this error trying to serve the build files.

Thanks for any help!

Upvotes: 1

Views: 2953

Answers (2)

radihuq
radihuq

Reputation: 1082

@Barrard's solution worked for me.

If you're building a Create React App and don't want to eject the application, the following steps are how I updated my webpack config:

  1. Add customize-cra and react-app-rewired [0]

  2. Update your start and build scripts to use react-app-rewired instead of react-scripts [1]

  3. There is no built in API to update the optimization.sideEffects property, so we have to build our own [2]. Create a config-overrides.js file where your package.json is and add the following code in there:

const { override } = require("customize-cra");

const setOptimizationSideEffect = flag => config => {
    config.optimization.sideEffects = flag
    return config;
}

module.exports = override(
    setOptimizationSideEffect(false)
);

[0] https://github.com/arackaf/customize-cra

[1] https://github.com/timarney/react-app-rewired#3-flip-the-existing-calls-to-react-scripts-in-npm-scripts-for-start-build-and-test

[2] https://github.com/arackaf/customize-cra/issues/155#issuecomment-523958656

Upvotes: 0

Barrard
Barrard

Reputation: 2043

I found this answer, and it solved the issue. https://stackoverflow.com/a/58628185/5231665
I just had to add this to the react-scripts webpack.config.js

optimization: {
    sideEffects: false,// <----- in production defaults to true if left blank
}

Upvotes: 3

Related Questions