Bun Monorepo中Webpack无法解析TypeScript包问题求助

我用Bun与Next.js构建了一个monorepo，文件结构如下：

当尝试引入world-types包获取TypeScript类型时，出现如下错误：

Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export enum ClientOPCodes {
|     PlayerSetup = -1,
|     Move = 1,

Import trace for requested module:
../../packages/world-types/websockets/ClientResponse.ts
../../packages/world-types/websockets/index.ts
./logic/game.ts
./app/page.tsx

对应的TypeScript文件内容：

export enum ClientOPCodes {
    PlayerSetup = -1,
    Move = 1,
    Click,
    Action,
}

type OPCodeMapper = {
    [ClientOPCodes.Click]: { a: 30 };
    [ClientOPCodes.Action]: { a: 30 };
    [ClientOPCodes.PlayerSetup]: { name: string };
    [ClientOPCodes.Move]: { a: 20 };
};

export interface ClientResponse<T extends keyof typeof ClientOPCodes> {
    op: (typeof ClientOPCodes)[T];
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    data: OPCodeMapper[(typeof ClientOPCodes)[T]];
}

我推测问题在于Webpack未解析TypeScript，因为它认为该模块已被转译为JavaScript，但Bun原生支持TypeScript无需转译。以下是各项目的package.json配置：

Next.js应用的package.json #

{
  "name": "website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 8000",
    "build": "next build",
    "start": "next start -p 8000",
    "lint": "next lint"
  },
  "devDependencies": {
    "eslint-config-custom": "workspace:*"
  },
  "dependencies": {
    "logger": "workspace:*",
    "world-types": "workspace:*",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^1.2.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@types/node": "20.6.2",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "lucide-react": "^0.279.0",
    "next": "13.4.19",
    "next-themes": "^0.2.1",
    "pixi.js": "latest",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.2.2"
  }
}

根目录的package.json #

{
  "name": "root",
  "version": "0.0.0",
  "workspaces": [
    "packages/*",
    "servers/*"
  ],
  "devDependencies": {
    "bun-types": "latest",
    "eslint": "^8.49.0",
    "pino-pretty": "^10.2.0",
    "prettier": "^3.0.3",
    "prettier-eslint": "^15.0.1",
    "redis-commander": "^0.8.0",
    "turbo": "^1.10.14",
    "typescript": "^5.2.2"
  },
  "type": "module"
}

world-types包的package.json #

{
  "name": "world-types",
  "type": "module",
  "exports": {
    "./websockets": "./websockets/index.ts",
    "./game": "./game/entities/index.ts"
  },
  "devDependencies": {
    "bun-types": "latest"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  }
}

解决建议 #

1. 配置Next.js转译工作区包 #

Next.js默认不会转译node_modules中的TypeScript文件，但monorepo的工作区包是以源码形式被引用的，需要手动指定转译。在Next.js项目的next.config.js中添加transpilePackages配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['world-types'],
}

module.exports = nextConfig

这个配置会让Next.js的Webpack处理world-types包中的TypeScript文件，直接解决解析失败的问题。

2. 为world-types包添加编译步骤 #

如果希望保持包的编译产物与源码分离，可以为world-types添加TypeScript编译脚本：

• 在world-types的package.json中更新配置：

{
  "name": "world-types",
  "type": "module",
  "scripts": {
    "build": "tsc"
  },
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    "./websockets": "./dist/websockets/index.js",
    "./game": "./dist/game/entities/index.js"
  },
  "devDependencies": {
    "bun-types": "latest",
    "typescript": "^5.2.2"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  }
}

• 添加tsconfig.json到world-types包目录：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "moduleResolution": "bundler"
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules", "dist"]
}

• 运行bun run build编译包，或用Turbo在根目录统一执行编译任务。

3. 检查TypeScript配置一致性 #

确保根目录和各个子包的tsconfig.json配置对齐：

• 根目录tsconfig.json的include字段包含packages/**/*
• 所有包的moduleResolution设置为bundler或node16，适配ES模块规范
• 确保strict等类型检查选项符合项目需求

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