payload Next.js Turbopack Fails to Import Custom Admin Components

Describe the Bug

When running a Next.js app with the --turbo flag, Payload CMS has an issue where server-relative imports (like '/components/null') in the admin config cause a module resolution error. This happens with components like the avatar and logout button.

Error Message

Thank you for your time and support!

Link to the code that reproduces this issue

https://github.com/erdemdev/next-supabase-payload-test

Reproduction Steps

Use the following Payload CMS configuration and custom component:

//payload.config.ts
import path from "path";
import { fileURLToPath } from "url";
import { buildConfig } from "payload";

const filename = fileURLToPath(import.meta.url);
const dirname = path.dirname(filename);

export default buildConfig({
  admin: {
    //...
    importMap: {
      baseDir: path.resolve(dirname),
    },
    avatar: {
      Component: '/components/null',
    },
    components: {
      logout: {
        Button: '/components/null',
      },
    },
  },
});

//components/null.tsx
const Null = () => <></>;

export default Null;

Start the Next.js app with the Turbo flag:
```
next dev --turbo
```
Go to the admin dashboard.

Expected Behavior

The /components/null path should resolve correctly to the Null component.

Actual Behavior

The application throws a module resolution error, citing that server-relative imports are not yet implemented.

Which area(s) are affected? (Select all that apply)

area: core, area: ui

Environment Info

Binaries:
  Node: 20.12.0
  npm: N/A
  Yarn: N/A
  pnpm: 9.14.2
Relevant Packages:
  payload: 3.1.0
  next: 15.0.3
  @payloadcms/db-postgres: 3.1.0
  @payloadcms/email-nodemailer: 3.1.0    
  @payloadcms/graphql: 3.1.0
  @payloadcms/next/utilities: 3.1.0      
  @payloadcms/payload-cloud: 3.1.0       
  @payloadcms/plugin-cloud-storage: 3.1.0
  @payloadcms/richtext-lexical: 3.1.0    
  @payloadcms/storage-s3: 3.1.0
  @payloadcms/translations: 3.1.0        
  @payloadcms/ui/shared: 3.1.0
  react: 19.0.0-rc-64f89510-20241119
  react-dom: 19.0.0-rc-64f89510-20241119
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 30649
  Available CPU cores: 4

Nov 23 '24 17:11 helalsoft

payload generate:importmap

Nov 23 '24 22:11 webcollectiveco

payload generate:importmap

I've already done that. The import map is working fine in normal dev mode, but the issue lies with Turbopack.

Nov 24 '24 05:11 helalsoft

This issue has been marked as stale due to lack of activity.

To keep this issue open, please indicate that it is still relevant in a comment below.

Dec 18 '24 05:12 github-actions[bot]

same problem

Jan 02 '25 15:01 rburgst

same problem guys any suggestions !

Jan 05 '25 10:01 NourEssalam

Same issue here. @jmikrut Hey man, this is fraustrating. I can't use next dev --turbo if I want to use payload generate:importmap

Feb 01 '25 22:02 peiris

Have you tried using relative paths? Like starting with './' instead of just '/'?

Feb 09 '25 15:02 gioruu

I've had this exact same issue with and without Next.js turbo, pulling my hair out for hours trying to fix this and nothing I tried would work. Everything was vanilla out of the box configuration, using the latest versions of Next.js and PayloadCMS. But no matter what I tried, I couldn't get the importMap generation to work properly.

The fix ended up being changing the baseDir line in the payload.config.ts file so that instead of the default:

export default buildConfig({
  admin: {
    user: Users.slug,
    importMap: {
      baseDir: path.resolve(dirname),
    },
  },
...

it is instead

export default buildConfig({
  admin: {
    user: Users.slug,
    importMap: {
      baseDir: "@", // use whatever your Next.js src/ alias is set to
    },
  },
...

Hopefully this helps someone else and saves them 5 hours of frustration I just endured. Cheers.

Feb 20 '25 02:02 langy

importMap: {
  baseDir: "@", // use whatever your Next.js src/ alias is set to
},
Hopefully this helps someone else and saves them 5 hours of frustration I just endured. Cheers.

Thanks @langy , do you mean paths (aliases) in tsconfig.json? I have "@/*" (as in template) + some custom. Tried baseDir: "@", "@/", "@/*" and changing order of paths - nothing works for my issue.

My case is similar but not exactly the same. Turbopack complains Could not find the module X in the React Client Manifest for most of imports I have in importMaps (both custom and build-in Payload components) when I save files impacting Payload data schema / admin panel in dev mode with HRM. It happens only on Turbopack.

This issue is explained in more details in this blog post: https://www.buildwithmatija.com/blog/payload-turbopack-react-client-manifest-error-debugging

I managed to reproduce it on Payload official website template after adding --turbopack to dev script and updating Next.js to version [email protected] (from 15.4.4 that is used by Payload). Based on this Discord thread it was introduced in 15.5.0: https://discord.com/channels/967097582721572934/1409901645868961854/1409963335385878730

Since my case is not 100% the same I will create a new issue tomorrow with reproduction repo.

Example errors I get on official website template with SQLite after HMR when I removed test field from FormBlock config:

 ✓ Compiled /admin/[[...segments]] in 153ms
 ○ Compiling /[slug] ...
Generating import map
No new imports found, skipping writing import map
[✓] Pulling schema from database...
? Warnings detected during schema push: 

· You're about to delete test_import_maps column in pages_blocks_form_block table with 1 items
· You're about to delete test_import_maps column in _pages_v_blocks_form_block table with 1 items

DATA LOSS WARNING: Possible data loss detected if schema is pushed.

Accept warnings and push schema to database? › (y/N) ✓ Compiled /[slug] in 1271ms
[⣷] Pulling schema from database...
[✓] Pulling schema from database...
✔ Warnings detected during schema push: 

· You're about to delete test_import_maps column in pages_blocks_form_block table with 1 items
· You're about to delete test_import_maps column in _pages_v_blocks_form_block table with 1 items

DATA LOSS WARNING: Possible data loss detected if schema is pushed.

Accept warnings and push schema to database? … yes
 ⨯ Error: Could not find the module "[project]/node_modules/.pnpm/@[email protected]_@[email protected][email protected]_react@19._79568805ff5ee287636170a598c47824/node_modules/@payloadcms/richtext-lexical/dist/exports/client/index.js#InlineToolbarFeatureClient" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
    at stringify (<anonymous>) {
  digest: '1878333357'
}
 ⨯ Error: Could not find the module "[project]/node_modules/.pnpm/@[email protected]_@[email protected][email protected]_react@19._79568805ff5ee287636170a598c47824/node_modules/@payloadcms/richtext-lexical/dist/exports/client/index.js#FixedToolbarFeatureClient" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
    at stringify (<anonymous>) {
  digest: '1906748461'
}
 ⨯ Error: Could not find the module "[project]/node_modules/.pnpm/@[email protected]_@[email protected][email protected]_react@19._79568805ff5ee287636170a598c47824/node_modules/@payloadcms/richtext-lexical/dist/exports/client/index.js#HeadingFeatureClient" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
    at stringify (<anonymous>) {
  digest: '3441152301'
}
...

I have these errors for most of imports in importMap in the loop, over and over. Sometime it stops and finally compiles the page, but usually it either crashes after long time or I have to kill it.

EDIT:

This new "Could not find the module" Error was introduced in Next.js 15.5.0 - I've found exact PR. On Next.js 16 there are different issues with HMR.

I created and Issue explaining this in detail: https://github.com/payloadcms/payload/issues/14419

Oct 30 '25 00:10 LucasMatuszewski