js.Build error with wasm file

support
1

Hello,

I am trying to deploy a webpage that depends on wasm code. I am loading the js through a shortcode

    {{ $js_2048 := resources.Get "js/solve2048/www/bootstrap.js" | js.Build }}

When I import the wasm package from a js file with

import * as wasm from '../pkg/solve2048';

I get the following error from JSBUILD

JSBUILD: failed to transform "js/solve2048/www/bootstrap.js" (text/javascript): e[1;36m"/Users/nathan/nathom.github.io/assets/js/solve2048/pkg/solve2048_bg.wasm:1:0"e[0m: Unexpected "\x00" 


---
`/Users/nathan/nathom.github.io/assets/js/solve2048/pkg/solve2048_bg.wasm:1:0:`


asm

Presumably it’s reading the wasm file as text/javascript instead of wasm. Any help is appreciated.

2

The error message is relatively clear, there is an unknown character in /Users/nathan/nathom.github.io/assets/js/solve2048/pkg/solve2048_bg.wasm. If you use VSCode there is a plugin that can help displaying special characters. Without knowing what is in your wasm file this is a black box.

js.Build is using esbuild under the hood though, and it looks like it needs a bit more to understand wasm. Maybe build that script outside of Hugo and then use the result in your pipeline?

3

Thanks! I was able to fix the issue by running esbuild manually on the project with these in loader.options in the build script

    loader: {
        '.js': 'jsx',
        '.wasm': 'file',
    },

I set the output dir to ./dist_es and modified the js include like so:

    {{ $js_2048 := resources.Get "js/solve2048/www/dist_es/bundle.js" }}
    <script src="{{ $js_2048.Permalink }}"></script>
1 Like