Error Could not resolve entry module 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

我也遇到了你在使用 rollup 时遇到的同样问题。花了一些时间寻找解决方案后，我终于解决了这个问题。

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

你说的异常其实就是问题所在。问题在于包版本控制。包

@rollup/plugin-typescript

版本晚于

8.3.3

不会生成声明文件，也不会将声明文件存储在预计位于以下路径的

types

文件夹中：

dist/cjs/

和

dist/esm/

.

此时的最新版本是

8.5.0

仍然有问题。希望它在不久的将来得到修复。

纠正错误的步骤

• 确保您的

  tsconfig.json

  文件具有

  "declarationDir": "types"

  以指示捆绑程序的打字稿插件在您运行

  types

   时创建声明文件并将其存储在 

  npm run rollup
文件夹中
• 通过运行

  @rollup/plugin-typescript

  卸载现有的

  npm un @rollup/plugin-typescript --save-dev
包版本
• 使用命令

  @rollup/plugin-typescript

  安装

  npm i @rollup/[email protected] --save-dev

  。 如您所见，我们正在挑选特定版本.

如果还是遇到问题：

• 手动更新

  package.json

  文件，如：

  "@rollup/plugin-typescript": "8.3.3"

  。 请注意我已经删除了插入符（

  ^

  ）符号以将包绑定到版本

  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

.

创建新版本

Answer 3

我修复了'Could not resolve entry module (dist/esm/index.d.ts)'的错误。

我尝试删除类型，降级 React 以匹配教程中的版本，但都没有用。

我在教程中发现这条评论很有帮助：https://dev.to/nasheomirro/comment/239nj

• 我去掉了在 rollup config 和 package json 中设置的 main 和 common js。
• 我将 packagejson 变量更改为

  import packageJson from "./package.json" assert { type: "json" };

• 将类型添加回汇总配置中的输入
• 如上所述将“@rollup/plugin-typescript”设置为版本“8.3.3”。

我现在有一个带有 ESM 文件夹的 Dist 文件夹，并且没有出现任何错误。