回答編集履歴
2
文章を整理しました
answer
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
- webpack 4
|
|
2
2
|
- babel 7
|
|
3
3
|
|
|
4
|
-
ESModules の `import` / `export ` と CommonJS の `module.exports` / `require` が混在するとエラーが発生しがちなので、揃えてあげるのが良さそうに思います。
|
|
4
|
+
ESModules の `import` / `export ` と CommonJS の `module.exports` / `require` が混在するとwebpackで解釈ができずにエラーが発生しがちなので、揃えてあげるのが良さそうに思います。
|
|
5
5
|
|
|
6
|
-
`
|
|
6
|
+
> You can mix `require` and `export`. You can't mix `import` and `module.exports`.
|
|
7
|
+
> [Cannot assign to read only property 'exports' of object '#<Object>' (mix require and export) #4039](https://github.com/webpack/webpack/issues/4039#issuecomment-273804003)
|
|
7
8
|
|
|
9
|
+
ただ本件は混在してないにもかかわらずこのエラーが発生しているようで、原因はちょっと分からないのですが `sample.js` で読み込んだモジュールを `...` で複製したものを `module.exports` しているのが鬼門になっている。
|
|
10
|
+
|
|
8
11
|
下記は同じようなエラーになります
|
|
9
12
|
```js
|
|
10
13
|
// sample.js
|
|
@@ -21,6 +24,23 @@
|
|
|
21
24
|
=> ????♀️
|
|
22
25
|
```
|
|
23
26
|
|
|
27
|
+
スプレッド演算子で複製しなければ問題なく動作するので…
|
|
28
|
+
|
|
29
|
+
```js
|
|
30
|
+
const hoge = require('./hoge');
|
|
31
|
+
const sample = {hoge};
|
|
32
|
+
module.exports = sample;
|
|
33
|
+
|
|
34
|
+
// import.ts
|
|
35
|
+
const sample = require('./sample');
|
|
36
|
+
=> ????
|
|
37
|
+
|
|
38
|
+
// import.ts
|
|
39
|
+
import sample from './sample';
|
|
40
|
+
=> ????
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
|
|
24
44
|
`sample.js` を `export default` にすればうまく動作するかと思います
|
|
25
45
|
|
|
26
46
|
```js
|
|
@@ -56,23 +76,8 @@
|
|
|
56
76
|
=> require でも ????♀️
|
|
57
77
|
```
|
|
58
78
|
|
|
59
|
-
|
|
79
|
+
---
|
|
60
80
|
|
|
61
|
-
```js
|
|
62
|
-
const hoge = require('./hoge');
|
|
63
|
-
const sample = {hoge};
|
|
64
|
-
module.exports = sample;
|
|
65
|
-
|
|
66
|
-
// import.ts
|
|
67
|
-
const sample = require('./sample');
|
|
68
|
-
=> ????
|
|
69
|
-
|
|
70
|
-
// import.ts
|
|
71
|
-
import sample from './sample';
|
|
72
|
-
=> ????
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
|
|
76
81
|
※ 同じファイルで `import` したものを `module.exports` するとすべからく下記のエラーが発生します。
|
|
77
82
|
```
|
|
78
83
|
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
|
|
@@ -109,5 +114,6 @@
|
|
|
109
114
|
```
|
|
110
115
|
|
|
111
116
|
cf.
|
|
117
|
+
[https://github.com/webpack/webpack/issues/4039](https://github.com/webpack/webpack/issues/4039)
|
|
112
118
|
[https://chaika.hatenablog.com/entry/2019/02/04/083000](https://chaika.hatenablog.com/entry/2019/02/04/083000)
|
|
113
119
|
[https://tech-1natsu.hatenablog.com/entry/2017/10/21/142210](https://tech-1natsu.hatenablog.com/entry/2017/10/21/142210)
|
1
参考サイト追加
answer
CHANGED
|
@@ -106,4 +106,8 @@
|
|
|
106
106
|
// import.ts
|
|
107
107
|
const sample = require('./sample');
|
|
108
108
|
=> ????♀️
|
|
109
|
-
```
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
cf.
|
|
112
|
+
[https://chaika.hatenablog.com/entry/2019/02/04/083000](https://chaika.hatenablog.com/entry/2019/02/04/083000)
|
|
113
|
+
[https://tech-1natsu.hatenablog.com/entry/2017/10/21/142210](https://tech-1natsu.hatenablog.com/entry/2017/10/21/142210)
|