Dynamic importing a library 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?

Why don't you just `import ConnectionReroutePlugin from 'rete-connection-reroute-plugin'`? — bcjohn, Mar 12 '20 at 13:22
Try using .default to import a default export, e.g. const lib = await import('path/to/lib').default — jacobedawson, Oct 14 '20 at 22:29

score 0 · Answer 1 · answered Mar 12 '20 at 11:17

0

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

answered Mar 12 '20 at 11:17

Prince Sodhi

2,845
2
21
35

1

Thanks for your answer but that doesn't works for me. – Muhammad Zeeshan Mar 12 '20 at 11:19

score 0 · Answer 2 · answered Mar 12 '20 at 11:18

0

You can do something like this

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

document.head.appendChild(script);

answered Mar 12 '20 at 11:18

AJAY

1
4

Thanks for the approach. But i am looking a react way not vanilla javascript. – Muhammad Zeeshan Mar 12 '20 at 11:20

score 0 · Answer 3 · answered May 25 '22 at 15:03

0

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.

answered May 25 '22 at 15:03

Gonzalo.-

12,512
5
50
82

Dynamic importing a library next.js

3 Answers3