Nextjs动态导入多个导出

Question

我正在使用第三方 package，我正在使用下一个 js 动态加载：

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

供参考 package 文件像这样导入（虽然我需要动态导入这个）

import * as am5 from "@amcharts/amcharts5"

任何帮助表示赞赏：:)

Answer 1

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

更长的版本：

这令人困惑（至少对我而言），因为文档并没有完全说明 state不能使用dynamic(...)导入模块，只是它应该用于导入组件：

React 组件也可以使用动态导入来导入，但在这种情况下，我们将它与next/dynamic结合使用，以确保它像任何其他 React 组件一样工作。

事实上，从 Next 维护者那里看这个评论，你不能使用dynamic(...)来导入模块，只能使用组件。

所以这是一个有点通用的解决方案，注意您可能需要根据您在应用程序中使用模块的方式和位置进行修改：

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

也许也很方便的是关于动态导入的 Next 文档