Skip to content

Commit

Permalink
Make hello-wasm take and return a string, and try to call it
Browse files Browse the repository at this point in the history
(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
gthb committed Sep 24, 2021
1 parent 87391f9 commit 3828aa0
Show file tree
Hide file tree
Showing 4 changed files with 6 additions and 17 deletions.
9 changes: 2 additions & 7 deletions hello-wasm/src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,6 @@ use wasm_bindgen::prelude::*;
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

#[wasm_bindgen]
extern {
fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet() {
alert("Hello, hello-wasm!");
pub fn greeting(name: &str) -> String {
format!("Hello, {}", name)
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
"version": "0.1.0",
"private": true,
"scripts": {
"build-wasm": "wasm-pack build hello-wasm ; jq '. + {type: \"module\", main: .module} | del(.module)' hello-wasm/pkg/package.json | sponge hello-wasm/pkg/package.json",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"hello-wasm-pack": "^0.1.0",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2"
Expand Down
7 changes: 3 additions & 4 deletions pages/index.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { greet } from 'hello-wasm-pack';
import { greeting } from 'hello-wasm';

export default function Home() {
greet();
return (
<div className={styles.container}>
<Head>
Expand All @@ -19,8 +18,8 @@ export default function Home() {
</h1>

<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
Greeting:
<code className={styles.code}>{ greeting("Bob") }</code>
</p>

<div className={styles.grid}>
Expand Down
5 changes: 0 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1484,11 +1484,6 @@ [email protected]:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

hello-wasm-pack@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/hello-wasm-pack/-/hello-wasm-pack-0.1.0.tgz#482a2e3371828056ac35f5b5fec76c0b99dcd530"
integrity sha512-3hx0GDkDLf/a9ThCMV2qG4mwza8N/MCtm8aeFFc/cdBCL2zMJ1kW1wjNl7xPqD1lz8Yl5+uhnc/cpui4dLwz/w==

hmac-drbg@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
Expand Down

0 comments on commit 3828aa0

Please sign in to comment.