Nextjs动态导入多个导出

Question

我使用的是一个第三方包，它使用next js dynamic加载：

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

它正在导入的amcharts5是一堆导出和导入

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

但是，当我运行dev/build时，我的应用程序会因为下面这行代码而崩溃。

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

错误是

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

我想我也需要以某种方式动态导入Root？我已经尝试了下面的方法，但不起作用。

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

而且还

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

作为参考，像这样导入包文档(尽管我需要动态导入)

import * as am5 from "@amcharts/amcharts5"

感谢您的帮助！:)

Answer 1

tl;dr：Next dynamic(() => ...)导入只能用于导入React组件，而不能导入第三方模块。相反，您应该使用常规的旧dynamic import(...)。

较长版本的

这令人困惑(至少对我来说是这样)，因为文档中并没有明确说明不能使用dynamic(...)导入模块，而只是说明应该使用它来导入组件：

也可以使用动态导入来导入

React组件，但在本例中，我们将其与next/dynamic结合使用，以确保它与任何其他React组件一样工作。

实际上，从下一位维护者的角度来看this comment，您不能使用dynamic(...)来导入模块，而只能导入组件。

因此，这里有一个比较通用的解决方案，请注意，您可能需要根据在应用程序中使用模块的方式和位置进行修改：

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

也许Next docs on dynamic imports也很方便。