React 开发人员工具显示“等待根加载...”答案

【问题标题】：React Developer Tools Shows "Waiting for roots to load..."React 开发人员工具显示“等待根加载...”
【发布时间】：2019-03-26 02:41:21
【问题描述】：

我刚刚切换到 Preact 8.4.2，希望 React 开发者工具也能正常工作。在我的 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

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

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

添加此条目后，我可以毫无问题地构建，但我的 React 开发者工具只是显示：

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

【问题讨论】：

我相信当开发工具不是第一个被加载的时候会发生这种情况。尝试将 devtools 导入移动到根文件的顶部。
谢谢@pmkro。我尝试将其添加到我的条目文件的顶部，但我看到了相同的行为。
嗯，在我的设置中我没有设置别名。

标签： preact

【解决方案1】：

您的 preact 应用程序或 webpack 配置出现问题。我刚刚解决了一个类似的问题。

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

如果在使用您的代码启动它后，Devtools 可以按预期工作，那么您的构建有问题。在这种情况下，它变成了逐行更新您的（大部分）工作构建以匹配 preact-boilerplate 的游戏。

就我而言，我在 webpack 解析中包含了“src”。这在终端/控制台中没有引发任何错误，并且构建工作正常。一旦我找到它，devtools 就开始工作了。

【讨论】：