Module parse failed using Next.js in a turborepo setup

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

Module parse failed using Next.js in a turborepo setup

问题

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

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

validation-schemas包是我用来在apicms应用程序中使用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 &#39;zod&#39;;

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

type SchemaType = z.infer&lt;typeof schema&gt;;

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

// index.ts
import {
    SchemaType,
    schema,
} from &#39;./admin&#39;;

export {
    schema,
};
export type {
    SchemaType
};
{
    &quot;name&quot;: &quot;validation-schemas&quot;,
    &quot;version&quot;: &quot;0.0.1&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;main&quot;: &quot;src/index.ts&quot;,
    &quot;types&quot;: &quot;src/index.ts&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;devDependencies&quot;: {
        &quot;typescript&quot;: &quot;^4.5.2&quot;
    },
    &quot;dependencies&quot;: {
        &quot;zod&quot;: &quot;^3.21.4&quot;
    }
}

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,
| };
&gt; 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 &#39;@hookform/resolvers/zod&#39;;
import { useForm } from &#39;react-hook-form&#39;;
import {
    SchemaType,
    schema,
} from &#39;validation-schemas&#39;;

function Component(): JSX.Element {
    const {
        handleSubmit,
        register,
    } = useForm&lt;SchemaType&gt;({
        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(&#39;next&#39;).NextConfig} */

const nextConfig = {
    ...
    transpilePackages: [&#39;validation-schemas&#39;],  // Here&#39;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.

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

发表评论

匿名网友

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

确定