Minified React error #152 - how to resolve this?

Question

I am getting below error even though I am building using dev environment. Below is my package.json file.

Error: "for the full message or use the non-minified dev environment for full errors and additional helpful warnings."

Package.json file:

 "scripts": {
    "compile": "webpack",
    "start": "node server.js",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

I do npm run build and then npm run start. Still I am getting the same minified error, I tried to delete bundle.js or ./dist folder and done building in dev environment, still I face the same issue.

Could anyone help me, how can I avoid this minified version and debug the files easily in local?

Answer 1

Remove any comment inside render/ return method

I used this regex in VSCode to find the troublesome comments: (\s*\n?\s*//

More help here

Answer 2

The error description is here, you return nothing as result of rendermethod of you react component. Return something else instead of it.

Answer 3

In case it helps someone, I resolved this problem by returning null instead of false (my function is wrapped inside an HOC)

Edit: sometimes I did not want to render anything. In such case, I returned false in the render method as something like this:

    render(){
        return condition && <ThingsIWantToDisplay/>; //condition is a boolean
    }

The component class is then wrapped within an HOC (to provide React Context) like this:

export default HOC(Component);

 

When condition is false, an error occurs in the production build.

Changing the render function as shown below alleviated the problem:

    render(){
        return condition?<ThingsIWantToDisplay/>:null; //condition is a boolean
    }

Answer 4

I have the same issue check your useState import

import { useState } from 'react/cjs/react.production.min'; change into import react,{usestate} from 'react'