Question 1

Node.js 17 の webpack で “error:0308010C:digital envelope routines::unsupported” を修正するにはどうすればよいですか？

Accepted Answer

このエラーは、古いwebpackのバージョンがMD4ハッシュを使用しており、それがNode.js 17のOpenSSL 3によって無効化されているために発生します。webpackを5.61.0以降にアップグレードしてください: `npm install webpack@^5.61.0 --save-dev`、その後再ビルドします。一時的な回避策として、Node.js 16を使用する（`nvm use 16`）か、レガシーOpenSSLプロバイダーを有効にしてください: Linux/macOSでは `export NODE_OPTIONS=--openssl-legacy-provider` を実行; Windows CMDでは `set NODE_OPTIONS=--openssl-legacy-provider` を実行; PowerShellでは `$env:NODE_OPTIONS="--openssl-legacy-provider"` を実行。その後、ビルドを再度実行してください。

Question 2

webpack 5.111.1にアップグレードした後に発生するTerserの「DefaultsError: `as` is not a supported option」エラーを修正する方法

Accepted Answer

`minimizer-webpack-plugin` をバージョン 5.12.0 以降にアップグレードしてください。このリグレッションは 5.8.0 に存在していました。Yarn の場合は、次を実行します:

```bash
yarn up minimizer-webpack-plugin@^5.12.0
```

npm の場合:

```bash
npm install minimizer-webpack-plugin@^5.12.0 -D
```

その後、依存関係を再インストールしてリビルドします。`yarn why minimizer-webpack-plugin` または `npm ls minimizer-webpack-plugin` で解決されたバージョンを確認してください。5.8.0 から 5.12.0 に更新すると、HTML に埋め込まれた JavaScript をミニファイする際に Terser に渡される無効な `as: 'script'` オプションの問題が解決されます。

Question 3

processErrorsフックですべてのエラーを削除した後でも、webpack stats.hasErrors()がtrueを返すのはなぜですか？

Accepted Answer

これは webpack 5 のバグで、webpack 5.111.1 で再現確認されています。`Stats.hasErrors()` は `compilation.errors` を直接読み取るのに対し、`stats.toJson().errors` と `getErrors()` は `compilation.hooks.processErrors` ウォーターフォールフックを適用します。そのため、`processErrors` でエラーをフィルタリングすると、出力からはエラーが取り除かれますが、`hasErrors()` の結果は変わりません。

修正方法は、`hasWarnings()` と同様に、`hasErrors()` を `getErrors()` 経由にすることです。

```js
hasErrors() {
  return (
    this.compilation.getErrors().length > 0 ||
    this.compilation.children.some((child) => child.getStats().hasErrors())
  );
}
```

issue #22279 の修正を含むリリースに webpack をアップグレードしてください。それまでは、プラグインが `processErrors` を通じてエラーをフィルタリングする場合、`stats.hasErrors()` に依存しないでください。代わりに、処理済みのエラーリストを使用してください。

```js
function hasProcessedErrors(compilation) {
  return (
    compilation.getErrors().length > 0 ||
    compilation.children.some(hasProcessedErrors)
  );
}

const hasErrors = hasProcessedErrors(stats.compilation);
```

あるいは、`stats.toJson().errors.length` でレンダリング済みの stats 出力を確認する方法もあります。ビルドで子コンピレーションを使用している場合は、それらも考慮に入れてください。

Question 4

webpackのbrowserslistターゲットで、`safari 10`は`const`/`let`を未サポートと報告するのに、`safari 10.0`ではサポートされていると報告されるのはなぜですか？

Accepted Answer

これは webpack の `browserslistTargetHandler` におけるバグです（webpack 5.111.1 および `main` で確認済み）。`safari 10` のようにターゲットがメジャーバージョンのみを持つ場合、欠落したマイナーバージョンが `NaN` になります。メジャーバージョンの等値チェックでは `NaN >= 0` が `false` となるため、`[10, 0]` で初めてサポートされた機能が、誤ってサポートされていないと見なされます。

修正方法: 比較する前に、欠落したマイナーバージョンを `0` として扱います:

```js
const parserMinor = Number(parser.minor ?? 0);

if (
  Number(parserMajor) === requiredVersion[0] &&
  parserMinor >= requiredVersion[1]
) {
  // feature is supported
}
```

修正済みの webpack リリースが利用可能になるまで、webpack issue #22278 のアップストリームパッチを適用するか、`patch-package` を使用してください。一時的な回避策としては、`safari 10.0` のように可能な限り明示的なマイナーバージョンを使用してください。ただし、一部の Browserslist クエリでは、それがメジャーバージョンのみの形式に正規化され直す場合があります。

Question 5

experiments.cssでCSS @importを使用した際に発生するwebpackのクラッシュ「TypeError: Cannot read properties of null (reading 'userRequest')」を修正する方法

Accepted Answer

これはネイティブCSSモード（`experiments.css: true`）におけるwebpackのバグです。CSSルールで `parser: { exportType: "style" }` が使用され、`@import "./ignored.css"` の対象が（`IgnorePlugin` または `resolve.alias: { "...": false }` によって）無視されている場合、`moduleGraph.getModule(dep)` が null を返し、`CssGenerator._generateImportExpressions` が `depModule.userRequest` の読み取り時にクラッシュします。修正方法: 1) この修正を含むリリースにwebpackをアップグレードしてください（issue #22842 に対する PR で null チェックが追加されています）。2) 一時的なパッチ: `node_modules/webpack/lib/css/CssGenerator.js` 内の `_generateImportExpressions` において、`const depModule = moduleGraph.getModule(dep);` の直後に `if (!depModule) continue;` を追加します（永続化するには `patch-package` を使用してください）。3) 代替の回避策: そのCSSファイルの無視をやめます。そのスタイルシートに対する `IgnorePlugin` / `resolve.alias: false` のエントリを削除するか、可能であればルールを `exportType: "css-style-sheet"` / `"link"` に切り替えてください。このクラッシュは `exportType: "style"` の場合にのみ発生するためです。

webpack

概要

README プレビュー

FAQ (5)

同类型项目

hermes-agent

firecrawl

go

markitdown