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

【问题标题】：Minified React error #152 - how to resolve this?缩小的 React 错误 #152 - 如何解决这个问题？
【发布时间】：2018-05-23 20:32:29
【问题描述】：

即使我正在使用开发环境进行构建，我也遇到了错误。下面是我的 package.json 文件。

错误：“获取完整消息或使用未缩小的开发环境获取完整错误和其他有用的警告。”

Package.json 文件：

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

我先执行 npm run build，然后执行 npm run start。我仍然收到相同的缩小错误，我尝试删除 bundle.js 或 ./dist 文件夹并在开发环境中完成构建，但我仍然面临同样的问题。

谁能帮帮我，我怎样才能避免这个缩小版本并在本地轻松调试文件？

【问题讨论】：

标签： reactjs

【解决方案1】：

删除render/return方法中的任何注释

我在 VSCode 中使用了这个正则表达式来查找麻烦的 cmets： (\s*\n?\s*//

更多帮助here

【讨论】：

仅供参考：只需两个斜杠（后面没有任何内容）就足以搞砸并得到这个 152 错误。花了一段时间才找到这个。超级烦人！

【解决方案2】：

错误描述是here，由于renderreact 组件的方法，您没有返回任何内容。返回其他东西而不是它。

【讨论】：

感谢您的回复。我已经检查了这个错误，不知何故我通过取消注释我最近的代码并找出了一个语法问题来解决我的这个错误。但是在开发环境中工作时如何避免这种缩小的代码？缩小后，我实际上无法在chrome开发人员工具中逐行调试代码。
@IAmRkrishnaV21 如果你想有可读的缩小源代码，你需要使用“source map”，webpack 中最简单的方法是使用devtool: 'inline-source-map' (webpack.js.org/configuration/devtool)，但它不是另一个主题与您的原始问题相关。如果您用我的回答解决了原始问题，请检查为正确答案。
感谢您在 webpack 中提供最简单的方法。我的实际问题是同样的事情=>我怎样才能避免这个缩小版本并在本地轻松调试文件。我被提示与您提供的 react 提供的相同链接，但无论如何这是一个语法错误。后来的解决方案对我有用，避免了缩小版本以轻松调试，因此我将其标记为正确答案，因为我无法为您之前的评论执行此操作。

【解决方案3】：

如果它对某人有帮助，我通过返回 null 而不是 false 解决了这个问题（我的函数包装在 HOC 中）

编辑：有时我不想渲染任何东西。在这种情况下，我在 render 方法中返回 false，如下所示：

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

然后将组件类包装在一个 HOC 中（以提供 React 上下文），如下所示：

export default HOC(Component);

当condition 为false 时，生产构建会出错。

如下图改变渲染函数可以缓解这个问题：

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

【讨论】：

你用这个完全不同的问题的答案救了我的命！非常感谢！

【解决方案4】：

我有同样的问题。所以我在我的渲染函数中删除了 cmets 并且它起作用了！

【讨论】：

【解决方案5】：

我不小心从这里导入的：

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

改用从import React, {useState} from 'react'; 导入

解决了问题

【讨论】：

【解决方案6】：

我也有同样的问题检查你的 useState 导入

import { useState } from 'react/cjs/react.production.min'; 变成 import react,{usestate} from 'react'

【讨论】：