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 文檔