nextjs13 webpack5 使用wasm报错

最新推荐文章于 2025-09-18 02:38:57 发布

原创

最新推荐文章于 2025-09-18 02:38:57 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #wasm #rust #react #nextjs

本文介绍了解决Next.js项目中使用Rust编写的WebAssembly模块出现的错误的方法。通过在next.config.js中启用asyncWebAssembly和syncWebAssembly实验特性，可以成功加载WebAssembly模块。

问题描述：
在next 13, webpack 5, react 18的项目中使用Rust编写的wasm报错： 
./node_modules/image-map-path/image_map_path_bg.wasm
Module parse failed: Unexpected character '' (1:0)
The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack.
BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature.
You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated).
For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"').
(Source code omitted for this binary file)