Question

我通过NPM安装了React js并使用browserify来管理react中的组件。当React发生异常时，控制台显示为

“未捕获错误：发生了缩小的异常;使用非缩小的开发环境中的完整错误消息和其他有用的警告“。

如何启用完整的错误消息？

Answer 1

将NODE_ENV设置为开发，正如Benjamin Gruenbaum在评论中指出的那样解决了这些问题。

set NODE_ENV=development

Answer 2

如果您遇到Karma + Webpack的这个问题，以下Webpack配置在运行测试时为我解决了这个问题：

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('development')
        }
    })
]

Answer 3

我终于解决了这个问题。

如果你像我一样并且运行该命令来设置NODE_ENV并且它实际上从未起作用，请检查您是否链接到react.min.js而不是文件的完整版本。

链接到完整版本，它应该像魅力一样工作。：D

Answer 4

如果您使用jspm捆绑代码，请注意版本0.16.24导入React的缩小“生产”版本，这会引发此错误。我的临时解决方案是将jspm降级到0.16.23。

编辑 jspm的未来版本将允许您声明生产版本与开发版本（请参阅jspm beta documentation）

Answer 5

我有这个问题，对我来说，我不需要禁用缩小或使用反应源。我的脚本只是在根元素之前加载。所以我只是将脚本移出头部并在索引文件源代码中的div下面并修复了它。

更改了我的index.jade：

html
 head
   title Super coo site
   script(src="bundle.js")
 body
   div#root

对此：

html
 head
   title Super coo site
 body
   div#root
   script(src="bundle.js")

Answer 6

您是否检查过您正在尝试渲染的DOM元素？由于一个愚蠢的错误我之前有这个错误。最糟糕的是捆绑被缩小了。元素 id 不相同

<强>的index.html

 public function rapport()
 {
   $datecompare = array(Date('Y'), Date('Y')-1, Date('Y')-2, Date('Y')-3,Date('Y')-4,Date('Y')-5,Date('Y')-6,Date('Y')-7);
   $this->set('datecompare',$datecompare);

   //The url called is : '/produits/rapport?datecompare=2015'
   if(isset($_GET['datecompare']))
   {
       $this->paginate = [
           'conditions' => [
               'Produits.supp_le_ts IS NULL',
               'YEAR(Produits.__creation_ts) = ' => $_GET['datecompare'],
           ],
           'contain' => ['Items'],
           'order' => ['nom' => 'asc']
       ];
       $produitsnouveau = $this->paginate($this->Produits); 

       $this->paginate = [
           'conditions' => [
               'YEAR(Produits.supp_le_ts) = ' => $_GET['datecompare'],
         ],
         'contain' => ['Items'],
         'order' => ['nom' => 'asc']
       ];
       $produitssupp = $this->paginate($this->Produits);
       debug($produitssupp);
       die;
   }else{
     $this->paginate = [
         'conditions' => [
             'Produits.supp_le_ts IS NULL',
             'YEAR(Produits.__creation_ts) = ' => $datecompare[0],
         ],
         'contain' => ['Items'],
         'order' => ['nom' => 'asc']
     ];
     $produitsnouveau = $this->paginate($this->Produits);

     $this->paginate = [
         'conditions' => [
             'YEAR(Produits.supp_le_ts) = ' => $datecompare[0],
         ],
         'contain' => ['Items'],
         'order' => ['nom' => 'asc']
     ];
     $produitssupp = $this->paginate($this->Produits);
   }

     $this->set('produitsnouveau',$produitsnouveau);
     $this->set('produitssupp',$produitssupp);
     $this->set('_serialize', ['produits']);
 }

<强> app.jsx


 <div id="ds-app"></div>

Answer 7

自version 15.2起，生产React错误消息（NODE_ENV=production）现在包含一个您可以访问的URL，您可以在其中看到原始的，未经模糊处理的错误。

https://twitter.com/dan_abramov/status/748969886433546240

您应该考虑升级到React 15.2以获取对这些错误消息的访问权限。此外，还有一些生产崩溃报告工具automatically unminify these errors。

Answer 8

使用生产环境中的min.js文件或将您的应用程序代码与process.env.NODE_ENV === 'production'捆绑在一起，您应该一切顺利！

Answer 9

如果您的package.json脚本具有dll，请尝试执行npm run dll或yarn run dll。

Answer 10

当我的render方法返回undefined时，我收到此错误，例如

render() {
    let view;
    // Not paying attention and slip a case where view won't get assigned a value
    if(this.props.foo == 'hello') {
        view = <HelloView />
    }
    else if(this.props.foo == 'bye') {
        view = <ByeView />
    }
    return view;
}

当this.props.foo为＆＃39; hi＆＃39;

时，这将触发错误

React - 发生了缩小的异常

10 个答案: