解決 Rust WebAssembly 啟動 Web 程式報錯

Atypiape2發表於2024-08-26
RustWeb

當你艱難入門 Rust ，並滿懷鬥志準備投身 WebAssembly，第一課也許會先給你潑盆涼水。

跟隨 《Rust 🦀 和 WebAssembly》 文件的指引，一路 install、coding、build，終於來到 Web 的啟動：

npm run start

然而，現在是 2024 年，你電腦上 Node 版本已經 >= 18，結果就是，你收到了報錯：

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports 
    ...
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'

報錯的原因： 你電腦上 Node 版本為 17+（使用 OpenSSL 3.0），但 node_modules 中模組的演算法已經不受 OpenSSL 3.0 支援。

解決的辦法：

  1. 降級 Node 版本
  2. Node 啟用 OpenSSL 3.0 舊版提供程式
  3. Webpack 升級到 5.54.0+

一個個來看：

1. 降級 Node 版本

如果你已經安裝了 Node 版本管理器 NVM，很方便就可以切換到 v16 版本，否則可以先去安裝 NVM (國內源)。

# 如果你還沒安裝過
nvm install v16.20.2

# 切換到 16 版本
nvm use 16

2. Node 啟用 OpenSSL 3.0 舊版提供程式

需要使用 openssl-legacy-provider 標識 （Node17 新增，參見文件：https://nodejs.cn/api-v18/cli/openssl_legacy_provider.html ）告訴 Node，我們不想使用更嚴格的演算法和金鑰大小限制。

在 Mac/Linux 上，可以直接執行：

NODE_OPTIONS='--openssl-legacy-provider' npm run start

或修改一下 package.json：

"scripts": {
  "start": "export NODE_OPTIONS=--openssl-legacy-provider && npm run start",
  ...
}

另一種方式是在 ~/.zsrch、~/.bashrc 中新增一句：

export NODE_OPTIONS=--openssl-legacy-provider

如果是 Windows，則按以下方式設定環境變數：

set NODE_OPTIONS=--openssl-legacy-provider

3. Webpack 升級到 5.54.0+

Webpack v5.54.0+，它帶有一個不依賴 OpenSSL 的雜湊演算法。

咱們這裡乾脆全升級到最新版本：

npm install --force webpack@latest webpack-cli@latest webpack-dev-server@latest copy-webpack-plugin@latest

然後修改一下 webpack.config.js：

module.exports = {
  ...
  plugins: [
    // copy-webpack-plugin 入參改成這樣：
    new CopyWebpackPlugin({
      patterns: [
        { from: "index.html" },
      ]
    })
  ],
  // 新增下面這段，支援 WebAssembly 打包
  experiments: {
    asyncWebAssembly: true,
    syncWebAssembly: true
  },
};

好了，再次啟動工程試試！

相關文章