缩小的 React 错误 #152 - 如何解决这个问题？

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 render method 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'

Answer 5

I had same issue. So i removed comments inside my render function and it worked!

Answer 6

I accidentally imported it from here:

import {useState} from "react/cjs/react.production.min";

use import from import React, {useState} from 'react'; instead

That fixed the issue

Answer 7

In our instance, this was not related to comments inside the react HTML at all, it had to do with CMS changes. If you go through your react HTML and find no comments, try taking a look at other tools you are using that may be having an effect on your site.