teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

webpack.config.jsをwebpack.config.jsonと間違って記載していたので修正しました。

2020/11/14 04:02

投稿

gomigorou
gomigorou

スコア7

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  [mediainfo.js](https://github.com/buzz/mediainfo.js)というnpmパッケージを、React.jsで使用しようとしております。
2
2
 
3
3
  [https://github.com/buzz/mediainfo.js](https://github.com/buzz/mediainfo.js)
4
- 上記サイトのReact.jsでの使用例をみると、webpack.config.jsonにて設定しています。
4
+ 上記サイトのReact.jsでの使用例をみると、webpack.config.jsにて設定しています。
5
5
  ですが、create-react-appを用いて環境構築すると、それが内部にラップされ、ejectしないと編集できない様です。
6
6
 
7
7
  react-app-rewiredというnpmパッケージを用いると、ejectしなくてもwebpack.configを編集できるとの事なので、やってみました。

2

記載を全体的に変更しました。

2020/11/14 04:02

投稿

gomigorou
gomigorou

スコア7

title CHANGED
File without changes
body CHANGED
@@ -1,23 +1,51 @@
1
- [mediainfo.js](https://github.com/buzz/mediainfo.js)というnpmを、React.jsで使用しようとしております。
1
+ [mediainfo.js](https://github.com/buzz/mediainfo.js)というnpmパッケージを、React.jsで使用しようとしております。
2
2
 
3
3
  [https://github.com/buzz/mediainfo.js](https://github.com/buzz/mediainfo.js)
4
4
  上記サイトのReact.jsでの使用例をみると、webpack.config.jsonにて設定しています。
5
5
  ですが、create-react-appを用いて環境構築すると、それが内部にラップされ、ejectしないと編集できない様です。
6
6
 
7
- ejectしなくても、react-app-rewiredというnpmを用いてwebpack.config.json上書きできるとの事なので、やってみました。
7
+ react-app-rewiredというnpmパッケージを用いると、ejectしなくwebpack.configを編集できるとの事なので、やってみました。
8
- 下記サイトなどを参考にしました。
9
- [https://github.com/reedyrm/react-wasm-migration](https://github.com/reedyrm/react-wasm-migration)
10
- [Using WebAssembly in your ReactJS App | KOALA42](https://koala42.com/using-webassembly-in-your-reactjs-app/)
11
8
 
12
- 作成したものがこちらです。
9
+ ```
13
- [ottonove/test_mediainfo](https://github.com/ottonove/test_mediainfo)
10
+ // config-override.js (webpack.config.jsを上書きするもの)
14
11
 
12
+ const { resolve } = require('path');
13
+ const CopyPlugin = require('copy-webpack-plugin');
14
+
15
+ const wasmFile = resolve(
16
+ __dirname,
17
+ 'node_modules',
18
+ 'mediainfo.js',
19
+ 'dist'
20
+ );
21
+ const dist = resolve('build', 'static', 'js');
22
+
23
+ // template from https://www.npmjs.com/package/react-app-rewired
24
+ module.exports = {
25
+ webpack: function(config, env) {
26
+ config.plugins.push(new CopyPlugin({
27
+ patterns: [
28
+ { from: wasmFile, to: dist },
29
+ ],
15
- 実行すると、
30
+ }),)
31
+ return config;
32
+ },
33
+ }
16
34
  ```
35
+
36
+ こちらがプロジェクト全体です。
37
+ [https://github.com/ottonove/test_mediainfo](https://github.com/ottonove/test_mediainfo)
38
+
39
+ "npm run build"で生成されたものは正常に動作するのですが、"npm run start"で動作させると、下記のエラーとなります。
40
+ ```
17
41
  Unhandled Rejection (RuntimeError): abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -s ASSERTIONS=1 for more info.
18
42
  ```
19
- というエラーになります。
20
43
 
21
- パス設定やファイル配置が間違っいるのでしょうか?
44
+ 下記警告も出おります。
45
+ ```
46
+ wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
47
+ ```
22
48
 
49
+ どの様に設定すると、"npm run start"でも動作する様になるのでしょうか?
50
+
23
51
  ご教授頂けると幸いです。

1

eject を reject と間違って記述していたため修正しました。

2020/11/14 03:37

投稿

gomigorou
gomigorou

スコア7

title CHANGED
File without changes
body CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  [https://github.com/buzz/mediainfo.js](https://github.com/buzz/mediainfo.js)
4
4
  上記サイトのReact.jsでの使用例をみると、webpack.config.jsonにて設定しています。
5
- ですが、create-react-appを用いて環境構築すると、それが内部にラップされ、rejectしないと編集できない様です。
5
+ ですが、create-react-appを用いて環境構築すると、それが内部にラップされ、ejectしないと編集できない様です。
6
6
 
7
- rejectしなくても、react-app-rewiredというnpmを用いてwebpack.config.jsonを上書きできるとの事なので、やってみました。
7
+ ejectしなくても、react-app-rewiredというnpmを用いてwebpack.config.jsonを上書きできるとの事なので、やってみました。
8
8
  下記サイトなどを参考にしました。
9
9
  [https://github.com/reedyrm/react-wasm-migration](https://github.com/reedyrm/react-wasm-migration)
10
10
  [Using WebAssembly in your ReactJS App | KOALA42](https://koala42.com/using-webassembly-in-your-reactjs-app/)