CODEWITHSUNDEEP
javascriptreactjswebpack
favor
favor

Reputation: 395

How can I determine where an error occurred in React?

I am running a simple React app w/ webpack in development mode as follows:

webpack -w --mode development --config ./webpack.config.js

so that my code is not minified. However I get a warning from React as follows:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. at WEBPACK_DEFAULT_EXPORT (http://localhost:3000/bundle.js:4165:70) at div at WEBPACK_DEFAULT_EXPORT (http://localhost:3000/bundle.js:4120:73)

The links it gives are to actual React library code, but I would like to know the code the developer wrote which caused the warning.

Normally React will pull up the developer's code, but in this case it does not. Is there a way to find this easily?

I believe an error will normally show a stack trace but this is a warning so perhaps it is not possible?

I would like to atleast know the file which is causing the warning.

Upvotes: 2

Views: 1831

Answers (1)

Avanthika
Avanthika

Reputation: 4182

I'd recommend using eval-source-map in development - https://webpack.js.org/configuration/devtool/#development

eval-source-map - Each module is executed with eval() and a SourceMap is added as a DataUrl to the eval(). Initially it is slow, but it provides fast rebuild speed and yields real files. Line numbers are correctly mapped since it gets mapped to the original code. It yields the best quality SourceMaps for development.

For production, none/source-map is a good place to start with.

source-map - A full SourceMap is emitted as a separate file. It adds a reference comment to the bundle so development tools know where to find it.

Upvotes: 2

Related Questions