turbo mode does not work in nx next

[inceenes10]

Current Behavior

When I add turbo mode in the project.json like below:

"serve": {
    "executor": "@nx/next:server",
    "defaultConfiguration": "development",
    "options": {
        "buildTarget": "app:build",
        "dev": true
    },
    "configurations": {
        "development": {
            "buildTarget": "app:build:development",
            "dev": true,
            "turbo": true
        },
        "production": {
            "buildTarget": "app:build:production",
            "dev": false
        }
    }
}

Import aliases in my tsconfig.json is not working

"paths": {
    "@/*": ["apps/app/*"],
    "@sustable/coreweb": ["libs/coreweb/src/index.ts"],
    "@sustable/hooks": ["libs/hooks/src/index.ts"],
    "@sustable/locales": ["libs/locales/src/index.ts"],
    "@sustable/mindash": ["libs/mindash/src/index.ts"],
    "@sustable/mindash/illustrations": ["libs/mindash/src/illustrations/index.ts"],
    "@sustable/system": ["libs/system/src/index.ts"],
    "@sustable/utilities": ["libs/utilities/src/index.ts"]
}

The error I get is like below

Expected Behavior

When I only remove turbo: true from project.json, It works as expected.

GitHub Repo

No response

Steps to Reproduce

1. Add turbo: true to project.json
2. Add path aliases to tsconfig.json
3. You will get the error

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 19.7.0
   OS     : darwin-arm64
   yarn   : 1.22.19
   
   nx (global)        : 18.0.2
   nx                 : 18.0.2
   @nx/js             : 18.0.2
   @nx/jest           : 18.0.2
   @nx/linter         : 18.0.2
   @nx/eslint         : 18.0.2
   @nx/workspace      : 18.0.2
   @nx/devkit         : 18.0.2
   @nx/eslint-plugin  : 18.0.2
   @nx/next           : 18.0.2
   @nx/react          : 18.0.2
   @nx/rollup         : 18.0.2
   @nrwl/tao          : 18.0.2
   @nx/web            : 18.0.2
   typescript         : 5.3.3

Failure Logs

> nx run app:serve:development

   ▲ Next.js 14.1.4 (turbo)
   - Local:        http://localhost:4200
   - Environments: .env
   - Experiments (use at your own risk):
     · turbo

 ✓ Ready in 1799ms
 ○ Compiling /[lang]/auth/login ...
 ✓ Compiled /[lang]/auth/login in 1598ms
 ⨯ ./apps/app/app/[lang]/auth/layout.tsx:3:0
Module not found: Can't resolve '@sustable/mindash'
  1 | // "use client";
  2 |
> 3 | import { MindashProvider } from "@sustable/mindash";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4 | import { AbstractIntlMessages, NextIntlClientProvider } from "next-intl";
  5 | import { getMessages } from "next-intl/server";
  6 |

https://nextjs.org/docs/messages/module-not-found



./apps/app/app/[lang]/not-found.tsx:5:0
Module not found: Can't resolve '@/components/loading-screen'
  3 | import { useEffect, useState } from "react";
  4 |
> 5 | import { SplashScreen } from "@/components/loading-screen";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  6 |
  7 | import { NotFoundView } from "@/views/error";
  8 |

https://nextjs.org/docs/messages/module-not-found



