类型错误：hostOrText.readFile 不是函数

Question

我正在尝试使用 npm rollup 将我的存储库变成 npm 模块，但我不断遇到此错误：

[!] (plugin commonjs--resolver) TypeError: hostOrText.readFile is not a function
    at readJsonOrUndefined (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:19519:74)
    at Object.readJson (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:19528:16)
    at getPackageJsonInfo (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:44772:41)
    at loadModuleFromSpecificNodeModulesDirectory (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:45350:27)
    at loadModuleFromImmediateNodeModulesDirectory (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:45301:58)
    at /Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:45291:39
    at Object.forEachAncestorDirectory (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:8224:26)
    at loadModuleFromNearestNodeModulesDirectoryWorker (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:45285:19)
    at loadModuleFromNearestNodeModulesDirectory (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:45277:16)
    at tryResolve (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:44363:34)

这是我的

rollup.config.js

：

import nodeResolvePlugin from "@rollup/plugin-node-resolve";
import { defineConfig } from "rollup";
import PeerDepsExternalPlugin from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript";
import sassPlugin from "rollup-plugin-sass";
import commonjsPlugin from "@rollup/plugin-commonjs";

const config = defineConfig({
  input: "./src/index.ts",
  output: [
    {
      file: "bundle.js",
      format: "es",
      sourcemap: true,
    },
  ],

  plugins: [
    PeerDepsExternalPlugin(),
    nodeResolvePlugin(),
    commonjsPlugin(),
    sassPlugin({
      insert: true,
    }),
    typescript(),
  ],
});

export default config;

Package.json 依赖项：

"dependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.23.3",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.17",
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "babel-loader": "^9.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "rollup": "^2.79.1",
    "rollup-plugin-sass": "^1.12.21",
    "sass": "^1.69.5",
    "web-vitals": "^2.1.0"
  }

"devDependencies": {
    "@storybook/addon-essentials": "^7.5.3",
    "@storybook/addon-interactions": "^7.5.3",
    "@storybook/addon-links": "^7.5.3",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/blocks": "^7.5.3",
    "@storybook/preset-create-react-app": "^7.5.3",
    "@storybook/react": "^7.5.3",
    "@storybook/react-webpack5": "^7.5.3",
    "@storybook/testing-library": "^0.2.2",
    "babel-plugin-named-exports-order": "^0.0.2",
    "eslint-plugin-storybook": "^0.6.15",
    "prettier": "3.1.0",
    "prop-types": "^15.8.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-typescript": "^1.0.1",
    "rollup-plugin-typescript2": "^0.36.0",
    "storybook": "^7.5.3",
    "tslib": "^2.6.2",
    "typescript": "^4.9.5",
    "webpack": "^5.89.0"
  }

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noUnusedLocals": false,
    "rootDir": "src"
  },
  "include": [ "**/*.ts" ],
}

tsconfig.rollup.json

{
    "compilerOptions": {
      "composite": false,
      "declaration": false
    },
    "files": ["./rollup.config.ts"]
  }

这些是我认为相关的所有文件。如果还有其他相关文件需要分享，请告诉我。

感谢您的宝贵时间，

-马特

Answer 1

要修复您在使用 npm rollup 和 TypeScript 时遇到的错误，首先，将 TypeScript 和所有 Rollup 插件更新到最新版本。兼容性问题通常会导致此类错误。将 rollup.config.js 中的 rollup-plugin-typescript 替换为 rollup-plugin-typescript2，这样更稳定并且可以更好地处理错误。

确保您的 tsconfig.json 和 tsconfig.rollup.json 已正确配置。注意路径和选项。在 rollup.config.js 中，验证是否正确设置了 nodeResolvePlugin 以处理节点模块和 TypeScript 文件。

检查 Rollup 设置中 CommonJS 插件的配置，因为错误可能与其相关。检查您的 package.json 以确保所有依赖项和对等依赖项均正确列出且兼容。

最后，尝试使用

npm cache clean --force

清除 npm 缓存，因为这有时可以解决意外问题。 🛠️💻