由于“初始化前无法访问‘__wbindgen_throw’"错误，无法使用 web-assembly rust impl [英] Can not use web-assembly rust impl because of 'Cannot access '__wbindgen_throw' before initialization' error

问题描述

我正在尝试向我的项目添加一些网络程序集.一开始我创建了一个简单的方法来检查我的 webpack 是否运行良好，我可以使用我的 .wasm 模块.所以我创建了这样的东西:

I am trying to add some web-assembly to my project. On the beginning I created a simple method to check is my webpack works well and can I use my .wasm modules. So I created somthing like this:

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

然后我在我的 web 组件的构造函数中使用了它(只是为了检查一切是否正常):

And then I used this inside constructor of my web-component (just to check is everything works fine):

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

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

This worked as expected I saw 'a' in my web-app console:

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

Then when I saw that everything works fine I created 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';
    }
}

然后我在同一个 web 组件类构造函数中添加创建的 Test 实例并调用这个 Test impl 的方法.我想我应该在控制台中看到 'a' 和 'b'

Then I add created instance of Test inside the same web-component class constructor and call methods of this Test impl. I thought that I should see '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());
}

但这并没有发生，我只看到了这个错误:

But this didn't happen and I saw only this error:

未捕获(承诺)ReferenceError:在 Module.__wbindgen_throw (calculator_engine_bg.js:5) 处初始化之前无法访问__wbindgen_throw"

Uncaught (in promise) ReferenceError: Cannot access '__wbindgen_throw' before initialization at Module.__wbindgen_throw (calculator_engine_bg.js:5)

我不知道为什么会出现此错误以及如何解决此问题.也许我的 webpack.config.js 有问题?

I do not know why I am getting this error and how can I fix this. Maybe there is a problem 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 存储库，复制所需的代码最少:webpack-web-程序集-rust-impl-bug

GitHub repository with minimal code needed to reproduce: webpack-web-assembly-rust-impl-bug

webpack 版本:5.0.0-beta.26

webpack version: 5.0.0-beta.26

推荐答案

正如 sokra 在 issue 是我创建的.我应该使用 experiments.syncWebAssembly 而不是 experiments.asyncWebAssembly.如果我使用这个 experiments.syncWebAssembly 我必须添加额外的文件来异步加载 index.ts 文件.

So as sokra mentioned in his answer under issue which I created. I should use experiments.syncWebAssembly instead of experiments.asyncWebAssembly. If I use this experiments.syncWebAssembly I have to add additional file which will asynchronously load index.ts file.

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, 'dist'),
    },
    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

Full solution you can find here:: webpack-web-assembly-rust-impl-bug

这篇关于由于“初始化前无法访问‘__wbindgen_throw’"错误，无法使用 web-assembly rust impl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！