Looking to integrate some web-assembly into my project, I started off by testing if my webpack setup was functioning properly and able to utilize my .wasm modules. Here's a snippet of what I came up with:
#[wasm_bindgen]
pub fn return_char() -> char {
return 'a';
}
I then integrated this into the constructor of my web-component (just to confirm everything was running smoothly):
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = template;
console.log(return_char());
}
As expected, I saw 'a' in my web-app console:
https://i.sstatic.net/g6Fm1.png
Satisfied with the results, I went on to create a struct with implementation:
#[wasm_bindgen]
pub struct Test {
value: char
}
#[wasm_bindgen]
impl Test {
pub fn new() -> Test {
let value: char = 'a';
Test {
value
}
}
pub fn value(&self) -> char {
self.value
}
pub fn change_value(&mut self) {
self.value = 'b';
}
}
Next, I instantiated the Test object within the same web-component class constructor and called methods from this implementation. I anticipated seeing both 'a' and 'b' in my console:
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = template;
const test: Test = Test.new();
console.log(test.value());
test.change_value();
console.log(test.value());
}
However, things didn't go as planned and I encountered the following error:
Uncaught (in promise) ReferenceError: Cannot access '__wbindgen_throw' before initialization at Module.__wbindgen_throw (calculator_engine_bg.js:5)
I'm unsure why this error is occurring or how to resolve it. Could there be an issue with my webpack.config.js?
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
entry: './src/index.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
experiments: {
asyncWebAssembly: true
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
include: [path.resolve(__dirname, 'src')],
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
},
plugins: [
new HTMLWebpackPlugin({
template: path.resolve(__dirname, 'src/index.html'),
filename: 'index.html',
}),
],
};
GitHub repository containing minimal code for reproduction: webpack-web-assembly-rust-impl-bug
webpack version: 5.0.0-beta.26