./apps/app/app/[lang]/auth/login/page.tsx:1:0
Module not found: Can't resolve '@/core/auth'
> 1 | import { GuestGuard } from "@/core/auth";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | import { Login } from "@/views/auth/login";
  3 |
  4 | export default function LoginPage() {

https://nextjs.org/docs/messages/module-not-found



./apps/app/app/[lang]/not-found.tsx:7:0
Module not found: Can't resolve '@/views/error'
   5 | import { SplashScreen } from "@/components/loading-screen";
   6 |
>  7 | import { NotFoundView } from "@/views/error";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   8 |
   9 | export default function NotFound() {
  10 | 	const [loading, setLoading] = useState(true);

https://nextjs.org/docs/messages/module-not-found



./apps/app/app/[lang]/auth/layout.tsx:7:0
Module not found: Can't resolve '@/core/module'
   5 | import { getMessages } from "next-intl/server";
   6 |
>  7 | import { ModuleProvider } from "@/core/module";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   8 | import Providers from "@/core/providers";
   9 | import CompactLayout from "@/layouts/compact";
  10 |

https://nextjs.org/docs/messages/module-not-found



./apps/app/app/[lang]/auth/login/page.tsx:2:0
Module not found: Can't resolve '@/views/auth/login'
  1 | import { GuestGuard } from "@/core/auth";
> 2 | import { Login } from "@/views/auth/login";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 |
  4 | export default function LoginPage() {
  5 | 	return (

https://nextjs.org/docs/messages/module-not-found



./apps/app/app/[lang]/auth/layout.tsx:9:0
Module not found: Can't resolve '@/layouts/compact'
   7 | import { ModuleProvider } from "@/core/module";
   8 | import Providers from "@/core/providers";
>  9 | import CompactLayout from "@/layouts/compact";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  10 |
  11 | type Props = {
  12 | 	children: React.ReactNode;

https://nextjs.org/docs/messages/module-not-found



./apps/app/app/[lang]/auth/layout.tsx:8:0
Module not found: Can't resolve '@/core/providers'
   6 |
   7 | import { ModuleProvider } from "@/core/module";
>  8 | import Providers from "@/core/providers";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   9 | import CompactLayout from "@/layouts/compact";
  10 |
  11 | type Props = {

https://nextjs.org/docs/messages/module-not-found


 ○ Compiling /_error ...
 ✓ Compiled /_error in 549ms
 ✓ Compiled /[lang] in 155ms
 ⨯ ./apps/app/app/[lang]/not-found.tsx:5:0
Module not found: Can't resolve '@/components/loading-screen'
  3 | import { useEffect, useState } from "react";
  4 |
> 5 | import { SplashScreen } from "@/components/loading-screen";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  6 |
  7 | import { NotFoundView } from "@/views/error";
  8 |

https://nextjs.org/docs/messages/module-not-found



./apps/app/app/[lang]/not-found.tsx:7:0
Module not found: Can't resolve '@/views/error'
   5 | import { SplashScreen } from "@/components/loading-screen";
   6 |
>  7 | import { NotFoundView } from "@/views/error";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   8 |
   9 | export default function NotFound() {
  10 | 	const [loading, setLoading] = useState(true);

https://nextjs.org/docs/messages/module-not-found



./apps/app/app/[lang]/page.tsx:4:0
Module not found: Can't resolve '@/config/paths/auth'
  2 | import { getCookies } from "next-client-cookies/server";
  3 |
> 4 | import { authPaths } from "@/config/paths/auth";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  5 | import { auth } from "@/core/auth/config";
  6 |
  7 | export default async function Index() {

https://nextjs.org/docs/messages/module-not-found



./apps/app/app/[lang]/page.tsx:5:0
Module not found: Can't resolve '@/core/auth/config'
  3 |
  4 | import { authPaths } from "@/config/paths/auth";
> 5 | import { auth } from "@/core/auth/config";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  6 |
  7 | export default async function Index() {
  8 | 	const cookies = getCookies();

https://nextjs.org/docs/messages/module-not-found

Package Manager Version

yarn 1.22.19

Operating System

• [X] macOS
• [ ] Linux
• [ ] Windows
• [ ] Other (Please specify)

Additional Information

No, thanks in advance

[mattleong]

Small sample of the errors I'm seeing when running pnpm nx dev test-app --turbo

 ⨯ ./node_modules/.pnpm/[email protected]/node_modules/prettier/index.js:18267:31
Module not found
  18265 |                 paths: [dir]
  18266 |               });
> 18267 |               result.config = require(modulePath);
        |                               ^^^^^^^^^^^^^^^^^^^
  18268 |             }
  18269 |             if (typeof result.config !== "object") {
  18270 |               throw new TypeError(`Config is only allowed to be an object, but received ${typeof result.config} in "${result.filepath}"`);



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]/node_modules/nx/src/config/schema-utils.js:20:24
Module not found
  18 |             (0, nx_plugin_1.registerPluginTSTranspiler)();
  19 |         }
> 20 |         const module = require(modulePath);
     |                        ^^^^^^^^^^^^^^^^^^^
  21 |         return implementationExportName
  22 |             ? module[implementationExportName]
  23 |             : module.default ?? module;



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]/node_modules/nx/src/adapter/ngcli-adapter.js:588:26
Module not found
  586 |     }
  587 |     if ((0, path_1.extname)(name)) {
> 588 |         collectionPath = require.resolve(name);
      |                          ^^^^^^^^^^^^^^^^^^^^^
  589 |     }
  590 |     else {
  591 |         const { path: packageJsonPath, packageJson } = (0, package_json_1.readModulePackageJson)(name, (0, installation_directory_1.getNxRequirePaths)(process.cwd()));



https://nextjs.org/docs/messages/module-not-found


 ⨯ ./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/ts-node/dist/index.js:247:39
Module not found
  245 |                 : projectLocalResolveHelper;
  246 |             const transpilerPath = transpilerConfigLocalResolveHelper(transpilerName, true);
> 247 |             const transpilerFactory = require(transpilerPath)
      |                                       ^^^^^^^^^^^^^^^^^^^^^^^
  248 |                 .create;
  249 |             return createTranspiler;
  250 |             function createTranspiler(compilerOptions, nodeModuleEmitKind) {

[ndcunningham]

@inceenes10 Is it possible for you to create a small repro? I tried to recreate using the same instruction and i am unable to reproduce it.

[inceenes10]

I'm having difficulty pinpointing the exact conditions that trigger the problem.

Would it be possible for you to provide some guidance on how to effectively reproduce the issue? Any additional insights or steps you could offer would be helpful.

I upgraded nextjs version to 14.2.2, the error message is like below with turbo mode open.

[ndcunningham]

@inceenes10 can you create a small project on GitHub with the instructions you provided that recreates this issue?

[PhilGarb]

I have the same issue and created a reproduction: Repro

The dev server command: pnpm nx dev next-repro

This is only happening when tailwind is setup in the app. I think however that this is not an issue with just next.js and tailwind, because there are no related issues on the next.js side, for this very common configuration.

Let me know if you need anything else.

[github-actions[bot]]

This issue has been automatically marked as stale because no reproduction was provided within 7 days. Please help us help you. Providing a repository exhibiting the issue helps us diagnose and fix the issue. Any time that we spend reproducing this issue is time taken away from addressing this issue and other issues. This issue will be closed in 21 days if a reproduction is not provided. If a reproduction has been provided, please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[ndcunningham]

Thanks for the repro i'll investigate

[Jackmekiss]

Same problem here! But the problem is here since next 14 actually :/

[ndcunningham]

I think this is a nextjs /turbopack issue. I created a bug to track it: https://github.com/vercel/next.js/issues/66602

Here is a repo without Nx illustrating the same problem: https://github.com/ndcunningham/nextjs-tw

Since turbo is mostly rust it's hard to diagnose what the real issue is, we will just have to wait on their team to address it.

Closing as this is not a Nx issue

[github-actions[bot]]

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.