错误无法解析入口模块React + Rollup

Question

我需要构建可跨应用程序使用的可共享 React 组件。

为此，我正在关注以下文章

• https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library

我的配置看起来完全一样，除了 npm 软件包版本（甚至尝试使用相同的版本）

文件夹结构如下所示

rollup.config.js

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

const packageJson = require("./package.json");

export default [
{
 input: "src/index.ts",
 output: [
  {
    file: packageJson.main,
    format: "cjs",
    sourcemap: true,
  },
  {
    file: packageJson.module,
    format: "esm",
    sourcemap: true,
  },
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })],
},
{
 input: "dist/esm/types/index.d.ts",
 output: [{ file: "dist/index.d.ts", format: "esm" }],
 plugins: [dts()],
},
];

npm 脚本

"rollup": "rollup -c"

但是当我运行时npm run rollup会抛出以下错误

[!] 错误：无法解析条目模块 (dist/esm/types/index.d.ts)。
错误：无法解析条目模块（dist/esm/types/index.d.ts）

请建议。谢谢！

Answer 1

我也遇到了与您在使用汇总时遇到的相同问题。经过一番寻找解决方案后，我终于解决了这个问题。

我的配置看起来完全一样，除了 npm 软件包版本（甚至尝试使用相同的版本）

你所说的异常实际上是问题所在。问题出在包版本控制上。@rollup/plugin-typescript之后的包版本8.3.3不会生成声明文件，也不会将声明文件存储在types预期位于路径：dist/cjs/和 的文件夹中dist/esm/。

目前的最新版本8.5.0仍然存在问题。希望它在不久的将来得到修复。

修复错误的步骤

• 确保您的tsconfig.json文件必须指示捆绑程序的打字稿插件在运行时"declarationDir": "types"在文件夹中创建和存储声明文件typesnpm run rollup
• @rollup/plugin-typescript通过运行卸载现有的软件包版本npm un @rollup/plugin-typescript --save-dev
• @rollup/plugin-typescript使用命令安装npm i @rollup/plugin-typescript@8.3.3 --save-dev。正如您所看到的，我们正在选择一个特定的版本。

如果您仍然遇到问题：

• 手动更新package.json文件，例如："@rollup/plugin-typescript": "8.3.3". 请注意，我已经删除了插入符( ^)符号以将包与 version 联系起来8.3.3。
• 删除node_modules文件夹。你可以使用命令rm -rf node_modules。
• 删除package-lock.json。
• 运行npm i以再次安装软件包中指定的版本package.json

更新

此问题从 版本 开始已修复10.0.0。一切应该正常工作，而不会卡在旧版本上。

Answer 2

对于 2023 年之后的人们来说，这是一个可行的答案，它不会将您锁定到过时的版本@rollup/plugin-typescript：

前提条件：确保删除您的package-lock.json目录node_modules，以便您可以从头开始并再次安装项目。

1. 跑步npm install tslib --save-dev
2. 添加"type": "module"​package.json
3. 中tsconfig.json，添加"rootDir": "src"
4. 中rollup.config.js，更改plugins: [dts()]为plugins: [dts.default()]
5. 回到 中package.json，将--bundleConfigAsCjs其作为参数添加到rollup命令中scripts

之后，您应该能够继续本教程并能够通过npm run rollup.