PreactX 中的 Preact/Compat - ReferenceError: h 未定义

Question

我有一个非常简单的 React 应用程序（实际上还没有做任何事情）。

我已经安装了最新的 preactX （当前为 10.4.1），根据文档，它现在随 preact/compat 一起提供，这是我需要能够使用我所有的反应优点的库。

我当前的设置：

包.json

"scripts": {
    "prod": "webpack --mode=production",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/plugin-transform-react-jsx": "^7.9.4",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "compression-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^4.3.0",
    "path": "^0.12.7",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "preact": "^10.4.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }

babel.config.js

module.exports = {
    presets:[
        "@babel/preset-env", //this was here before preact
        "@babel/preset-react" //this was here before preact
    ],
    plugins: [
        ["@babel/plugin-transform-react-jsx", {pragma: "h", pragmaFrag: "Fragment"}] //this is the new preact bit
      ]
}

webpack.config.js

module.exports = {
    entry: path.resolve(__dirname, "./src/app.js"),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: "babel-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: path.resolve(__dirname, 'public/index.html' ),
            filename: 'index.html'
        }),
    ],
    resolve: { // added this resolve section for the preact/compat alias
        alias : {
            "react": "preact/compat",
            "react-dom/test-utils": "preact/test-utils",
            "react-dom": "preact/compat",
        }
    }
};

app.js（包含反应位）

import React from "react";
import ReactDOM from 'react-dom';

class App extends React.Component{
    render(){
        return (
            <button>This is the start of my react app</button>
        );
    }
}

ReactDOM.render(<App/>, document.getElementById('root'));

问题

现在，我假设 preact/compat 所做的是允许我继续编码，就像我正在使用 preact 一样。这可能是一个完全错误的假设，但我仍然需要知道哪里出了问题，因为当我运行 prod webpack 并导入我的 bundle.js 时，我得到以下信息：

Uncaught ReferenceError: h is not defined
    at Module.<anonymous> (bundle.js:1)
    at n (bundle.js:1)
    at bundle.js:1
    at bundle.js:1

为了让它工作，我可以更改 app.js 中的 ReactDOM.render... 行以使用 preact 渲染函数，然后只需导入 preact 即可。然而我认为 preact/compat 的全部意义在于我不必这样做？

Answer 1

使用babel 中的React 自动运行时功能应该可以解决 preact 的问题。

将这些 babel 配置添加到项目中。

// babel config
["@babel/plugin-transform-react-jsx"], {
  "runtime": "automatic",
  "importSource": "preact"
}]

注意：此支持是在 babel v7.9.0 中添加的

来源： preact-compat Github问题