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

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

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

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

正在等待加载根目录... 重新加载检查器[单击此处]

Answer 1

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

第一步，检查它是否为您自己的行为。如果没有控制台错误，请将您的命令放到该工作样板中（您必须做一些重新布线才能使其工作）material design icons

如果在您的代码启动后，Devtools能够按预期工作，则说明您的构建有问题。在这种情况下，它变成了逐行更新（主要）工作版本以匹配preact-boilerplate的游戏。

就我而言，我在Webpack解决方案中包含了“ src”。这不会在终端/控制台中引发任何错误，否则该构建将完美地工作。一旦找到它，devtools就开始工作。

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

1 个答案: