autogenerated type import path fails during build on nextjs 13 app directory, not finding layout file

[marianzburlea]

Current Behavior

Expected Behavior

Build successfully without errors.

Github Repo

No response

Steps to Reproduce

All I need to do to reproduces it is to enable app dir:

in a NextJS project.

While running nx serve my-next, the appDir works fine,
when running nx build my-next, the error above happens.

I can see the file generated during the build process that is dealing with types has a wrong path:

Nx Report

$ nx build my-next

> nx run my-next:build:production

warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

info  - Creating an optimized production build  
info  - Compiled successfully
info  - Skipping linting
info  - Checking validity of types ..Failed to compile.

Type error: Cannot find module '../../../../app/layout' or its corresponding type declarations.


 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Ran target build for project my-next (2s)
 
    ✖    1/1 failed
    ✔    0/1 succeeded [0 read from cache]
 
   View structured, searchable error logs at https://nx.app/runs/lWgLCc4scB

Failure Logs

No response

Additional Information

Just a very basic @nrwl/next project, with appDir enabled, fails on build.

[Shooshte]

Bump, having the same issue, with a nested page.tsx. So the full path is app/battle/[id]/page.ts and the error I am getting is:

Type error: Cannot find module '../../../../../../app/battle/[id]/page' or its corresponding type declarations.

[AndriiTsok]

Hello, we experiencing the same issue. Currently, the dev/prod builds are affected.

warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Skipping linting
info  - Checking validity of types ...Failed to compile.

Type error: Cannot find module '../../../../app/layout' or its corresponding type declarations.```

Workarounds with tsconfig and exclude do not work.

[Fetten]

I came across this behavior as well. The issue seems to be related to Next.js adding the types directory, that is created during build, to the tsconfig, which then cannot be resolved.

Workaround
The type error does not occur when the build directory is inside the Next.js app directory itself. This can be changed in the project.json config by modifying the outputPath of the build target:

"targets": {
  "build": {
    "executor": "@nrwl/next:build",
    "outputs": ["{options.outputPath}"],
    "defaultConfiguration": "production",
    "options": {
      "root": "apps/next-app",
-      "outputPath": "dist/apps/next-app"
+      "outputPath": "apps/next-app/dist"
    },
  },

[AndriiTsok]

@Fetten thank you for the workaround! Have you tried it for standalone outputs?

[Fetten]

@Fetten thank you for the workaround! Have you tried it for standalone outputs?

@AndriiTsok, No, haven't tried it yet in standalone mode.

[marianzburlea]

It looks like NX is not supporting NextJS 13, since no one in the entire world can use
nx build my-app.

Does anyone know if NX is planning to support Next 13 any time soon or is it back to Next 12 for production?

[ianldgs]

It seems to build in [email protected]. However, it's putting the build output on apps/my-app/.next instead of in dist/apps/my-app/.next.

[ianldgs]

Ok, it seems like [email protected] breaks with nx:

vercel/next.js#45455
vercel/next.js#46374 (comment)

#15214

[ianldgs]

I've made a temporary fix for [email protected], which is still compatible with NX in case anyone wants to try out appdir.

  "pnpm": {
    "overrides": {
      "next": "npm:@ian-patches/[email protected]"
    }
  }

[ianldgs]

Opened a PR in next to fix it. Also released a patch for 13.2.4:

  "pnpm": {
    "overrides": {
      "next": "npm:@ian-patches/[email protected]"
    }
  }

[hakobpogh]

I came across this behavior as well. The issue seems to be related to Next.js adding the types directory, that is created during build, to the tsconfig, which then cannot be resolved.

Workaround The type error does not occur when the build directory is inside the Next.js app directory itself. This can be changed in the project.json config by modifying the outputPath of the build target:

"targets": {
  "build": {
    "executor": "@nrwl/next:build",
    "outputs": ["{options.outputPath}"],
    "defaultConfiguration": "production",
    "options": {
      "root": "apps/next-app",
-      "outputPath": "dist/apps/next-app"
+      "outputPath": "apps/next-app/dist"
    },
  },

This one worked for me as a hotfix. I hope nx + next will resolve this soon.

[Jordaneisenburger]

Also encountering this issue, should have checked GH earlier instead of waisting hours of headaches :)

[2coo]

we need a permanent solution instead of playing with project.json.
so lets keep eyes on vercel/next.js#44363

[ianldgs]

Hi all! Can you try with [email protected] / [email protected]? Edit: [email protected]

[wirsich]

[email protected] solves the issue for me.

[leosvelperez]

This has been fixed in the latest versions of Nx and Next.js. Please note the appDir setting is no longer needed as of Next.js 13.4.0 (https://nextjs.org/docs/app/api-reference/next-config-js/appDir).

I'm closing this. If you still face issues related to this using the latest versions, feel free to leave a comment or open a new issue with updated details.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.