由于出现“初始化前无法访问'__wbindgen_throw'错误”，因此无法使用Web程序集rust impl

如何解决由于出现“初始化前无法访问'__wbindgen_throw'错误”，因此无法使用Web程序集rust impl

我正在尝试将一些Web程序集添加到我的项目中。首先，我创建了一个简单的方法来检查我的webpack是否运行良好，是否可以使用我的.wasm模块。所以我创建了这样的东西：

#[wasm_bindgen]
pub fn return_char() -> char {
    return 'a';
}

然后我在Web组件的内部构造函数中使用了这个（只是检查是否一切正常）：

constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = template;
    console.log(return_char());
}

这可以按预期工作，我在网络应用程序控制台中看到了'a'：

然后，当我看到一切正常时，我创建了具有实现的结构：

#[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';
    }
}

然后，我将创建的Test实例添加到相同的Web组件类构造函数中，并调用此Test impl的方法。我认为我应该在控制台中看到'a'和'b'

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());
}

但这没有发生，我只看到此错误：

未捕获（承诺）ReferenceError：无法在Module .__ wbindgen_throw（calculator_engine_bg.js：5）初始化之前访问'__wbindgen_throw'

我不知道为什么会收到此错误以及如何解决此错误。我的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,plugins: [
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname,'src/index.html'),filename: 'index.html',}),};

需要最少代码即可复制的GitHub存储库：webpack-web-assembly-rust-impl-bug

webpack版本：5.0.0-beta.26

解决方法

正如 sokra 在我创建的issue下的回答中提到的那样。我应该使用experiments.syncWebAssembly而不是experiments.asyncWebAssembly。如果我使用此experiments.syncWebAssembly，则必须添加将异步加载index.ts文件的其他文件。

webpack.config.js

module.exports = {
    mode: 'development',devtool: 'eval-source-map',entry: './src/bootstrap.ts',// !! <- change path to bootstrap.ts
    output: {
        filename: 'bundle.js',path: path.resolve(__dirname,'dist'),},experiments: {
        syncWebAssembly: true // !! <- use syncWebAssembly instead of asyncWebAssembly
    },module: {
        rules: [
            {
                test: /\.ts$/,use: 'ts-loader',include: [path.resolve(__dirname,'src')],],resolve: {
        extensions: ['.ts','.js'],devServer: {
        contentBase: path.join(__dirname,plugins: [
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname,'src/index.html'),filename: 'index.html',}),};

bootstrap.ts

import('./index').catch(e => console.error('Error importing `index.js`:',e))

完整的解决方案，您可以在这里找到：webpack-web-assembly-rust-impl-bug