Module parse failed using Next.js in a turborepo setup

huangapple
go评论125阅读模式
英文:

Module parse failed using Next.js in a turborepo setup

问题

我正在使用一个使用Turborepo的单体库：

  1. apps
  2. |__ api
  3. |__ cms
  4. packages
  5. |__ validation-schemas

validation-schemas包是我用来在api和cms应用程序中使用zod验证模式的地方。

  1. import { z } from 'zod';
  3. const schema = z.object({
  4.     name: z.string(),
  5. });
  7. type SchemaType = z.infer<typeof schema>;
  9. export {
  10.     schema,
  11. };
  12. export type {
  13.     SchemaType,
  14. };
  1. // index.ts
  2. import {
  3.     SchemaType,
  4.     schema,
  5. } from './admin';
  7. export {
  8.     schema,
  9. };
  10. export type {
  11.     SchemaType
  12. };
  1. {
  2.     "name": "validation-schemas",
  3.     "version": "0.0.1",
  4.     "description": "",
  5.     "main": "src/index.ts",
  6.     "types": "src/index.ts",
  7.     "license": "MIT",
  8.     "devDependencies": {
  9.         "typescript": "^4.5.2"
  10.     },
  11.     "dependencies": {
  12.         "zod": "^3.21.4"
  13.     }
  14. }

在api项目中导入模式时，我没有任何问题。然而，在cms Next.js 应用中导入模式会导致以下错误：

  1. error - ../../packages/validation-schemas/src/index.ts
  2. Module parse failed: Unexpected token (54:7)
  3. 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
  4. |     schema,
  5. | };
  6. > export type {
  7. |     SchemaType,
  9. Import trace for requested module:
  10. ../../packages/validation-schemas/src/index.ts

以下是在Next.js应用中使用的代码：

  1. import { zodResolver } from '@hookform/resolvers/zod';
  2. import { useForm } from 'react-hook-form';
  3. import {
  4.     SchemaType,
  5.     schema,
  6. } from 'validation-schemas';
  8. function Component(): JSX.Element {
  9.     const {
  10.         handleSubmit,
  11.         register,
  12.     } = useForm<SchemaType>({
  13.         resolver: zodResolver(schema),
  14.     });
  16.     ...
  17. }
  19. export default Component;

如何使其工作？

英文:

I am using a monorepo using Turborepo:

  1. apps
  2. |__ api
  3. |__ cms
  4. packages
  5. |__ 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.

  1. import { z } from &#39;zod&#39;;
  3. const schema = z.object({
  4.     name: z.string(),
  5. });
  7. type SchemaType = z.infer&lt;typeof schema&gt;;
  9. export {
  10.     schema,
  11. };
  12. export type {
  13.     SchemaType,
  14. };
  1. // index.ts
  2. import {
  3.     SchemaType,
  4.     schema,
  5. } from &#39;./admin&#39;;
  7. export {
  8.     schema,
  9. };
  10. export type {
  11.     SchemaType
  12. };
  1. {
  2.     &quot;name&quot;: &quot;validation-schemas&quot;,
  3.     &quot;version&quot;: &quot;0.0.1&quot;,
  4.     &quot;description&quot;: &quot;&quot;,
  5.     &quot;main&quot;: &quot;src/index.ts&quot;,
  6.     &quot;types&quot;: &quot;src/index.ts&quot;,
  7.     &quot;license&quot;: &quot;MIT&quot;,
  8.     &quot;devDependencies&quot;: {
  9.         &quot;typescript&quot;: &quot;^4.5.2&quot;
  10.     },
  11.     &quot;dependencies&quot;: {
  12.         &quot;zod&quot;: &quot;^3.21.4&quot;
  13.     }
  14. }

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:

  1. error - ../../packages/validation-schemas/src/index.ts
  2. Module parse failed: Unexpected token (54:7)
  3. 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
  4. |     schema,
  5. | };
  6. &gt; export type {
  7. |     SchemaType,
  9. Import trace for requested module:
  10. ../../packages/validation-schemas/src/index.ts

Here is the code used in the Next.js app:

  1. import { zodResolver } from &#39;@hookform/resolvers/zod&#39;;
  2. import { useForm } from &#39;react-hook-form&#39;;
  3. import {
  4.     SchemaType,
  5.     schema,
  6. } from &#39;validation-schemas&#39;;
  8. function Component(): JSX.Element {
  9.     const {
  10.         handleSubmit,
  11.         register,
  12.     } = useForm&lt;SchemaType&gt;({
  13.         resolver: zodResolver(schema),
  14.     });
  16.     ...
  17. }
  19. export default Component;

How to make this work?

答案1

得分: 0

问题是Next.js没有转译共享的validation-schemas包。为了解决这个问题，我需要明确告诉Next.js要转译这个包。

我通过在我的next.config.js文件中添加transpilePackages选项来实现这一点，如下所示：

  1. /** @type {import('next').NextConfig} */
  3. const nextConfig = {
  4.     ...
  5.     transpilePackages: ['validation-schemas'],  // 这是关键的添加部分
  6. };
  8. 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:

  1. /** @type {import(&#39;next&#39;).NextConfig} */
  3. const nextConfig = {
  4.     ...
  5.     transpilePackages: [&#39;validation-schemas&#39;],  // Here&#39;s the crucial addition
  6. };
  8. 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.

huangapple
  • 本文由 发表于 2023年7月24日 14:53:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/76752041.html
  • monorepo
  • next.js
  • reactjs
  • turborepo
  • zod
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定