I'm using Next.js to build a web application, and I'm trying to load a ponent dynamically using the dynamic() function. The code works fine when I use a string literal as the module path, like this:

import dynamic from 'next/dynamic';

const ThreeComponent = dynamic(
  () => import('../../../shared/ponents/one/two/three/threeponent'),
  { ssr: false }
);

However, when I try to use a variable for the module path, like this:

import dynamic from 'next/dynamic';

const pathurl = '../../../shared/ponents/one/two/three/threeponent';
const ThreeComponent = dynamic(() => import(`${pathurl}`), { ssr: false });

I get an error that says "Error: Cannot find module".

I've checked that the path to the module is correct, and I'm using a version of Next.js that supports dynamic imports (version 9.4 or later). I've also tried using an absolute path or a relative path from the root of my project, but I still get the same error.

What could be causing this issue, and how can I load a module dynamically using a variable for the module path in Next.js?

As I explained in my problem, I am trying to run my code that is correct, but it is not working at all.

I'm using Next.js to build a web application, and I'm trying to load a ponent dynamically using the dynamic() function. The code works fine when I use a string literal as the module path, like this:

import dynamic from 'next/dynamic';

const ThreeComponent = dynamic(
  () => import('../../../shared/ponents/one/two/three/three.ponent'),
  { ssr: false }
);

However, when I try to use a variable for the module path, like this:

import dynamic from 'next/dynamic';

const pathurl = '../../../shared/ponents/one/two/three/three.ponent';
const ThreeComponent = dynamic(() => import(`${pathurl}`), { ssr: false });

I get an error that says "Error: Cannot find module".

I've checked that the path to the module is correct, and I'm using a version of Next.js that supports dynamic imports (version 9.4 or later). I've also tried using an absolute path or a relative path from the root of my project, but I still get the same error.

What could be causing this issue, and how can I load a module dynamically using a variable for the module path in Next.js?

As I explained in my problem, I am trying to run my code that is correct, but it is not working at all.

• javascript
• reactjs
• next.js

1 Answer 1

They say on the official documentation that the path should be explicitly set; it cannot be a template litterale, nor a variable:

In import('path/to/ponent'), the path must be explicitly written. It can't be a template string nor a variable. Furthermore the import() has to be inside the dynamic() call for Next.js to be able to match webpack bundles / module ids to the specific dynamic() call and preload them before rendering.

If you want to handle different dynamic imports in one place, you could do something like below:

import dynamic from "next/dynamic";

const ComponentOne = dynamic(() => import("./One.js"), { ssr: false });
const ComponentTwo = dynamic(() => import("./Two.js"), { ssr: false });

export default function DynamicComponent({ ponentNubmer = 1 }) {
  if (ponentNubmer == 1) {
    return <ComponentOne />;
  }
  return <ComponentTwo />;
}

And use it like this to import One.js:

<DynamicComponent ponentNubmer={1} />