Search code examples
reactjstypescriptnext.jsannotations

Nextjs "Module parse failed" on type annotations (Yarn Workspaces)

I am trying to test out/change a project from Vite+React to Nextjs+React.
I checked this page here: https://nextjs.org/learn-pages-router/foundations/from-react-to-nextjs/getting-started-with-nextjs then i changed project accordingly.

However after running next dev I got the following error here:

const customErrorMap: z.ZodErrorMap = (issue, ctx) => {

Module parse failed: Unexpected token (5:20)
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

webpack.config.js:
I have no webpack.config file setup currently, but i tried setting it up previously then deleted it after thinking that it might be unrelated to the issue as the documentation said you don't need it to use typescript with nextjs.
dependency versions:

{
  "typescript": "^5.1.6",
  "next": "^14.0.3",
  // "vite": "^3.2.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

update

I have found out that this only happens when importing from a local workspace that is added using yarn workspaces.

project-name
| - backend
| - frontend

frontend/package.json

  dependencies: {
    "@project-name/backend": "1.0.0",
    ...
  }

Is there a compatibility issue with yarn workspaces?
What do I need to set up for this to work properly?

Solution

  • I fixed the issue by adding transpilePackages to next.config.js

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

module.exports = nextConfig