3

スクリプトをロードする単純な関数があります。

const creditCardScript = (
  onReadyCB,
  onErrorCB,
) => {
  let script = document.createElement("script");
  script.type = "text/javascript";
  script.src = process.CREDIT_CARD_SCRIPT;
  document.head.appendChild(script);

  script.onload = function() {
    ...
  };
};

export default creditCardScript;

NextJS に移行する前は、次のスクリプトをインポートしていました: import creditCardScript from "./creditCardScript".

windowSine NextJS は Node でサーバー側のコンポーネントをレンダリングするため、 (ブラウザ固有の)への参照を含むコードが まで呼び出されないように注意する必要がありますcomponentDidMount。

NextJS は、動的インポート( react- loadable のラッパー) を提供することでこの問題を解決します。

  • 必要なときにのみコンポーネントをロードします。
  • クライアント側でのみコンポーネントをロードするオプションを提供します ( ssr: false)。

私は先に進み、動的インポートを実装しました:

const creditCardScript = dynamic(import("./creditCardScript"), { ssr: false });

でcomponentDidMount：

componentDidMount = () => {
  creditCardScript(
    this.onReadyCB,
    this.onErrorCB
  );
};

しかし、私はこれを得ています： Uncaught TypeError: Cannot call a class as a function

関数をクラスに変換し、コンストラクターを使用して を渡そうとしましたargsが、コードがサイレントに失敗するようになりました。

4

2 に答える 2

4

ニールがコメントで述べたように、私がする必要があるのは、次のようなことだけですcomponentDidMount:

const { default: creditCardScript } = await import("./creditCardScript");

公式チュートリアルへのリンク

于 2019-01-01T18:38:15.707 に答える
2

デフォルトのエクスポートはimport fromステートメントでのみ機能します。試すことができます

export creditCardScript;

そして、インポート時に、このように使用できます

const {creditCardScript} = dynamic(import("./creditCardScript"), { ssr: false });
于 2020-03-05T02:49:39.167 に答える