通过绝对路径安装 React UI 包时，为什么会收到“TypeError：无法读取 null 的属性（读取“useState”）”错误？

Question

我已经为 React 编写了一个 ui 包，并通过汇总包管理器来编译它们。当我发布到我的个人 bitbucket 存储库并从云安装它们时，例如：npm i https:lik-to-the-repo该包工作正常，但是当我通过绝对路径安装它时，例如；`npm i / Users / myname / Projects / Work / 项目名称”。

我用来external: [/node_modules/]让 rollup 知道我的所有包都是外部的，应该在运行时导入。

但当我使用打包包npm pack并将打包文件链接到我的存储库中时，它工作正常。'文件：../pack-dir/pack-name.tgz'

我面临这个错误

TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (http://localhost:5173/node_modules/.vite/deps/chunk-ONATIWGS.js?v=e6bdb091:1066:29)

我为 npm 安装指定的项目目录是我的 package.json 文件所在的位置。在 /Work/project-name/package.json 内部，它成功地将我的包安装在 node_modules 中，其名称在我的 package.json 中指定

在package.json中添加入口路径

    "main": "dist/index.cjs",
    "module": "dist/index.js",
    "files": [
        "dist"
    ],
    "types": "dist/index.d.ts",
    "peerDependencies": {
        "react": "^18.0.0",
        "react-dom": ">=16.6.0"
    },

我的汇总配置

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        dir: 'dist',
        format: 'cjs',
        entryFileNames: '[name].cjs',
        exports: 'auto',
        ...outputOptions,
      },
      {
        dir: 'dist',
        format: 'esm',
        ...outputOptions,
      },
    ],
    external: [/node_modules/],
    plugins: [
      peerDepsExternal({ includeDependencies: true }),
      resolve(),
      commonjs(),
      preserveDirectives(),
      terser(),
      typescript({
        tsconfig: './tsconfig.json',
        exclude: [
          'node_modules',
          'src/icons',
          '**/icons/**',
          '**/examples/**',
          '**/stories/**',
          '**/*/stories/**',
          '**/tests/**',
          './styles.css',
          '**/*.stories.ts',
          '**/*.stories.tsx',
        ],
      }),
      typescriptPaths(),
    ],
  },
  //   Icons
  {
    input: 'src/icons/index.ts',
    output: [
      {
        dir: 'dist/icons',
        format: 'cjs',
        entryFileNames: '[name].cjs',
        exports: 'auto',
        preserveModules: true,
      },
      {
        dir: 'dist/icons',
        format: 'esm',
        preserveModules: true,
      },
    ],
    external: [/node_modules/],
    plugins: [
      resolve(),
      peerDepsExternal({ includeDependencies: true }),
      commonjs(),
      preserveDirectives(),
      terser(),
      typescript({
        tsconfig: './tsconfig.json',
        declarationDir: 'dist/icons',
        rootDir: 'src/icons',
        exclude: [
          '**/examples/**',
          '**/stories/**',
          '**/*/stories/**',
          '**/tests/**',
          './styles.css',
          '**/*.stories.ts',
          '**/*.stories.tsx',
        ],
      }),
      //   typescriptPaths(),
    ],
  },
  {
    input: 'src/assets/scss/imports.scss',
    output: [
      {
        file: 'dist/lib-ui.css',
      },
    ],
    plugins: [
      postcss({
        plugins: [postcssImport()],
        extract: path.resolve('dist/lib-ui.css'),
        minimize: true,
        modules: false,
      }),
    ],
  },
  {
    input: 'dist/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    plugins: [dts()],
    external: [/\.css$/, /\.scss$/],
  },
];

我也尝试使用npm link，但我也遇到了同样的问题。我正在将 React 与 vite 和 SWC 模块一起使用。

Answer 1

从错误中我可以看到react/JSX语法有问题

这让我产生了一些疑问：

• 每个反应依赖项都正确安装在您的项目“项目名称”中吗？

• 你不是也必须使用react()插件吗？

   import react from '@rollup/plugin-react'
  
   plugins:[
     react(),
   ],