webpack serverエラー内容：
webpackを用いたコマンドで以下のようにエラーが出ました。
Errorの内容
Module build failed (from ./node_modules/file-loader/dist/cjs.js):
Error: error:0308010C:digital envelope routines::unsupported
略
webpack compiled with 7 errorsエラーが発生した環境
npmバージョン確認コマンド
npm -vNode.jsバージョン確認コマンド
node -vエラー原因のコマンド/コード
Webpackを使用して、開発サーバーを起動しています。
開発中にファイルの変更を監視し、ホットリロードでブラウザに変更を反映することが可能です。ここでは、webpack.dev.jsファイルの設定に基づいて起動しています。
webpack serve --config ./bundler/webpack.dev.jswebpack --config ./bundler/webpack.prod.jswebpack.dev.js
const path = require('path')
const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')
const ip = require('internal-ip')
const portFinderSync = require('portfinder-sync')
const infoColor = (_message) =>
{
return `\u001b[1m\u001b[34m${_message}\u001b[39m\u001b[22m`
}
module.exports = merge(
commonConfiguration,
{
stats: 'errors-warnings',
mode: 'development',
devServer:
{
host: 'local-ip',
port: portFinderSync.getPort(8080),
open: true,
https: false,
allowedHosts: 'all',
hot: false,
watchFiles: ['src/**', 'static/**'],
static:
{
watch: true,
directory: path.join(__dirname, '../static')
},
client:
{
logging: 'none',
overlay: true,
progress: false
},
onAfterSetupMiddleware: function(devServer)
{
const port = devServer.options.port
const https = devServer.options.https ? 's' : ''
const localIp = ip.v4.sync()
const domain1 = `http${https}://${localIp}:${port}`
const domain2 = `http${https}://localhost:${port}`
console.log(`Project running at:\n - ${infoColor(domain1)}\n - ${infoColor(domain2)}`)
}
}
}
)
const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = merge(
commonConfiguration,
{
mode: 'production',
plugins:
[
new CleanWebpackPlugin()
]
}
)
エラーの解決策
原因についは以下にNode.jsからの回答があります。
https://nodejs.org/en/blog/announcements/nodejs16-eol/
Node.js16から、Node.js17以降に切り替えると、OpenSSL 3.xに切り替わることで、動的リンクの際にエラーが出るようです。
Node.js16は、OpneSSL1.1.1のEOL（End of Life：製品のライフサイクルの終了）に合わせてサポート終了するので、Node.jsのバージョンを上げることによる互換エラーですね
そこで、以下のように「NODE_OPTIONS='--openssl-legacy-provider'」をくっつけることで、OpenSSL3.0のレガシーなプロバイダを有効とし、いったん対応できます。
NODE_OPTIONS='--openssl-legacy-provider' webpack serve --config ./bundler/webpack.dev.jsNODE_OPTIONS='--openssl-legacy-provider' webpack --config ./bundler/webpack.prod.jsNODE_OPTIONSに指定できるオプションの一覧は以下にあります。
「--openssl-legacy-provider」については以下のように説明があります。
さらに、OSSL_PROVIDER-legacyに以下のように記述があります。Enable OpenSSL 3.0 legacy provider when dynamically linking to OpenSSL 3.x. For more information please see OSSL_PROVIDER-legacy.
The OpenSSL legacy provider supplies OpenSSL implementations of algorithms that have been deemed legacy. Such algorithms have commonly fallen out of use, have been deemed insecure by the cryptography community, or something similar.
翻訳：
OpenSSL 3.x に動的にリンクする場合、OpenSSL 3.0 のレガシープロバイダを有効にします。詳細は OSSL_PROVIDER-legacy を参照してください。
OpenSSL レガシープロバイダは、レガシーとみなされたアルゴリズムの OpenSSL 実装を提供します。このようなアルゴリズムは、一般的に使われなくなったり、暗号コミュニティによって安全でないとみなされたり、あるいは似たようなものです。
参考：
https://qiita.com/akitkat/items/f455bbc088a408cbc3a5
https://zenn.dev/yogarasu/articles/425732ff408d06
