如何使用create-react-library加载wasm模块？

问题描述

我试图使用使用Webassembly的create-react-library来创建反应库，但是，当项目运行时，出现以下错误。

Failed to compile.

/path/to/bar/pkg/bar_bg.wasm
Module parse Failed: magic header not detected
File was processed with these loaders:
 * ../node_modules/react-scripts/node_modules/file-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
Error: magic header not detected

我的设置如下：

1. 创建wasm Rust项目：

wasm-pack new bar

1. 向lib.rs添加一个简单函数：

use js_sys;
#[wasm_bindgen]
pub fn name() -> js_sys::Jsstring {
    "Nic".into()
}

1. 将js-sys作为依赖项添加到Cargo.toml：

[dependencies]
js-sys="0.3.45"

1. 构建wasm项目：

wasm-pack build

1. 创建一个反应库：

cd ..
create-react-library foo --skip-prompts --template typescript

1. 添加bar（wasm）作为foo（react lib）的依赖项：

  "dependencies": {
    "bar": "file:../bar/pkg"
  },

1. 将foo/src/index.tsx编辑为：

import * as React from 'react'
import styles from './styles.module.css'

import { name } from "bar";

interface Props {
  text: string
}

export const ExampleComponent = ({ text }: Props) => {
return <div className={styles.test}>Example Component:  ({name()}) {text}</div>
}

1. 在一个终端中：

cd foo && npm i && npm start

1. 在另一个终端中：

cd foo/example && npm i && npm start

此时会在顶部产生错误。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）