web-dev-qa-db-ja.com

Webpack-チャンク0の読み込みに失敗しました

私のユーザーの何人かはこのエラーを受け取っています：

未処理の拒否メッセージ：「チャンク0の読み込みに失敗しました」スタック：HTMLScriptElement.nでチャンク0の読み込みに失敗しました

問題は、それを再現することに成功していないことです。そして、私はしばらくの間このエラーを経験しました。

同じユーザーに発生しますeveryユーザーがWebサイトに入る時間。しかし、それらの一部にのみ。しかし、それらはすべてWin7 + Chrome 60を使用しているため、ブラウザとは関係ありません。

この特定のエラーに関してウェブ上で何かを見つけることができませんでした。さらに、反応ルーターを使用していませんが、反応を使用しています。

他に何が間違っている可能性がありますか？

何らかのセキュリティに関連する何かが原因である可能性はありますか？

webpack 2.6.1およびCommonsChunkPluginを使用して、ベンダーのチャンクを作成しています。

エラーが発生したユーザーの1人のユーザーエージェント：

Mozilla/5.0（Windo 6.1ws NT 6.1; Win64; x6­4）AppleWebKit/537.36（KHTML、Geckoなど）Chrome/60.0.3112.113 Safari/537.36

javascriptreactjswebpackecmascript-6
12
jony89

これは、require.ensureをチャンクを作成するwebpackで使用し、jsonpを使用してこのスクリプトをオンデマンドで追加したためです。つまり、作成されたチャンクファイルでhtmlにスクリプトsrcタグを追加している。

一部のユーザーは、同じドメインであるかどうかに関係なく、そのようなjsonpリクエストをブロックする拡張機能や設定さえ持っているようです。

1つの解決策は、明らかにrequire.ensureをまったく使用しないか、このシナリオを処理するためにエラーコールバックを使用することです。

さらに、webpackがxhr + evalを使用してスクリプトをロードする方法を探していました。これにより、このようなシナリオを防ぐことができます。私はちょうどこのnpmモジュールを見つけました： https://github.com/elliottsj/xhr-eval-chunk-webpack-plugin 、それでも私はそれを期待していましたwebpack自体でさらにサポートされます。

私はこの問題をオープンしました： https://github.com/webpack/webpack/issues/5630 。

3
jony89

グーグルからの検索に対する回答：

私の場合 Error: Loading chunk 9 failed.はFirefoxでのみ発生します。正規表現の正規表現によるもの。 (?<=...)

この機能はすべてのブラウザでまだサポートされていないことに注意してください。あなた自身の裁量で使用してください！

1
Альбэр Местовый

問題の原因は次のとおりです。

  • 不安定なインターネット接続
  • 間違った/不正なブラウザキャッシュ

私が見つけた唯一の解決策は、このWebpackプラグインでチャンクロードを再試行することです。 https://github.com/mattlewis92/webpack-retry-chunk-load-plugin

そうなる：

  • 1秒間に1回、チャンクのロードを再試行します。
  • キャッシュされたJSファイル（おそらく不正な形式）を避けるために?cache-bust=Xクエリを追加します。

マイナス面は-それは無期限につながります。

0
Vasyl Boroviak

チャンクファイル（jsファイル）をロードするパスを確認してください。 angular.jsonファイルのdeployURLのパスを確認してください。

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "./Scripts/app",
      "deployUrl": "./Scripts/app/",
      "index": "app/index.html",
      "main": "app/main.ts",
      "polyfills": "app/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "aot": false,
      "assets": [
        "app/favicon.ico",
        "app/assets"
      ],
0
swapnil Bhoir