我正在使用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;
有人可以帮忙解决这个问题吗?
{
"peerDependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
}
}
然后我们可以验证这个版本在主react-app中是否相同
{
"dependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
}
}
我们可以在两个中重新安装依赖项
npm install
在组件库中,我们可以检查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',
},
},
},
},
});
npm dedupe
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