I use my wasm package in a next.js app. The wasm package is written in Rust and compiled by wasm-pack. Everything works very well when I start the app by npm run dev. However, when running npm run build, it throws an error about the target environment not supporting async/await. Below is the error detail and the content of next.config.ts. Thanks for any help.
error output:
> [email protected] build
> next build
▲ Next.js 15.3.4
✓ Linting and checking validity of types
Creating an optimized production build ...
⚠ Compiled with warnings in 8.0s
./src/wsdt/wsdt_bg.wasm
The generated code contains 'async/await' because this module is using "asyncWebAssembly".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.
Import trace for requested module:
./src/wsdt/wsdt_bg.wasm
./src/wsdt/wsdt.js
./src/providers/notifier/notifier.tsx
unhandledRejection [Error: ENOENT: no such file or directory, open '/home/wangjun/hobby/react/soul_dump/.next/server/static/wasm/7d24332e1592d207.wasm'] {
type: 'Error',
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/home/wangjun/hobby/react/soul_dump/.next/server/static/wasm/7d24332e1592d207.wasm'
}
next.config.ts:
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
reactStrictMode: true,
allowedDevOrigins: ["https://localhost:3000"],
i18n: {
defaultLocale: "en",
locales: ["en", "zh", "ja", "it", "fr", "de", "es", "pt"],
},
// Enable WebAssembly support
webpack: (config, { isServer }) => {
// Enable WebAssembly support
config.experiments = {
...config.experiments,
asyncWebAssembly: true,
topLevelAwait: true,
layers: true,
};
// Add WebAssembly loader
config.module.rules.push({
test: /\.wasm$/,
type: 'webassembly/async',
});
// Make sure fs module is not included in client-side bundle
if (!isServer) {
config.resolve.fallback = {
...(config.resolve.fallback || {}),
fs: false,
path: false,
};
}
return config;
},
// Configure proper MIME types for WebAssembly files
async headers() {
return [
{
source: '/(.*).wasm',
headers: [
{
key: 'Content-Type',
value: 'application/wasm',
},
{
key: 'Cache-Control',
value: 'public, max-age=31536000, immutable',
},
],
},
];
},
};
export default nextConfig;