Rollup Typescript Error: dts is not a function

我试图用Rollup设置一个React组件库，但每次我试图用rollup -c构建应用程序时，都会出现以下错误：

[!] TypeError: dts is not a function
TypeError: dts is not a function
    at Object.<anonymous> (D:\xyz\rollup.config.js:32:15)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Function.Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at importModuleDynamicallyWrapper (node:internal/vm/module:438:15)

这是我的文件：

rollup.config.js

const resolve = require('@rollup/plugin-node-resolve')
const commonjs = require('@rollup/plugin-commonjs')
const typescript = require('@rollup/plugin-typescript')
const dts = require('rollup-plugin-dts')

const packageJson = require('./package.json')

module.exports = [
  {
    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/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    plugins: [dts()],
  },
]

tsconfig.json

{
  "exclude": [
    "dist",
    "node_modules",
    "src/**/*.test.tsx",
    "src/**/*.stories.tsx"
  ],
  "rootDir": "./src",
  "compilerOptions": {
    // Default
    "target": "es5",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,

    // Added
    "jsx": "react",
    "module": "ESNext",
    "declaration": true,
    "declarationDir": "types",
    "sourceMap": true,
    "outDir": "dist",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true
  }
}

package.json

 "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "types": "dist/index.d.ts",
  "devDependencies": {
    "@chakra-ui/react": "^2.3.6",
    "@commitlint/cli": "^17.1.2",
    "@commitlint/config-conventional": "^17.1.0",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@rollup/plugin-commonjs": "^23.0.2",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-typescript": "^9.0.2",
    "@testing-library/react": "^13.4.0",
    "@types/react": "^18.0.21",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "commitizen": "^4.2.5",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "8.2.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-standard-with-typescript": "^23.0.0",
    "eslint-plugin-import": "2.25.3",
    "eslint-plugin-jest": "^27.1.3",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "4.3.0",
    "framer-motion": "^7.6.1",
    "husky": "^8.0.1",
    "jest": "^29.2.2",
    "lint-staged": "^13.0.3",
    "prettier": "^2.7.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-test-renderer": "^18.2.0",
    "rimraf": "^3.0.2",
    "rollup": "^3.2.3",
    "rollup-plugin-dts": "^5.0.0",
    "typescript": "^4.8.4"
  },
  "peerDependencies": {
    "@types/react": "^18.0.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^4.8.4"
  }

知道我可能做错了什么吗？先谢谢了。

最初，我试着用ES6的方式输入所有的导入。import xyz from 'xyz'，但这给我带来了rollup错误。

RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.

我还试着把dts传成plugins: [dts]，而不是plugins: [dts()]。

但在构建应用程序时，这显然已经失败了。

通过使用default......很容易解决。

const dts = require('rollup-plugin-dts')
...
{
    input: './build/index.d.ts',
    output: [{ file: 'dist/types.d.ts', format: 'es' }],
    plugins: [dts.default()],
}

我删除了

const packageJson = require('./package.json')

而只是插入了

{
    file: "dist/cjs/index.js",
    format: "cjs",
    sourcemap: true,
  },
  {
    file: "dist/esm/index.js",
    format: "esm",
    sourcemap: true,
  },

移除package.json中的--bundleConfigAsCjs，使用"rollup -c"我初始安装： npm i -D @types/react typescript @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript rollup-plugin-dts

在围绕着Dementevms的答案玩了几天后，下面的方法对我来说是可行的。

1. 按照Dementevm的步骤进行操作。
2. 通过更改将代码从 ES5 转换为 ES6

const resolve = require('@rollup/plugin-node-resolve')
const commonjs = require('@rollup/plugin-commonjs')
const typescript = require('@rollup/plugin-typescript')
const dts = require('rollup-plugin-dts')

至

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'

和module.exports = []到export default []

3. 将rollup文件的扩展名从rollup.config.js改为rollup.config.mjs。