web-dev-qa-db-ja.com

動的インポートNode Next.jsを使用したモジュール

React-leafletノードモジュールを使用すると、ウィンドウが未定義であり、SSRがウィンドウをサポートしていないため、エラーが発生しました。 next/dynamicを見つけましたが、見つけたすべての例は、ノードモジュールではなくコンポーネントをインポートする方法を示しています。ノードモジュールを含めることは可能ですか？例として、これは私がインポートしているもので、ウィンドウに未定義のエラーimport { Map, TileLayer, Marker } from 'react-leaflet';を与えています

javascriptnext.js
4
Seldon Stone

問題は、next.jsダイナミック importが名前付きエクスポートで失敗することです

react-leaflet のソースコードを見ると、名前付きの各エクスポートに特定のファイルからアクセスできることがわかります。 import Map from 'react-leaflet/lib/Map'

SSRなしのダイナミックインポートと組み合わせます

const Map = dynamic(() => import('react-leaflet/lib/Map'), {
  ssr: false
});

これはあなたのためのトリックをする必要があります。

7
iurii

そのエラーは、コンポーネントでその依存関係のコンポーネント（Map、TileLayer、Marker）を呼び出すときに発生しました。

ウィンドウオブジェクトがブラウザに属しているため、アプリケーションがサーバー側でレンダリングされているときに未定義のウィンドウが発生しました。

サーバー側でのwindow of undefinedのエラーを回避するには、コンポーネントでprocess.browserを使用できます。

ref： https://github.com/zeit/next.js/issues/2473?#issuecomment-362119102

0
Darryl RN