Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make hello-wasm take and return a string, and try to call it
(Cleanup: remove hello-wasm-pack.) Instead of the alert() call from the wasm-pack template, make a `greeting` function that takes a string, prepends "Hello, " to it and returns the result. Add a build-wasm run-script to package.json that builds that wasm-pack project and modifies the resulting `package.json` to declare an ES module. Build that and yarn install/link it to get it into `node_modules`. ```sh npm run build-wasm cd hello-wasm/pkg yarn link cd ../.. yarn link hello-wasm ``` Try calling that in index.js: ```js import { greeting } from 'hello-wasm'; ... <p className={styles.description}> Greeting: <code className={styles.code}>{ greeting("Bob") }</code> </p> ``` Now wipe `.next` (in case of caching bugs) and `npm run dev`: ```sh rm -rf .next npm run dev ``` ... and that still fails: ``` event - build page: / wait - compiling... event - compiled successfully error - pages/index.js (22:51) @ Home TypeError: (0 , hello_wasm__WEBPACK_IMPORTED_MODULE_4__.greeting) is not a function 20 | <p className={styles.description}> 21 | Greeting: > 22 | <code className={styles.code}>{ greeting("Bob") }</code> | ^ 23 | </p> 24 | 25 | <div className={styles.grid}> ``` Node with WASM modules enabled is happy with this exact same module imported the same way: ```sh node --experimental-wasm-modules --input-type=module -e 'import { greeting } from "hello-wasm"; console.log(greeting("Bob"))' ``` Output: ``` (node:94434) ExperimentalWarning: Importing Web Assembly modules is an experimental feature. This feature could change at any time (Use `node --trace-warnings ...` to show where the warning was created) Hello, Bob ``` OK, so webpack dev build under Node.js does something broken. Let's try `npm run build`: ```sh rm -rf .next npm run build ``` That is also broken, but in a different (or at least different-looking) way: ``` > [email protected] build /Users/gthb/git/next-tries-to-do-wasm > next build info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5 warn - You have enabled experimental feature(s). warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk. info - Checking validity of types info - Creating an optimized production build info - Compiled successfully > Build error occurred [Error: ENOENT: no such file or directory, open '/Users/gthb/git/next-tries-to-do-wasm/.next/server/static/wasm/79bc335433f5dd372a8e.wasm'] { type: 'Error', errno: -2, code: 'ENOENT', syscall: 'open', path: '/Users/gthb/git/next-tries-to-do-wasm/.next/server/static/wasm/79bc335433f5dd372a8e.wasm' } ``` So why isn't the .wasm file at that path? Here are the actual .wasm locations under .next: ``` $ find .next -iname '*.wasm' .next/server/chunks/static/wasm/79bc335433f5dd372a8e.wasm .next/static/wasm/16652e044f15e87858b2.wasm ``` Note the extra `chunks/` in the server path! That presumably shouldn't be there.
- Loading branch information