Web Assembly doesn't start

[6LpUkQSgQm]

Hi,

Thanks for your job. I try to start my app with your template npx create-react-app my-app --template typescript-golang with yarn install && yarn start but i still have the message loading WebAssembly... Someone has the same ?

[royhadad]

For me to be able to help, I suggest you share some screenshots with us 😊

1. browser view
2. browser terminal
3. IDE terminal

[6LpUkQSgQm]

Ok, sorry

browser: Chromium Version 100.0.4896.127 IDE: VSCode v1.68.1

Browser view

Browser console

Uncaught (in promise) LinkError: WebAssembly.instantiate(): Import #5 module="go" function="runtime.walltime1" error: function import requires a callable

IDE terminal

yarn run v1.22.10
$ concurrently "npm run watch:ts" "npm run watch:wasm"
[1] npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1656269945669-0.9727914786755552/node but npm is using /usr/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
[1] 
[1] > react-app-typescript-golang@0.1.0 watch:wasm /home/test/Documents/APPS/react-app-typescript-golang
[1] > watch "npm run build:wasm" ./wasm
[1] 
[0] npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1656269945669-0.9727914786755552/node but npm is using /usr/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
[0] 
[0] > react-app-typescript-golang@0.1.0 watch:ts /home/test/Documents/APPS/react-app-typescript-golang
[0] > react-scripts start
[0] 
[1] > Watching ./wasm
[1] npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1656269945669-0.9727914786755552/node but npm is using /usr/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
[1] 
[1] > react-app-typescript-golang@0.1.0 build:wasm /home/test/Documents/APPS/react-app-typescript-golang
[1] > cd wasm && GOOS=js GOARCH=wasm go build -o ../public/main.wasm && cd .. && echo "\033[0;32mcompiled wasm successfully!\033[0m"
[1] 
[1] \033[0;32mcompiled wasm successfully!\033[0m
[0] (node:17746) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[0] (Use `node --trace-deprecation ...` to show where the warning was created)
[0] (node:17746) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[0] Starting the development server...
[0] 
[0] Compiled successfully!
[0] 
[0] You can now view react-app-typescript-golang in the browser.
[0] 
[0]   Local:            http://localhost:3000
[0]   On Your Network:  http://192.168.1.23:3000
[0] 
[0] Note that the development build is not optimized.
[0] To create a production build, use yarn build.
[0] 
[0] webpack compiled successfully
[0] Files successfully emitted, waiting for typecheck results...
[0] Issues checking in progress...
[0] No issues found.

[royhadad]

First things I will suggest are:

1. try using npm instead of yarn (I haven't tested it with yarn)
2. make sure that the go dependencies are installed (see if your IDE says something about the imports in the main.go file)

[6LpUkQSgQm]

I tried to install the dependencies and I have this output in my IDE terminal. I think i have an error with the syscallJs dependency.

-go version go1.16.15 linux/amd64

go get ./...

wasm imports
        syscall/js: no Go source files
package wasm
        imports syscall/js: build constraints exclude all Go files in /usr/lib/golang/src/syscall/js

[royhadad]

weird... all google search results show this error on build, not "go get" did you configure your VSCode to work with wasm?

link from Readme.md: https://egghead.io/lessons/go-configure-go-build-constraints-in-vs-code-to-work-with-webassembly