动态导入库 next.js

Question

I am trying to import a library dynamically in one of my next.js project. When i try to import that in don't get the default export from the library as expected. Firstly, i tried the next.js way as:

import dynamic from "next/dynamic";
const ConnectionReroutePlugin = dynamic(() => import('rete-connection-reroute-plugin'), { ssr: false });

Then i tried the react way as:

const ConnectionReroutePlugin = React.lazy(() => import('rete-connection-reroute-plugin'));

I am seeing the following import error:

Unhandled Rejection (TypeError): plugin.install is not a function

Anyone can address, what i am doing wrong and how can i import that?

Answer 1

I think the issue is you need to pass import as a loader. like following

const ConnectionReroutePlugin = dynamic({
  loader: () => import("rete-connection-reroute-plugin"),
  ssr: false
});

Answer 2

You can do something like this

var script = document.createElement('script');
script.onload = function () {
 // do something here
};
script.src = something;

document.head.appendChild(script);

Answer 3

In order to make a dynamic import of a library, you can do

import('rete-connection-reroute-plugin')
  .then(({ default: ConnectionReroutePlugin }) => /*  do what you want */)

also, async/await syntax can be used.