使用React NextJS与Rollup构建时遇TS8006错误求助

错误根源 #

你直接导入了react-beautiful-dnd的源码文件（react-beautiful-dnd/src/types），该源码里使用了TypeScript专属的import type语法，但文件后缀是.js，TypeScript编译器会将其识别为普通JS文件，从而触发错误。同时你的Rollup配置未正确排除node_modules目录，导致编译器尝试处理第三方依赖的源码文件。

修复步骤 #

1. 替换源码导入为官方类型导入 #

不要直接导入依赖的源码文件，改用react-beautiful-dnd包内自带的类型定义：

// 替换这行
import { Direction } from "react-beautiful-dnd/src/types";
// 为
import { Direction } from "react-beautiful-dnd";

2. 调整Rollup配置，排除第三方依赖 #

在两个Rollup配置项中添加external字段，同时让TypeScript插件排除node_modules：

const config = [
    {
        input: "index.ts",
        output: [{ file: "build/index.js", sourcemap: true }],
        acornInjectPlugins: [jsx()],
        // 排除所有node_modules依赖
        external: (id) => id.startsWith('node_modules/') || id in require.cache,
        plugins: [
            typescript(
                {
                    sourceMap: tsConfig.compilerOptions.sourceMap,
                    exclude: ["node_modules/**"]
                }
            ),
            json()
        ]
    },
    {
        input: "index.ts",
        output: [{ file: "build/index.d.ts", "format": "es" }],
        acornInjectPlugins: [jsx()],
        external: (id) => id.startsWith('node_modules/') || id in require.cache,
        plugins: [
            ts(
                {
                    compilerOptions: {
                        baseUrl: tsConfig.compilerOptions.baseUrl
                    },
                    exclude: ["node_modules/**"]
                }
            ),
            json()
        ]
    },
]

3. 优化tsconfig.json配置 #

确保你的tsconfig.json包含以下配置：

{
  "compilerOptions": {
    // ...其他已有配置
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "skipLibCheck": true // 可选：跳过第三方库类型检查，加快编译速度
  }
}

4. 统一Rollup的TypeScript插件 #

你同时使用了@rollup/plugin-typescript和rollup-plugin-ts，容易引发冲突。建议只保留一个，比如用rollup-plugin-ts统一处理编译和类型声明生成：

import json from '@rollup/plugin-json';
import ts from "rollup-plugin-ts";
import jsx from 'acorn-jsx';
import tsConfig from './tsconfig.json';

const config = [
    {
        input: "index.ts",
        output: [
            { file: "build/index.js", sourcemap: true, format: "es" },
            { file: "build/index.d.ts", format: "es" }
        ],
        acornInjectPlugins: [jsx()],
        external: (id) => id.startsWith('node_modules/') || id in require.cache,
        plugins: [
            ts({
                compilerOptions: {
                    ...tsConfig.compilerOptions,
                    sourceMap: true,
                    declaration: true,
                    declarationDir: "build"
                },
                exclude: ["node_modules/**"]
            }),
            json()
        ]
    },
]

export default config;

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