1. ホーム
  2. webpack

Critical dependencyの解決方法:依存関係のリクエストは式?

2022-02-12 15:25:57

Wakeyバックエンドを使用する際、以下のエラーが発生する場合があります。

ヒントを元に、主に問題を引き起こしているのは以下のコードであることがわかります。

export const loadView = (view) => { // routed lazy loading
  return () => import(`@/views/${view}`)
}


グローバル検索 node_modules が原因であることがわかります。 webpack  は、その  lib/dependencies/ContextDependencyHelpers.js  最初の 224 行で報告された警告です。

その後、警告が公式で報告される issues の問題は、公式の

ただ、公式の解決策はないようなので(というか、見つけられなかった)、もしかしたら公式が納得していないのかもしれません。 import(`@/views/${view}`) このような輸入の仕方があるのですね。

また、別の方法で導入する方法もあります、例えば。

export const loadView = (view) => { // route lazy loading
  return () => Promise.resolve(require(`@/views/${view}`).default)
}


これにより、コンポーネントは非同期にロードされ webpack という例外が報告されます。 terminal はずっと快適に見えます。

webpack のバージョンの問題で、webpack4 の dynamic import は変数のアプローチに対応していません。

この変更は本番環境には影響せず、開発環境のみに影響します。