next.config.mjs中WebAssembly配置失效，yarn build编译报错求助

你在迁移到MDX2和mdx-embed后执行yarn build时，Webpack无法识别Next.js配置中的WebAssembly设置，导致Wasm文件编译失败。这是因为Webpack 5默认关闭了WebAssembly支持，需要手动开启实验特性并配置模块规则。

具体修复步骤： #

1. 更新next.config.mjs配置
   在你的next.config.mjs中添加WebAssembly相关的实验特性和Webpack规则：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     // 开启异步WebAssembly支持（Webpack 5推荐方式）
     experimental: {
       asyncWebAssembly: true,
     },
     webpack(config) {
       // 让Webpack正确识别Wasm文件类型
       config.module.rules.push({
         test: /\.wasm$/,
         type: 'webassembly/async',
       });
       // 将.wasm加入解析扩展名列表
       config.resolve.extensions.push('.wasm');
       return config;
     },
     // 保留你已有的MDX2等其他配置
   };
   
   export default nextConfig;
   

2. 调整Wasm导入方式
   确保你的代码使用异步方式加载Wasm模块（因为asyncWebAssembly要求异步加载），比如在Search.tsx或相关组件中修改导入逻辑：

   // 替换原同步导入为异步动态加载
   const initSearchWasm = async () => {
     const wasmModule = await import('../../wasm/fulltext-search/pkg/fulltext_search_core.js');
     await wasmModule.default();
     // 这里可以初始化搜索功能
   };
   
   // 在组件挂载时调用初始化函数
   useEffect(() => {
     initSearchWasm();
   }, []);
   

3. 清理缓存重新构建
   执行以下命令清理缓存和旧构建文件，避免缓存干扰：

   yarn cache clean
   rm -rf .next
   yarn build
   

说明： #

• asyncWebAssembly是Webpack 5推荐的Wasm启用方式，syncWebAssembly已被废弃，不建议使用。
• Webpack规则中设置type: 'webassembly/async'，让Webpack正确处理Wasm文件，而不是当作普通二进制文件解析。

内容的提问来源于stack exchange，提问作者Hany Morcos