Dynamic Importing of an unknown component - NextJs

I had the same issue like the thread opener. The Documentation describe, that it's not possible to use template strings in the import() inside dynamic:

In my case it was also impossible to add an general variable with the path there...

Solution

I've found an easy trick to solve this issue:

// getComponentPath is a method which resolve the path of the given Module-Name
const newPath = `./${getComponentPath(subComponent)}`;
const SubComponent = dynamic(() => import(''+newPath));

All the MAGIC seems to be the concatenation of an empty String with my generated Variable newPath: ''+newPath

Another Solution:

Another Solution (posted by bjn from the nextjs-Discord-Channel):

const dynamicComponents = {
  About: dynamic(() => import("./path/to/about")),
  Other: dynamic(() => import("./path/to/other")),
  ...
};

// ... in your page or whatever
const Component = dynamicComponents[subComponent];
return <Component />

This example might be useful, if you know all dynamically injectable Components. So you can list them all and use it later on in your code only if needed)

The below code worked for me with dynamic inside the component function.

import dynamic from "next/dynamic";

export default function componentFinder(componentName, componentPath) {

    const path = componentPath; // example : "news/lists"

    const DynamicComponent = dynamic(() => import(`../components/${path}`), 
    {
       ssr: false,
       loading: () => <p>Loading Content...</p>,
    });

    return <DynamicComponent />;
}

It happens because router.query is not ready and router.query.component is undefined at the very first render of dynamic page.

This would print false at first render and true at the following one.

 console.log(path === '../../components/common/CircularLoader');

You can wrap it with useEffect to make sure query is loaded.

const router = useRouter();

useEffect(() => {
  if (router.asPath !== router.route) {
    // router.query.component is defined
  }
}, [router])

SO: useRouter receive undefined on query in first render

Github Issue: Add a ready: boolean to Router returned by useRouter

I just solved it by using turbopack instead, so add this in package.json

"dev": "next dev --turbo",

and in the code my code :

async function importBlog(blogFileNames: any) {
 const modulePath = "../../app/blog/" + blogFileNames;
 let { meta, default: component } = await import(
       "" + modulePath
     )};

As it was said here before the dynamic imports need to be specifically written without template strings. So, if you know all the components you need beforehand you can dynamically import them all and use conditionals to render only those you want.

import React from 'react';
import dynamic from 'next/dynamic';

const Component1 = dynamic(() => import('./Component1').then((result) => result.default));

const Component2 = dynamic(() => import('./Component2').then((result) => result.default));

interface Props {
  slug: string;
  [prop: string]: unknown;
}

export default function DynamicComponent({ slug, ...rest }: Props) {
  switch (slug) {
    case 'component-1':
      return <Component1 {...rest} />;
    case 'component-2':
      return <Component2 {...rest} />;
    default:
      return null;
  }
}