Importing wasm module no longer works with App Router #53163
Comments
|
This is a few months old, but it also tripped me up and I came across this issue... I don't think this is a bug. WebAssembly instantiation is supposed to be async. In a client component, you would probably want a dynamic import and React.lazy/suspense. I got your example working like this:
This is especially convenient for loading larger WASM modules. "use client";
import { useEffect } from "react";
import dynamic from "next/dynamic";
export default dynamic(
async function PageComponent() {
const { greet } = await import("../pkg");
return function PageComponentLoaded() {
useEffect(() => {
greet("User");
}, []);
return <p>Hello world</p>;
};
},
{
ssr: false,
loading: () => <p>Loading WASM...</p>
},
);Note. This will work in dev but
export default function PageComponent() {
useEffect(() => {
async function _greet() {
const { greet } = await import("../pkg");
greet("User");
}
_greet();
}, []);
return <p>Hello world</p>;
} |
|
This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. |
|
This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! |
Verify canary release
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 22.5.0: Thu Jun 8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000 Binaries: Node: 18.10.0 npm: 9.1.2 Yarn: 1.22.19 pnpm: 7.13.4 Relevant Packages: next: 13.4.13-canary.0 eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0 typescript: N/A Next.js Config: output: N/AWhich area(s) of Next.js are affected? (leave empty if unsure)
App Router
Link to the code that reproduces this issue or a replay of the bug
https://github.com/rossng/nextjs-app-router-wasm
To Reproduce
yarncargo build. This should install required Rust crates.yarn serve. This should build the wasm library and start a server at http://localhost:8080yarn dev. This starts the Next.js server on http://localhost:3000/Describe the Bug
You will see the following error printed in your terminal, and the page will fail to load with an Internal Server Error.
If you enable the
layersexperiment innext.config.js, you will see the following error in your browser instead:Expected Behavior
The page should load and the wasm library should execute correctly.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
The text was updated successfully, but these errors were encountered: