React Developer Tools显示“等待根加载......”

Question

我刚刚切换到Preact 8.4.2，并希望React Developer Tools能够正常工作。在我的webpack.config.js中，我添加了：

alias: {
            react: 'preact-compat',
            'react-dom': 'preact-compat'
        } 

在我的条目.js文件中，我添加了：require('preact/debug');

添加这些之后，我在尝试构建时遇到错误：

Module parse failed: /myProject/node_modules/preact/src/preact.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { h, h as createElement } from './h';
| import { cloneElement } from './clone-element';
| import { Component } from './component';
 @ ./~/preact/debug.js 6:14-31

我只有.jsx文件加载babel-loader（而不是.js），所以我在webpack.config.js文件中添加了一个额外的条目：

         {
             test: /\.js$/,
             include: /node_modules\/preact/,
             loader: 'babel-loader'
         },

添加此条目后，我可以毫无问题地构建，但我的React Developer Tools只显示：

等待root加载...重新加载检查器[点击这里]

Answer 1

你的预制应用程序或webpack配置都有些东西。我刚刚解决了类似的问题。

第一步，检查它是否是你的预备。如果您没有控制台错误，请将您的预处理放入此工作样板（您必须做一些重新布线才能使其工作）https://github.com/developit/preact-boilerplate

如果在使用您的代码解雇之后，Devtools会按预期工作，那么您的构建会出现问题。在这种情况下，它会变成一个逐行更新你的（大部分）工作版本以匹配preact-boilerplate的游戏。

在我的情况下，我在我的webpack解决方案中包含了“src”。这在终端/控制台中没有出现任何错误，否则构建工作完美无缺。一旦我找到它，devtools就开始工作了。