Next.js + Babelを使用してグローバル(ウィンドウ)ナビゲーターをポリフィルまたはモックする方法は?

neaumusic

ノードのサーバー側レンダリング環境に存在しないnode_moduleグローバルを見つけることを期待しているサードパーティを使用しnavigator.useragentています。

一般的に、私たち自身のパッケージではimport { window } from '../utils/globals'window機能を使用している場合ですが、これを編集することはできませんnode_module

window.navigatorこの特定のパッケージ(またはすべてのパッケージ)を自動的に提供する方法がわかりません。Webpackを使用しているようには見えませんが、yarn / next / babelを使用しているようです。

コンパイル/トランスパイルプロセス中にグローバル変数を作成するにはどうすればよいですか?

neaumusic

解決策は、_app.jsxクラス定義の前にグローバル/コンテキスト変数を作成することでした

import App, { Container } from 'next/app';
if (typeof global.navigator === 'undefined') global.navigator = {};
// const navigator = {};

class MyApp extends App {
    // ...
}

問題のあるパッケージをインポートする場所に追加しようとしましたが、うまくいきませんでした。サーバー側/クライアント側のレンダリングハンドオフの詳細についてはよくわかりません。おそらく、状況を処理するためのより洗練された、調整された方法があります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

next.jsアプリでグーグルアナリティクスを使用する方法は?

分類Dev

サーバー側は、ReactでNext.jsを使用してグローバルコンポーネントをロードします

分類Dev

Next Jsアプリケーションのビルド(出力)ディレクトリを実行する方法は?

分類Dev

Next.jsの文字列としてマークダウンファイルをインポートします

分類Dev

Reactフックなどを使用してコンポーネント(ポップアップモーダル)を1回だけ表示する方法(React / Next js)

分類Dev

vue.jsの単一ファイルコンポーネントをバックグラウンドでロードしたままにする方法は?

分類Dev

CSSモジュールを使用してnext.jsの純粋な要素をターゲットにする

分類Dev

Vue.jsを使用してモーダルが閉じられている場合に、モーダルウィンドウのデータをデフォルトにリセットする正しい方法はありますか?

分類Dev

コンポーネントを配置する場所は、next.jsファイルにマウントされました

分類Dev

Next.jsルーターでbeforePopStateバインディングのバインドを解除するにはどうすればよいですか?

分類Dev

next.jsでフクロウカルーセル2を使用し、反応します

分類Dev

Next.jsでルートがアクティブな場合にアクティブリンクをターゲットにする

分類Dev

Next.jsのサーバーファイルのカスタムディレクトリを設定する

分類Dev

ReactJS / Next.js:CRAプロキシがNext.jsで機能しない(APIリクエストをExpressサーバーにルーティングしようとしています)

分類Dev

Next.jsグローバルCSSは、カスタム<App>以外のファイルからインポートすることはできません。

分類Dev

エラーTypeError:resolveはSafeSubscriber._next(vendor.js:139806)の関数ではありません-Angular 7:サイドナビゲーションでのルーティングが機能していません

分類Dev

ReactまたはNext.jsはクラスプロパティを内部的にクリーンアップしますか?

分類Dev

jQuery、JS、またはPHPを使用してディレクトリ内のすべてのファイルをダウンロードしますか?

分類Dev

Next.jsすべてのコンポーネントのグローバルデータを取得して維持する

分類Dev

Next js next / linkの<Link>をクリックすると、_app.jsでエラーが発生しました。データフェッチについて

分類Dev

Next.jsインデックスルートは404を返します

分類Dev

ノックアウト.jsを使用したフィルターのバインドに関する問題

分類Dev

フクロウカルーセルでjQuery / jsカウンターを使用して、ナビゲーションに2桁の数字を表示する

分類Dev

Next.jsサイトのJavaScriptを使用してContentfulの投稿をフィルタリングするためのヘルプが必要

分類Dev

Next.jsで、ブラウザウィンドウ全体をカバーするbgイメージを作成する方法

分類Dev

Next.jsリンクはページを更新します

分類Dev

バックボーンjsを使用してファイルをダウンロードした後、他のビューにリダイレクトする方法は?

分類Dev

_app.js(Next.js)内で宣言されたグローバルcssファイルからcssクラスを使用する方法

分類Dev

Next.jsでサポートされていないCSSプロパティを処理する方法、またはChakra-UIで@supportsディレクティブを使用する方法

Related 関連記事

  1. 1

    next.jsアプリでグーグルアナリティクスを使用する方法は?

  2. 2

    サーバー側は、ReactでNext.jsを使用してグローバルコンポーネントをロードします

  3. 3

    Next Jsアプリケーションのビルド(出力)ディレクトリを実行する方法は?

  4. 4

    Next.jsの文字列としてマークダウンファイルをインポートします

  5. 5

    Reactフックなどを使用してコンポーネント(ポップアップモーダル)を1回だけ表示する方法(React / Next js)

  6. 6

    vue.jsの単一ファイルコンポーネントをバックグラウンドでロードしたままにする方法は?

  7. 7

    CSSモジュールを使用してnext.jsの純粋な要素をターゲットにする

  8. 8

    Vue.jsを使用してモーダルが閉じられている場合に、モーダルウィンドウのデータをデフォルトにリセットする正しい方法はありますか?

  9. 9

    コンポーネントを配置する場所は、next.jsファイルにマウントされました

  10. 10

    Next.jsルーターでbeforePopStateバインディングのバインドを解除するにはどうすればよいですか?

  11. 11

    next.jsでフクロウカルーセル2を使用し、反応します

  12. 12

    Next.jsでルートがアクティブな場合にアクティブリンクをターゲットにする

  13. 13

    Next.jsのサーバーファイルのカスタムディレクトリを設定する

  14. 14

    ReactJS / Next.js:CRAプロキシがNext.jsで機能しない(APIリクエストをExpressサーバーにルーティングしようとしています)

  15. 15

    Next.jsグローバルCSSは、カスタム<App>以外のファイルからインポートすることはできません。

  16. 16

    エラーTypeError:resolveはSafeSubscriber._next(vendor.js:139806)の関数ではありません-Angular 7:サイドナビゲーションでのルーティングが機能していません

  17. 17

    ReactまたはNext.jsはクラスプロパティを内部的にクリーンアップしますか?

  18. 18

    jQuery、JS、またはPHPを使用してディレクトリ内のすべてのファイルをダウンロードしますか?

  19. 19

    Next.jsすべてのコンポーネントのグローバルデータを取得して維持する

  20. 20

    Next js next / linkの<Link>をクリックすると、_app.jsでエラーが発生しました。データフェッチについて

  21. 21

    Next.jsインデックスルートは404を返します

  22. 22

    ノックアウト.jsを使用したフィルターのバインドに関する問題

  23. 23

    フクロウカルーセルでjQuery / jsカウンターを使用して、ナビゲーションに2桁の数字を表示する

  24. 24

    Next.jsサイトのJavaScriptを使用してContentfulの投稿をフィルタリングするためのヘルプが必要

  25. 25

    Next.jsで、ブラウザウィンドウ全体をカバーするbgイメージを作成する方法

  26. 26

    Next.jsリンクはページを更新します

  27. 27

    バックボーンjsを使用してファイルをダウンロードした後、他のビューにリダイレクトする方法は?

  28. 28

    _app.js(Next.js)内で宣言されたグローバルcssファイルからcssクラスを使用する方法

  29. 29

    Next.jsでサポートされていないCSSプロパティを処理する方法、またはChakra-UIで@supportsディレクティブを使用する方法

ホットタグ

アーカイブ