使用preact-compt preact (in promise) ReferenceError时出错:未定义H

Question

我想在我的preact应用中使用一些React兼容的包。我已经按照说明安装了preact-compat。现在，当我将React组件添加到应用程序中时，我仍然需要从preact导入'h‘，否则我会收到错误: Uncaught (in promise) ReferenceError: h is not defined。例如：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { h } from 'preact';

export default class TestForm extends Component {

  constructor(props) {
    super(props);
  }

  render(props, state) { console.log('TestForm::render');
    return (
      <div>Hello</div>
    );
  }

}

如果我没有从react导入'h‘，就会出现错误。我该如何解决这个问题呢？

我正在使用Browserify和Babel，并做了以下更改:在package.json中：

"aliasify": {
    "aliases": {
        "react": "preact-compat",
        "react-dom": "preact-compat",
        // Not necessary unless you consume a module using `createClass`
        "create-react-class": "preact-compat/lib/create-react-class",
        // Not necessary unless you consume a module requiring `react-dom-factories`
        "react-dom-factories": "preact-compat/lib/react-dom-factories"
    }
}

在.babelrc中：

"plugins": [
    ["module-resolver", {
    "root": ["."],
    "alias": {
        "react": "preact-compat",
        "react-dom": "preact-compat",
        // Not necessary unless you consume a module using `createClass`
        "create-react-class": "preact-compat/lib/create-react-class",
        // Not necessary unless you consume a module requiring `react-dom-factories`
        "react-dom-factories" "preact-compat/lib/react-dom-factories"
    }
    }]
],
"presets": [
    "react"
]

Answer 1

将此添加到您的babel配置中

plugins: [
     ["@babel/transform-react-jsx", { pragma: "h" }]
 ],