Turborepo中Next.js引入共享校验包时模块解析失败求助

项目结构 #

apps
|__ api
|__ cms
packages
|__ validation-schemas

validation-schemas包代码 #

admin.ts #

import { z } from 'zod';

const schema = z.object({
    name: z.string(),
});

type SchemaType = z.infer<typeof schema>;

export {
    schema,
};
export type {
    SchemaType,
};

index.ts #

// index.ts
import {
    SchemaType,
    schema,
} from './admin';

export {
    schema,
};
export type {
    SchemaType
};

包的package.json配置 #

{
    "name": "validation-schemas",
    "version": "0.0.1",
    "description": "",
    "main": "src/index.ts",
    "types": "src/index.ts",
    "license": "MIT",
    "devDependencies": {
        "typescript": "^4.5.2"
    },
    "dependencies": {
        "zod": "^3.21.4"
    }
}

错误信息 #

error - ../../packages/validation-schemas/src/index.ts
Module parse failed: Unexpected token (54:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
| schema,
| };

export type {
SchemaType,

Import trace for requested module:
../../packages/validation-schemas/src/index.ts

CMS应用导入代码 #

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import {
    SchemaType,
    schema,
} from 'validation-schemas';

function Component(): JSX.Element {
    const {
        handleSubmit,
        register,
    } = useForm<SchemaType>({
        resolver: zodResolver(schema),
    });

    ...
}

export default Component;

解决方案 #

方案1：配置Next.js的transpilePackages #

Next.js默认不会编译node_modules目录外的本地TypeScript包，直接在CMS应用的next.config.js中添加transpilePackages选项，指定需要编译的本地包：

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

module.exports = nextConfig;

配置后Next.js会自动处理该包的TypeScript语法，包括类型导出语句。

方案2：预编译validation-schemas包 #

让本地包先编译为JavaScript，避免Next.js直接处理TypeScript源码：

1. 在validation-schemas根目录创建tsconfig.json：

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

2. 修改validation-schemas的package.json，更新入口字段并添加编译脚本：

{
    "name": "validation-schemas",
    "version": "0.0.1",
    "description": "",
    "main": "dist/index.js",
    "types": "dist/index.d.ts",
    "license": "MIT",
    "scripts": {
        "build": "tsc"
    },
    "devDependencies": {
        "typescript": "^4.5.2"
    },
    "dependencies": {
        "zod": "^3.21.4"
    }
}

3. 运行npm run build编译该包，再在Turborepo根目录执行turbo build同步所有项目的编译结果。

方案3：Turborepo全局配置（辅助） #

如果有多个本地包需要管理，可以在根目录的turbo.json中定义编译任务依赖，确保validation-schemas在CMS应用之前完成编译，但核心仍需结合上述两种方案之一。

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