Проблема с «TypeError: невозможно прочитать свойство useState со значением null» в библиотеке React — создание пакета NPM

Я хочу создать локальный пакет npm, содержащий некоторые компоненты React под названием myscript-package.

./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 project-directory/myscript-package и импортирую его в новый проект следующим образом:

import {WidgetMini} from "pack-script";

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

Я сталкиваюсь с этой ошибкой:

Uncaught TypeError: невозможно прочитать свойства null (чтение «useState») в useState (react.development.js:1622:1) в WidgetMini (WidgetMini.jsx:15:43) в renderWithHooks (реагировать-dom.development.js:15486:1) в mountIndeterminateComponent (реагировать-dom.development.js:20103:1) в начале работы (реагировать-dom.development.js:21626:1) в BeginWork$1 (реагировать-dom.development.js:27465:1) в PerformUnitOfWork (реагировать-dom.development.js:26596:1) на работеLoopSync (реагировать-dom.development.js:26505:1) в renderRootSync (реагировать-dom.development.js:26473:1) при восстановленииFromConcurrentError (реагировать-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.

🤔 А знаете ли вы, что...
React поддерживает однонаправленный поток данных (unidirectional data flow) для предсказуемого управления состоянием.