javascript - 无法使用 microbundle 和 React 渲染自定义组件包中的 useState、useEffect Hook

Question

您好我正在尝试使用 React 18.2.0 和 Microbundle 创建一个示例库，虽然库构建成功，但是当它在客户端应用程序中使用时，我在控制台日志中收到以下错误:

库源代码
下面是我的图书馆代码。App.js

import './App.css';
import Dropdown from "./components/Dropdown";

function App() {
   
  let dropdown_data = ['Item 1', 'Item 2', 'Item 3'];

    return (
      <div className="dropdown">
         <Dropdown jsonData={dropdown_data} />
      </div>
  )
}

export default App;

src/components/Dropdown.js

import React from "react";
import {useEffect, useState} from 'react';

export const Dropdown = (props) => {
    const [dropdown, setDropdown] = useState([]);
    useEffect(() => {
        loadData();
    }, []);
    const loadData = () => {
        setDropdown(props.jsonData);
    }
    return (
        <div className="dropdown">
            <select> {
                dropdown.map((item, index) => (
                    <option key={index}>
                        {item}</option>
                ))
            } </select>
        </div>
    )

}

src/lib.package.js

export { Dropdown } from "./components/Dropdown.js";

package.json

{
  "name": "libtestone",
  "version": "0.1.0",
  "private": true,
  "main": "./dist/lib.umd.js",
    "module": "./dist/lib.module.js",
    "source": "src/lib.package.js",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:lib": "microbundle --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "microbundle": "^0.15.0"
  }
}

客户端应用程序源代码
这是我正在消费包裹的地方。 App.js

import './App.css';
import {Dropdown} from "libtestone";

function App() {
  return (
    <div>
      <Dropdown />
    </div>
  );
}

export default App;

Answer 1

你应该把 react , react-dom和 react-scripts在 peerDependencies以免它们与您的库捆绑在一起。这可能是您遇到此问题的原因，因为将 react在 dependencies可能会创建两个 React 实例。
编辑:真正的罪魁祸首是 npm i file:../libone 的使用。 .
显然，如果你发布你的库，这是一个不会发生的问题，因为如果 react和 react-dom在 peerDependencies ，它将使用 React 的本地实例。
但是，在您的情况下，您有一个与客户端应用程序文件夹相邻的库文件夹，并且每当您从库中导入组件时，它都会使用其 node_modules 中自己的 React 实例。 ，这是导致错误的原因。
为了解决这个问题，请确保具备以下条件:

在 libone:package.json :

"devDependencies": {
  "microbundle": "^0.15.0"
},
"peerDependencies": {
  "@testing-library/jest-dom": "^5.16.4",
  "@testing-library/react": "^13.3.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "file:../userone/node_modules/react",
  "react-dom": "file:../userone/node_modules/react-dom",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
 }

还要更改 build:lib对此(不确定它是否有很大的影响，但这是我的设置):

  "build:lib": "microbundle build --globals react=React,react-dom=ReactDOM --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react"

在用户一个:package.json :

"dependencies": {
"libone": "file:../libone",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

确保同时删除 node_modules , 运行 npm install在 userone 中，然后是 npm install在 libone 中，然后删除 dist来自 libone 的文件夹并运行 npm run build:lib .
请注意，在 libone package.json我们引用 react和 react-dom安装在你的 userone 文件夹中，解决了使用 npm i file:../libone 时两个 React 实例的问题.