英文:
Module parse failed using Next.js in a turborepo setup
问题
我正在使用一个使用Turborepo
的单体库:
apps
|__ api
|__ cms
packages
|__ validation-schemas
validation-schemas
包是我用来在api
和cms
应用程序中使用zod验证模式的地方。
import { z } from 'zod';
const schema = z.object({
name: z.string(),
});
type SchemaType = z.infer<typeof schema>;
export {
schema,
};
export type {
SchemaType,
};
// index.ts
import {
SchemaType,
schema,
} from './admin';
export {
schema,
};
export type {
SchemaType
};
{
"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"
}
}
在api
项目中导入模式时,我没有任何问题。然而,在cms
Next.js 应用中导入模式会导致以下错误:
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. See https://webpack.js.org/concepts#loaders
| schema,
| };
> export type {
| SchemaType,
Import trace for requested module:
../../packages/validation-schemas/src/index.ts
以下是在Next.js
应用中使用的代码:
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;
如何使其工作?
英文:
I am using a monorepo using Turborepo
:
apps
|__ api
|__ cms
packages
|__ validation-schemas
The validation-schemas packages is where I am implement all the zod validation schemas to be used in the api
and cms
apps.
import { z } from 'zod';
const schema = z.object({
name: z.string(),
});
type SchemaType = z.infer<typeof schema>;
export {
schema,
};
export type {
SchemaType,
};
// index.ts
import {
SchemaType,
schema,
} from './admin';
export {
schema,
};
export type {
SchemaType
};
{
"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"
}
}
When importing the schema in the api
project, I am having no problem. However, importing the schema in the cms
Next.js app result in the following error:
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. See https://webpack.js.org/concepts#loaders
| schema,
| };
> export type {
| SchemaType,
Import trace for requested module:
../../packages/validation-schemas/src/index.ts
Here is the code used in the Next.js
app:
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;
How to make this work?
答案1
得分: 0
问题是Next.js没有转译共享的validation-schemas
包。为了解决这个问题,我需要明确告诉Next.js要转译这个包。
我通过在我的next.config.js
文件中添加transpilePackages
选项来实现这一点,如下所示:
/** @type {import('next').NextConfig} */
const nextConfig = {
...
transpilePackages: ['validation-schemas'], // 这是关键的添加部分
};
module.exports = nextConfig;
在将validation-schemas包添加到transpilePackages列表并重新启动Next.js服务器后,错误已解决!
希望这能帮助其他人解决同样的问题。
英文:
The issue was that Next.js wasn't transpiling the shared validation-schemas
package. To fix this, I needed to tell Next.js explicitly to transpile that package.
I did this by adding the transpilePackages
option to my next.config.js
file, like so:
/** @type {import('next').NextConfig} */
const nextConfig = {
...
transpilePackages: ['validation-schemas'], // Here's the crucial addition
};
module.exports = nextConfig;
After adding the validation-schemas package to the transpilePackages list and restarting the Next.js server, the error was resolved!
Hope this helps someone else facing the same issue.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论