切换到 Preact 时，我的 React 库中的 JSX 出错

Posted 2023-02-16

【中文标题】切换到 Preact 时，我的 React 库中的 JSX 出错

【英文标题】：Error with JSX in my React Library when Switching to Preact

【发布时间】：2019-07-01 23:26:11

【问题描述】：

我有一个非常简单的 React 库，可用于我自己的状态管理。它只是一个高阶组件：

import React from 'react';
/**
 * 
 * @param Object state - Reference to SubState instance 
 * @param Object chunk  - object of props you want maps to from state to props
 */
const connect = (state, chunk)=> Comp => props =>
    const newProps = ;
    for (let key in chunk)
        newProps[key] = state.getProp(chunk[key]);
    
    return (<Comp ...newProps ...props />)
;

export 
    connect

我可以通过这种方式发布库，但我会收到一个语法错误，提示无法在 JSX 中解析 <。

所以我通过 babel 运行代码

//.babelrc


    "presets": ["@babel/preset-env","@babel/preset-react"]

使用这个 webpack 配置

const path = require('path');
module.exports = 
    entry: './src/index.js',
    output: 
        path: path.resolve(__dirname),
        filename: 'index.js',     
        library: 'substateConnect',
        libraryTarget: 'umd'
    ,
    module: 
        rules: [
          
            test: /\.js$/,
            exclude: /node_modules/,
            use: ["babel-loader"]
          
        ]
      ,

这是我的package.json的依赖和发布部分

 "devDependencies": 
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "react": "^16.5.0",
    "react-dom": "^16.5.0"
  ,
  "files": [
    "index.js",
    "index.map",
    "src/index.js"  
  ],
  "dependencies": 
    "@babel/preset-react": "^7.0.0",
    "substate": "^4.0.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0"
  

我在每个网站上使用preact-compat，但仍然得到<undefined></undefined> https://github.com/developit/preact-compat#usage-with-webpack

目前，通过 babel 输出在库和我的库中做出反应，Preact 将使用该库的任何 HOC 标记为 <undefined></undefined>

如果我发布了 un-babel'd 代码，并且它只是顶部用新 ECMAScript 编写的源代码，我会在 JSX 中的 < 上收到 unable to parse 错误。

但是，如果我不是通过 node_modules 而是在开发人员制作的文件中引用库，例如​​ myLibrary.js 并使用 un-babel'd 代码，它就可以工作。

如何正确管理我的依赖项？ React 应该是 peerDependecy 吗？ 此外，如何让这个库在 node_modules 目录中为 React 和 Preact 工作？

【问题讨论】：

如果你想在 Preact 中使用 React 组件，你可能需要使用 preact-compat

我正在使用它。我会更新帖子。

您的文件是 .js 对吗（不是 .jsx）？此外，您正在使用大量已弃用的库，我建议您摆脱 babel-core 和 babel-preset-* 并替换为 @babel/。你有 babel-core 和 babel-preset-* 的副本

@Dominic 真棒。我会试一试

@Tamb 当你摆脱它们时最好删除 package-lock 和 node_modules 并重新安装。可能没什么区别，但最好勾选一件事，如果你使用 .jsx，你需要编辑 webpack 配置

【参考方案1】：

感谢 @Dominic 帮助我清理依赖项。

所以基本上新的依赖是这样的：

  "devDependencies": 
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0"
  ,
  "dependencies": 
    "substate": "^4.0.0",
  

需要注意的重要一点：我不需要 React 作为依赖项。对 webpack 和 babel 的任何使用都严格用于开发目的和测试。

实际的最终产品从编译后的 index.js 文件转换为简单的这个：

import React from 'react';
/**
 * 
 * @param Object state - Reference to SubState instance 
 * @param Object chunk  - object of props you want maps to from state to props
 */
const connect = (state, chunk)=> Comp => props =>
    const newProps = ;
    for (let key in chunk)
        newProps[key] = state.getProp(chunk[key]);
    
    return (<Comp ...newProps ...props />)
;

export 
    connect

假设（我认为一个安全且公平的假设）是任何使用它的人都将根据需要进行编译，alias 预编译到他们现有的 react 项目中。

这个假设允许我从实际库中删除任何缩小、webpack 或任何真正的编译。本质上，只需将此文件用作普通的高阶组件，React 将使用捆绑器完成其余的工作，根据文档将 React 替换为 Preact 将根据需要进行。

谢谢大家。

【参考方案2】：

我认为您的webpack 文件中没有resolve。

您能否尝试使用resolve 配置。

    // ...
    resolve: 
        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'
        
    
    // ...

【讨论】：

问题是通过编译器运行库。该库应该被编写为一个高阶组件并按此发布。但是，您对底部两个 preact-compat 文件的注释非常准确且非常重要。我必须使用 React Slick 或其他一些极其密集的 React 库来测试它。感谢您的回复。

我很高兴，它帮助了你。