使用Rollup构建React组件库时遇TypeError: dts is not a function错误

执行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"
  }

额外尝试记录：

• 最初使用ES6import语法导入模块时，触发错误：

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.

• 尝试将plugins: [dts()]改为plugins: [dts]，构建失败。

解决方案 #

1. 修复rollup-plugin-dts的导入方式 #

你安装的rollup-plugin-dts@5.0.0采用ES模块导出，而你的配置文件是CommonJS格式（使用require），直接require得到的是包含默认导出的对象，不是可调用的函数。

修改rollup.config.js中的dts导入：

// 原代码
const dts = require('rollup-plugin-dts')
// 修改为
const dts = require('rollup-plugin-dts').default

保持plugins: [dts()]不变，即可正确调用插件函数。

2. 调整tsconfig.json的声明输出配置 #

你的tsconfig中设置了emitDeclarationOnly: true，这会导致@rollup/plugin-typescript只生成类型声明文件，不生成JS代码，与第一个构建任务（生成cjs和esm格式的JS文件）冲突。

修改tsconfig.json的compilerOptions：

// 移除或注释该行
// "emitDeclarationOnly": true,

同时，当前declarationDir: "types"的设置与第二个dts任务的输入路径dist/esm/index.d.ts不匹配，可调整为：

// 移除declarationDir，或改为与输出目录一致
"declarationDir": "./dist"

3. 可选：改用ES模块语法编写配置文件 #

若想使用ES6import语法，可选择以下任一方式：

• 将rollup.config.js重命名为rollup.config.mjs
• 在package.json中添加"type": "module"

同时需将所有导入改为ES模块语法，示例：

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';
import packageJson from './package.json' assert { type: 'json' };

内容的提问来源于stack exchange，提问作者Chinmay