回答編集履歴

2

文章を整理しました

2019/12/25 20:39

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

test CHANGED
@@ -4,11 +4,17 @@
4
4
 
5
5
 
6
6
 
7
- ESModules の `import` / `export ` と CommonJS の `module.exports` / `require` が混在するとエラーが発生しがちなので、揃えてあげるのが良さそうに思います。
7
+ ESModules の `import` / `export ` と CommonJS の `module.exports` / `require` が混在するとwebpackで解釈ができずにエラーが発生しがちなので、揃えてあげるのが良さそうに思います。
8
+
9
+
10
+
8
-
11
+ > You can mix `require` and `export`. You can't mix `import` and `module.exports`.
12
+
9
-
13
+ > [Cannot assign to read only property 'exports' of object '#<Object>' (mix require and export) #4039](https://github.com/webpack/webpack/issues/4039#issuecomment-273804003)
10
-
14
+
15
+
16
+
11
- `sample.js` で読み込んだモジュールを `...` で複製したオブジェクトを `module.exports` しているのが鬼門なようです
17
+ ただ本件は混在してないにもかかわらずこのエラーが発生しているようで、原因はちょっと分からないのですが `sample.js` で読み込んだモジュールを `...` で複製したものを `module.exports` しているのが鬼門っている
12
18
 
13
19
 
14
20
 
@@ -44,6 +50,40 @@
44
50
 
45
51
 
46
52
 
53
+ スプレッド演算子で複製しなければ問題なく動作するので…
54
+
55
+
56
+
57
+ ```js
58
+
59
+ const hoge = require('./hoge');
60
+
61
+ const sample = {hoge};
62
+
63
+ module.exports = sample;
64
+
65
+
66
+
67
+ // import.ts
68
+
69
+ const sample = require('./sample');
70
+
71
+ => ????
72
+
73
+
74
+
75
+ // import.ts
76
+
77
+ import sample from './sample';
78
+
79
+ => ????
80
+
81
+ ```
82
+
83
+
84
+
85
+
86
+
47
87
  `sample.js` を `export default` にすればうまく動作するかと思います
48
88
 
49
89
 
@@ -114,13 +154,55 @@
114
154
 
115
155
 
116
156
 
157
+ ---
158
+
159
+
160
+
117
- スプレッド演算子複製なければ `module.exports` でも問題な動作たのはちょっとよくわかりせんが…
161
+ ※ 同じファイル `import` たものを `module.exports` するとすべから下記のエラーが発生します。
162
+
118
-
163
+ ```
164
+
119
-
165
+ Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
166
+
120
-
167
+ ```
168
+
169
+
170
+
121
- ```js
171
+ ```js
172
+
122
-
173
+ // sample.js
174
+
175
+ import hoge from './hoge';
176
+
177
+ const sample = {...hoge};
178
+
179
+ module.exports = sample;
180
+
181
+
182
+
183
+ // import.ts
184
+
185
+ import sample from './sample';
186
+
187
+ => ????‍♀️
188
+
189
+
190
+
191
+ // import.ts
192
+
123
- const hoge = require('./hoge');
193
+ const sample = require('./sample');
194
+
195
+ => ????‍♀️
196
+
197
+ ```
198
+
199
+
200
+
201
+ ```js
202
+
203
+ // sample.js
204
+
205
+ import hoge from './hoge';
124
206
 
125
207
  const sample = {hoge};
126
208
 
@@ -130,78 +212,6 @@
130
212
 
131
213
  // import.ts
132
214
 
133
- const sample = require('./sample');
134
-
135
- => ????
136
-
137
-
138
-
139
- // import.ts
140
-
141
- import sample from './sample';
142
-
143
- => ????
144
-
145
- ```
146
-
147
-
148
-
149
-
150
-
151
- ※ 同じファイルで `import` したものを `module.exports` するとすべからく下記のエラーが発生します。
152
-
153
- ```
154
-
155
- Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
156
-
157
- ```
158
-
159
-
160
-
161
- ```js
162
-
163
- // sample.js
164
-
165
- import hoge from './hoge';
166
-
167
- const sample = {...hoge};
168
-
169
- module.exports = sample;
170
-
171
-
172
-
173
- // import.ts
174
-
175
- import sample from './sample';
176
-
177
- => ????‍♀️
178
-
179
-
180
-
181
- // import.ts
182
-
183
- const sample = require('./sample');
184
-
185
- => ????‍♀️
186
-
187
- ```
188
-
189
-
190
-
191
- ```js
192
-
193
- // sample.js
194
-
195
- import hoge from './hoge';
196
-
197
- const sample = {hoge};
198
-
199
- module.exports = sample;
200
-
201
-
202
-
203
- // import.ts
204
-
205
215
  import sample from './sample';
206
216
 
207
217
  => ????‍♀️
@@ -220,6 +230,8 @@
220
230
 
221
231
  cf.
222
232
 
233
+ [https://github.com/webpack/webpack/issues/4039](https://github.com/webpack/webpack/issues/4039)
234
+
223
235
  [https://chaika.hatenablog.com/entry/2019/02/04/083000](https://chaika.hatenablog.com/entry/2019/02/04/083000)
224
236
 
225
237
  [https://tech-1natsu.hatenablog.com/entry/2017/10/21/142210](https://tech-1natsu.hatenablog.com/entry/2017/10/21/142210)

1

参考サイト追加

2019/12/25 20:39

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

test CHANGED
@@ -215,3 +215,11 @@
215
215
  => ????‍♀️
216
216
 
217
217
  ```
218
+
219
+
220
+
221
+ cf.
222
+
223
+ [https://chaika.hatenablog.com/entry/2019/02/04/083000](https://chaika.hatenablog.com/entry/2019/02/04/083000)
224
+
225
+ [https://tech-1natsu.hatenablog.com/entry/2017/10/21/142210](https://tech-1natsu.hatenablog.com/entry/2017/10/21/142210)