Webpack not allowing es2020 import from variable in next.js

Viewed 198

I'm developing a plugin feature in my next.js react app in which I have to dynamically import components from a bunch of given modules.

component.tsx :

const MyComponent = (props) => {
   useEffect(() => {
      const pluginNames = ['test-component'];
      pluginNames.forEach(async (name) => {
         try {
            const plugin = await import(name);
         } catch(err) {
            // I don't want an unvalid plugin to crash my app
            console.warn(err);
         }
      });
   }, []);

   // returns any html template
}

but when I run my code, I get the following error: enter image description here

it seem to clearly indicate that the plugin is not found despite it's installed. From what I understood, it happens because webpack doesn't pack up the dynamically imported plugins in my webpack config. Is there a way to tell webpack to include the specified modules (considering they are fixed since the startup of the app).

Possible solutions:

  • create a js file importing all modules and tell webpack to inject it into the bundle page
  • configure webpack so it adds the required modules
0 Answers
Related