React SSR (from book) not working anymore

[tpmccallum]

I have created a new React App and am using the wasmedge quickjs docs to build another SSR demo.

When I run the App via WasmEdge like this.

wasmedge --dir .:. wasmedge_quickjs.wasm ./server-build/index.js

I get the following error

TypeError: not a function
    at <anonymous> (./server-build/index.js:7568)

The error is pointing to the following line in the machine generated index.js file that is located in the server-build dir

var u = new aa.TextEncoder();

[tpmccallum]

The above was encountered when bundling with rollup, so I went ahead and used babel & webpack bundling to see if that would help.

The same TextEncoder error came up, just different line numbers in the server-build/index.js file.

npm run dev:start-server

> react_ssr_blog@0.1.0 dev:start-server
> wasmedge --dir .:. wasmedge_quickjs.wasm ./server-build/index.js

ReferenceError: 'TextEncoder' is not defined
    at <anonymous> (<input>:149)
    at <eval> (<input>:6621)
    at ./node_modules/react-dom/cjs/react-dom-server.browser.development.js (./server-build/index.js:190)
    at __webpack_require__ (./server-build/index.js:380)
    at <eval> (<input>:7)
    at ./node_modules/react-dom/server.browser.js (./server-build/index.js:200)
    at __webpack_require__ (./server-build/index.js:380)
    at <eval> (<input>:4)
    at ./server/index.js (./server-build/index.js:270)
    at __webpack_require__ (./server-build/index.js:380)
    at <anonymous> (./server-build/index.js:456)

[DarumaDockerDev]

create-react-app now uses react@18 as default, and the error shows that maybe ReactDomServer in react-dom@18 uses TextEncoder API. But wasmedge_quickjs uses quickjs as the engine, so there is no TextEncoder API.

You can downgrade your react to version 17 then it will work.

[juntao]

We can also support TextEncoder and TextDecode in our QuickJS using Rust.

[juntao]

@tpmccallum Can you check the latest QuickJS update with PR #51 merged? It should fix the issues mentioned here.

[tpmccallum]

Hi @juntao and @L-jasmine We have just updated to the latest update with PR 51 merged

$ git show
commit ef3a0afd4c89c8723c5e921875a29f2c7eaef2bb (HEAD -> main, origin/main, origin/HEAD)
Merge: 1b2b4fa 9fb01cd
Author: Michael Yuan <michael@michaelyuan.com>
Date:   Fri May 13 23:09:17 2022 +0800
Merge pull request #51 from L-jasmine/main

Unfortunately, it appears that the error still persists.

$ npm run dev:start-server

> my-new-app@0.1.0 dev:start-server
> wasmedge --dir .:. wasmedge_quickjs.wasm ./server-build/index.js

TypeError: not a function
    at <anonymous> (./server-build/index.js:7573)

Please let me know if there is anything else I can provide to assist.

[tpmccallum]

Please note, the line number from the error 7573 contains the following line

var u = new aa.TextEncoder();

[L-jasmine]

pls use wasmedge --dir .:. --dir ./internal:{$your-wasmedge-quickjs-path}/internal wasmedge_quickjs.wasm ./server-build/index.js

[L-jasmine]

and remove builtins() from rollup.config.js

[tpmccallum]

Thanks @L-jasmine

These changes have been applied. Once updated we received the following new error.

$ npm run dev:build-server

> my-new-app@0.1.0 dev:build-server
> rollup -c rollup.config.js

./server/index.js → server-build/index.js...
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
stream (imported by stream?commonjs-external)
util (imported by util?commonjs-external)

I went ahead and updated the rollup.config.js file by adding stream and util to the module.exports as shown below.

    external: [ 'std', 'wasi_net','wasi_http', 'stream', 'util'],

The build was able to succeed without any error.

This means that we can move on to the start server command.

It seems to be throwing a new error, as shown below.

$ npm run dev:start-server

> my-new-app@0.1.0 dev:start-server
> wasmedge --dir .:. --dir ./internal:{$/home/tpmccallum/wasmedge-quickjs/target/wasm32-wasi/release}/internal wasmedge_quickjs.wasm ./server-build/index.js

[2022-05-14 14:37:46.363] [error] Bind guest directory failed:44
ReferenceError: could not load module filename 'stream'

[L-jasmine]

try wasmedge --dir .:. --dir ./internal:/home/tpmccallum/wasmedge-quickjs/internal wasmedge_quickjs.wasm ./server-build/index.js

[tpmccallum]

Thanks @L-jasmine It now works.