Error Importing Dynamic Routes using dynamic in Turbo Mode

[cyb1999]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:43 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T8112
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.14.1
Relevant Packages:
  next: 14.1.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which example does this report relate to?

with-turbopack

What browser are you using? (if relevant)

Chrome 120.0.6099.234

How are you deploying your application? (if relevant)

No response

Describe the Bug

I am experiencing an issue in Next.js when attempting to import dynamic routes using the dynamic function in turbo mode. This issue occurs when the --turbo suffix is set in package.json.

Steps to Reproduce:

Enable turbo mode by setting the --turbo flag in package.json. Start the Next.js project. Attempt to dynamically import routes using next/dynamic.

Current Behavior: When the project runs with the --turbo flag, an error stating "Module not found" is encountered during the dynamic import of routes. This error does not occur when the --turbo flag is removed from package.json.

Expected Behavior

The application should successfully import dynamic routes without any errors, even with turbo mode enabled.

To Reproduce

Enable turbo mode by adding the --turbo flag in package.json. Start the Next.js project. Attempt to dynamically import routes using next/dynamic.

Repository for Reproduction: The issue can be reproduced using the code in my public repository: https://github.com/cyb1999/next-turbopack-dynamic-issue

Code snippet: // SidebarContent.tsx

'use client'
import React, { memo, useCallback, useMemo } from 'react'
import dynamic from 'next/dynamic'
import { SidebarMenuConfig } from './SidebarMenuConfig'
import { usePathname } from 'next/navigation'

interface DynamicSidebarComponentProps {
  componentPath: string
}

const DynamicSidebarComponent: React.FC<DynamicSidebarComponentProps> = memo(
  ({ componentPath }) => {
    const DynamicComponent = useMemo(() => {
      return dynamic(() => import(`${componentPath}`), {
        loading: () => <div>loading...</div>,
      })
    }, [componentPath])
    return <DynamicComponent />
  }
)
DynamicSidebarComponent.displayName = 'DynamicSidebarComponent'

const SidebarContent = () => {
  const pathname = usePathname()

  const relevantPathSegment = pathname.split('/')[1]

  const currentMenu = useMemo(() => {
    return SidebarMenuConfig.find((menu) => relevantPathSegment === menu.path)
  }, [relevantPathSegment])

  if (currentMenu) {
    return <DynamicSidebarComponent componentPath={currentMenu.componentPath} />
  }
  return null
}

export default SidebarContent

//SidebarMenuConfig.tsx

export const SidebarMenuConfig = [
  {
    path: 'chat',
    componentPath: './ChatSidebar',
  }
]

[msdrigg]

Also seeing this in my project

[vanlinh-bic]

I have the same problem

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #29-Ubuntu SMP PREEMPT_DYNAMIC Thu Mar 28 23:46:48 UTC 2024
  Available memory (MB): 15708
  Available CPU cores: 12
Binaries:
  Node: 21.7.3
  npm: 10.5.0
  Yarn: 1.22.22
  pnpm: 9.0.4
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.1.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.6
Next.js Config:
  output: N/A

Error: Module [project]/src/components/ModalController.tsx [app-client] (ecmascript, async loader) was instantiated because it was required from module [project]/src/layouts/Layout/Layout.tsx [app-client] (ecmascript), but the module factory is not available. It might have been deleted in an HMR update.

[dfiedlerx]

Any light on this problem? I've been facing this using components with suspense and nextJS, I can only run my project without --turbo...

[Skippou]

Same problem with localisation.

Error: Module [project]/node_modules/next/dist/esm/client/components/error-boundary.js [app-ssr] (ecmascript) was instantiated because it was required from module [project]/node_modules/next/dist/esm/build/templates/app-page.js?page=/[locale]/dashboard/page { COMPONENT_0 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js server component)", COMPONENT_1 => "[project]/app/not-found.tsx [app-rsc] (ecmascript, Next.js server component)", COMPONENT_2 => "[project]/app/[locale]/dashboard/layout.tsx [app-rsc] (ecmascript, Next.js server component)", COMPONENT_3 => "[project]/app/[locale]/dashboard/page.tsx [app-rsc] (ecmascript, Next.js server component)" } [app-rsc] (ecmascript) , but the module factory is not available. It might have been deleted in an HMR update.

[JoseSteecky]

I'm also having this issue, any clue to resolve it?

const productConfig = (await import(
    `@/app/_config/industry_sector/${params.category}`
  )) as Record<string, Record<string, string>>;

const productConfig = (await import(
      |                                ^^^^^^^
> 123 |     `@/app/_config/industry_sector/${params.category}`
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 124 |   )) as Record<string, Record<string, string>>;

[djshubs]

I'm facing the same issue here.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!