Nextjs dynamic import of multiple exports

Question

I'm using a third party package which im loading using next js dynamic:

const am5 = dynamic(() => import("@amcharts/amcharts5"), {ssr: false})

The amcharts5 that it's importing is a bunch of exports and imports

export { Root } from "./.internal/core/Root";
export { Theme } from "./.internal/core/Theme";
export { addLicense, registry, disposeAllRootElements } from "./.internal/core/Registry";
export { ready } from "./.internal/core/util/Utils";
...several other lines and some imports too

However when I run dev/build my application is falling over due to this line below.

let root = am5.Root.new('chart')

The error is

TypeError: Cannot read properties of undefined (reading 'new')

I assume I need to somehow import the Root dynamically too ? I've tried the following already but it didn't work.

const { Root }= dynamic(() =>
    import('@amcharts/amcharts5').then((mod) => mod),{ssr:false}
)

And also

const Root = dynamic(() =>
    import('@amcharts/amcharts5').then((mod) => mod.Root),{ssr:false}
)

For reference the package documents importing like this (though i need to dynamically import this)

import * as am5 from "@amcharts/amcharts5"

Any help appreciated! :)

Does this answer your question? Dynamically import abcjs in Next.js — juliomalves
– juliomalves, Commented Nov 17, 2021 at 23:13

Sam Gomena · Accepted Answer · 2021-11-17 20:13:40Z

2

tl;dr: Next dynamic(() => ...) imports can only be used to import React components not third-party modules. Instead, you should use a regular old dynamic import(...).

The longer version:

This is confusing (for me at least) as the docs don't outright state that you can't import modules with dynamic(...), only that it should be used to import components:

React components can also be imported using dynamic imports, but in this case, we use it in conjunction with next/dynamic to make sure it works just like any other React Component.

And indeed, looking at this comment from a Next maintainer you can't use dynamic(...) to import modules, only components.

So here's a somewhat general solution noting that you may need to modify based on how and where you're using the module in your app:

  useEffect(() => {
    (async () => {
      const am5 = await import("@amcharts/amcharts5");
      am5.Root.new("chart");
    })();
  }, []);

Perhaps also handy is the Next docs on dynamic imports

answered Nov 17, 2021 at 20:13

Sam Gomena

1,47914 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nevin Over a year ago

Does this actually build a separate chunk file?

Collectives™ on Stack Overflow

Nextjs dynamic import of multiple exports

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related