React 库中出现“TypeError: Cannot read property 'useState' of null”问题 - 创建 NPM 包

Question

我想创建一个本地 npm 包，其中包含一些名为

myscript-package

的 React 组件。

./package.json
{
  "name": "pack-script",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-unicode-property-regex": "^7.18.6",
    "@fortawesome/free-solid-svg-icons": "^6.5.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "react-scripts": "5.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "build": "microbundle-crl --no-compress --format modern --css-modules false",
    "start": "microbundle-crl watch --no-compress --format es --css-modules false",
    "start:webpack": "npx webpack --config webpack.config.js",
    "start:tailwind": "npx tailwindcss -i ./src/tailwind.css -o ./output.css --watch",
    "build:react": "GENERATE_SOURCEMAP=false react-scripts build"
  },
  "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": {
    "autoprefixer": "^9.8.8",
    "microbundle-crl": "^0.13.11",
    "microbundle-crl-with-assets": "^0.13.12",
    "postcss": "8.4.31",
    "postcss-loader": "^8.1.1",
    "prettier": "3.2.5",
    "tailwindcss": "^3.3.4",
    "webpack-cli": "^5.1.4"
  },
  "peerDependencies": {
    "react": "^16 || ^17 || ^18",
    "react-dom": "^16 || ^17 || ^18"
  }
}

./index.js
import './output.css';
export * from './dist/myscript-package.esm';

./src/index.js
export { WidgetMini } from './WidgetMini';
export { Widgets } from './Widgets';

当我使用 npm i 项目目录/myscript-package 安装它并将其导入到新项目中时，如下所示：

import {WidgetMini} from "pack-script";

//...
return (
  <WidgetMini offer={offer} />
);
//...

我遇到这个错误：

未捕获的类型错误：无法读取 null 的属性（读取“useState”） 在 useState (react.development.js:1622:1) 在 WidgetMini (WidgetMini.jsx:15:43) 在 renderWithHooks (react-dom.development.js:15486:1) 在 mountInminatedComponent (react-dom.development.js:20103:1) 在开始工作（react-dom.development.js：21626：1） 在 beginWork$1 (react-dom.development.js:27465:1) 在 PerformUnitOfWork (react-dom.development.js:26596:1) 在工作LoopSync (react-dom.development.js:26505:1) 在 renderRootSync (react-dom.development.js:26473:1) 在recoverFromConcurrentError（react-dom.development.js：25889：1）

附加信息：

• 项目中使用/webpack.common.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
// const CopyPlugin = require("copy-webpack-plugin");
const path = require("path");

module.exports = {
    mode: "development",
    devtool: "cheap-module-source-map",
    entry: {
        index: "./src/index.js",
    },
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: "file-loader",
                    },
                ],
            },
            {
                test: /\.?(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
            {
                test: /\.css$/i,
                // include: path.resolve(__dirname, 'src'),
                use: ['style-loader', 'css-loader', 'postcss-loader'],
            },
        ],
    },
    resolve: {
        extensions: [".js", ".jsx", ".json"],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
        }),
    ],
};

我创建了一个没有 useState 或 useEffect 的组件，并且它运行正常。这些组件在Vite（React模板）中工作，但在

npx-create-react

中不起作用。

Answer 1

看来您已经在 UI 库中实现了逻辑。它会产生处理主状态管理器的冲突。要解决此问题，您应该将视图和功能相互分离。 因此，从您的库中删除 useState 并将 props 传递给其组件。