How to use dynamic import of next js with path stored in a variable

Question

I am using dynamic import in next js. The component is rendered when I directly use the path. But it is not rendering when I use the path from a variable.

const faq = dynamic(() => import('../faq/faq'))

This works fine. but,

const path = '../faq/faq';
const faq = dynamic(() => import(path ))

This is not working. How can I fix this?

Answer 1

As Per webpack Documentation It is not possible to use a fully dynamic import statement, such as import(foo). Because foo could potentially be any path to any file in your system or project.

Answer 2

You can use string concatenation while importing dependencies from variable

const path = '../faq/faq';
const faq = dynamic(() => import(`${path}` ))