如何解决如何使用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
我的设置如下:
- 创建wasm Rust项目:
wasm-pack new bar
- 向
lib.rs
添加一个简单函数:
use js_sys;
#[wasm_bindgen]
pub fn name() -> js_sys::JsString {
"Nic".into()
}
- 将js-sys作为依赖项添加到
Cargo.toml
:
[dependencies]
js-sys="0.3.45"
- 构建wasm项目:
wasm-pack build
- 创建一个反应库:
cd ..
create-react-library foo --skip-prompts --template typescript
- 添加bar(wasm)作为foo(react lib)的依赖项:
"dependencies": {
"bar": "file:../bar/pkg"
},
- 将
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>
}
- 在一个终端中:
cd foo && npm i && npm start
- 在另一个终端中:
cd foo/example && npm i && npm start
此时会在顶部产生错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。