web-dev-qa-db-ja.com

React JSサーバー側の問題-ウィンドウが見つかりません

こんにちは、reactJSプロジェクトでreact-rteを使用しようとしています。サーバー側のレンダリングがあり、このパッケージを使用するたびに次のようになります。

return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
                               ^
ReferenceError: window is not defined

Isomorphic-toolsに問題があるのではないかと思いますが、既にウィンドウが定義されているクライアントにパッケージをインポートするのを延期する方法がわかりません。

javascriptreactjswebpackserverside-renderingdraftjs
10
Jan Omacka

サーバー側のレンダリングを行っている場合、グローバルウィンドウオブジェクトが未定義になる可能性は十分にあります。これは、クライアントが理解できるものにすぎないためです。

注：最初は、プロジェクトを起動すると、DOMの完全な文字列がレンダリングされます（この時点では、サーバー側であるためwindowについてはわかりませんが、次に、ウィンドウオブジェクトを使用できるクライアント側コードで再レンダリングします！

この場合に使用している回避策があります。これは私が私のwebpackプラグインに持っているものです：

new webpack.DefinePlugin({
  'process.env.NODE_ENV': isDevelopment ? '"development"' : '"production"',
  'process.env.BROWSER': JSON.stringify(true),
  __DEV__: isDevelopment
}),

だから私はprocess.env.BROWSERは、サーバー側の場合はundefinedとして定義され、クライアント側のレンダリングが完了した場合はtrueになるため、有利です。

サーバー側にウィンドウオブジェクトがない場合、すべてが機能しなくなるため、これを追加できます。

const mySpecialWindowFunction = () => {

  /* START HACK */
  if (!process.env.BROWSER) {
    global.window = {}; // Temporarily define window for server-side
  }
  /* END HACK */

  return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
};

そうすれば、コンソールはあなたに悲鳴を上げることなく、サーバーサイドのレンダリングを停止することもありません。これで、輝かしい一日を続けることができます！私はこれが少しHackyであることを認めなければなりませんが、やりたいことはサーバー側に最初のDOM文字列をレンダリングさせてからクライアント側に以上。

注：ウィンドウを空のオブジェクトとして設定する必要はありません。クライアント側がレンダリングを完了すると、通常の状態に戻ります。

10
Tony Tai Nguyen

以下に、ウィンドウ、ドキュメント、およびグローバルオブジェクトを処理できるnpmライブラリを示します。 Global 。

その後、安全に書くことができます：

import window from 'global'

const mySpecialWindowFunction = () => {
    return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
};
10
Natrezim

サーバー側レンダリングを行う場合、window、documentなどのグローバルは未定義になります。そして、同型の方法でそれをしたい場合は、コンポーネントをレンダリングするときにどのような環境であるかをテストする必要があります。

https://github.com/DavidWells/isomorphic-react-example

多くのサンプルコードはgithubにあります。上記のリンクはそのうちの1つです。参考になることを願っています。

0
Littlee

グローバルインポートとして定数に設定してみました。

export const GLOBAL_WINDOW = (typeof self === 'object' && self.self === self && self) || (typeof global === 'object' && global.global === global && global) || this;

この場合、クライアントアプリケーションまたはサーバーで実行している天気に応じて、ウィンドウまたはグローバルオブジェクトを返します。

ここで、ウィンドウオブジェクトを使用する場所にこの定数をインポートする必要があります。

例：

import { GLOBAL_WINDOW } from '../constants/Constants';

const user = JSON.parse(GLOBAL_WINDOW.localStorage.getItem('user'));
0
Vinayak humberi