Dynamic Importing of an unknown component - NextJs

Question

I want to load a component dynamically based on the route. I'm trying to make a single page which can load any individual component for testing purposes.

However whenever I try to do import(path) it shows the loader but never actually loads. If I hard code the exact same string that path contains then it works fine. What gives? How can I get nextjs to actually dynamically import the dynamic import?

// pages/test/[...component].js

const Test = () => {
  const router = useRouter();
  const { component } = router.query;
  const path = `../../components/${component.join('/')}`;

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

  // This fails to load, despite path being identical to hard coded import
  const DynamicComponent = dynamic(() => import(path), {
    ssr: false,
    loading: () => <p>Loading...</p>,
  });

  // This seems to work
  const DynamicExample = dynamic(() => import('../../components/Example'), {
    ssr: false,
    loading: () => <p>Loading...</p>,
  });

  return (
    <Fragment>
      <h1>Testing {path}</h1>
      <div id="dynamic-component">
        <DynamicComponent />      <!-- this always shows "Loading..." -->
        <DynamicExample /> <!-- this loads fine. -->
      </div>
    </Fragment>
  );
};

export default Test;

Answer 1

I put dynamic outside of the component, and it work fine.

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

const Test = () => {
  const router = useRouter();
  const { component } = router.query;
  
  const DynamicComponent = getDynamicComponent(component);

  return <DynamicComponent />
}

Answer 2

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)

Answer 3

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 />;
}

Answer 4

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

Answer 5

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;
  }
}