React 组件库 - 在 React 应用程序中运行时调度程序为 null useState

Question

我正在使用vite、TS创建一个react组件库。

我的组件库中的 main.tsx 包含以下测试组件，

import React, { useState } from "react";

export const TestComponent = () => {
  console.log("CONTENT-TEST");
  const [yamlTemplate, setYamlTemplate] = useState<string>("test component");
  console.log("CONTENT", yamlTemplate);
  console.log("CONTENT-setTemplate", setYamlTemplate);

  return <div>Test Component</div>;
};

库构建是使用

tsc && vite build

创建的，并使用

npm install --save ../component-library

安装到实际的 React 项目中。运行项目后出现以下错误，

dispatcher is null
useState@http://localhost:3000/static/js/bundle.js:2823:7
Qr@http://localhost:3000/static/js/bundle.js:46064:67
renderWithHooks@http://localhost:3000/static/js/bundle.js:22917:31

它在

useState

上抱怨。不过我可以在日志中看到日志

CONTENT-TEST

。这是反应应用程序项目的代码，

import "./App.css";
import { TestComponent } from "component-library";

function App() {
  return (
    <div className="App">
      <TestComponent />
    </div>
  );
}

export default App;

有人可以帮忙解决这个问题吗？

Answer 1

1. 我们可以在组件库和主反应应用程序中检查相同的反应版本 检查组件库package.json中是否有peerDependency

{
  "peerDependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  }
}

然后我们可以验证这个版本在主react-app中是否相同

{
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  }
}

2. 我们可以在两个中重新安装依赖项

   npm install

3. 在组件库中，我们可以检查React是否在组件库中被标记为外部依赖，以避免多次捆绑它 我们可以在组件库的 vite.config.ts 中这样做

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [react(), dts()],
  build: {
    lib: {
      entry: 'src/main.tsx',
      name: 'ComponentLibrary',
      fileName: (format) => `component-library.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

4. 我们可以通过以下两种方式之一检查重复项 -
   我。奔跑

   npm dedupe

   
   二.在 Webpack 中使用别名

resolve: {
  alias: {
    react: path.resolve('./node_modules/react'),
  },
}

进行这些更改后，我们可以重建组件库并将其重新安装在主应用程序中。

额外检查参考：https://github.com/facebook/react/issues/30520

https://www.dhiwise.com/post/how-to-resolve-the-error-react-dispatcher-is-null