質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

1回答

7100閲覧

CommonJSとESのimport/exportを同じファイルに書くとエラーが発生する

4321bocya

総合スコア13

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

1クリップ

投稿2019/07/26 06:25

編集2022/01/12 10:55

やりたいこと

  1. CommonJSの形式でexportされた(module.exportsの形)複数のモジュールをjsファイルでimportし、一つのモジュールにまとめて再度exportする
  2. 1で再度exportされたモジュールをtsファイルでimportする

※条件として1で記載したmodule.exportsの形式でexportされたモジュールをESのexportの書き方に変えることはできない

ご教示お願いします。

現在のコード

module.exportしているファイル(hoge.js)

前提としてこのファイルのexport方法は変更できないものとします。

js

1const hoge = { 2 key : 'value', 3} 4module.exports = hoge
複数のモジュールをimportして再度exportするファイル(sample.js)

js

1const hoge = require('./hoge'); 2const fuga = require('./fuga'); 3const sample = { 4 ...hoge,fuga 5}; 6module.exports = sample

importしたいファイル(import.ts)

ts

1import sample from './sample'; 2// hoge.jsとfuga.jsのJSONを出力したい 3console.log(sample);

現在のエラーメッセージ

アプリケーション起動時にブラウザのコンソールに以下のメッセージが出力されます。
怒られているのはhoge.jsです。

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

試したこと

以下の記事を参考にしました。

①import.tsでのimport方法を変える

以下のように修正しましたが、エラーが発生します。

ts

1import sample from './sample'; 23const sample = require('./sample');

エラーメッセージ(アプリケーション起動時)
import方法をrequiteに変更してもhoge.jsで同じメッセージで怒られます。

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
②sample.jsのexport方法を変える

sample.jsのexport方法をmodule.exportsからexport defaultとする。

js

1module.exports = sample 23export default sample

エラーメッセージは変わらずでした。
hoge.jsで同じメッセージで怒られます。

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

ビルド関連

babel.config.js

js

1module.exports = { 2 presets: [ 3 '@vue/app' 4 ] 5}

tsconfig.json

json

1{ 2 "compilerOptions": { 3 "target": "esnext", 4 "module": "esnext", 5 "strict": true, 6 "jsx": "preserve", 7 "importHelpers": true, 8 "moduleResolution": "node", 9 "experimentalDecorators": true, 10 "esModuleInterop": true, 11 "allowSyntheticDefaultImports": true, 12 "sourceMap": true, 13 "baseUrl": ".", 14 "types": [ 15 "webpack-env" 16 ], 17 "paths": { 18 "@/*": [ 19 "src/*" 20 ] 21 }, 22 "lib": [ 23 "esnext", 24 "dom", 25 "dom.iterable", 26 "scripthost" 27 ] 28 }, 29 "include": [ 30 "src/**/*.ts", 31 "src/**/*.tsx", 32 "src/**/*.vue", 33 "tests/**/*.ts", 34 "tests/**/*.tsx" 35 ], 36 "exclude": [ 37 "node_modules" 38 ] 39} 40

telint.json

json

1{ 2 "defaultSeverity": "warning", 3 "extends": [ 4 "tslint:recommended" 5 ], 6 "linterOptions": { 7 "exclude": [ 8 "node_modules/**" 9 ] 10 }, 11 "rules": { 12 "quotemark": [true, "single"], 13 "indent": [true, "spaces", 2], 14 "interface-name": false, 15 "ordered-imports": false, 16 "object-literal-sort-keys": false, 17 "no-consecutive-blank-lines": false, 18 "max-line-length": [true, {"limit": 120, "ignore-pattern": "^import | ^export {(.*?)}"}] 19 } 20} 21

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2019/07/26 06:30

ビルド環境はどのように構築していますか? (TypeScriptコンパイラでJSも処理している、あるいはTypeScriptは型チェックが終わればBabelで型を引き剥がしてWebpackに投げている、など処理方法によってモジュールまわりの挙動は大きく変わってきます)
4321bocya

2019/07/26 07:25 編集

>ビルド環境はどのように構築していますか? 前提として今、起動したアプリケーションはvue-cliで構築したもので ビルド設定は基本的にvue-cliのデフォルトのままです。 コンパイル、ビルド周りの設定ファイルを追加しました。 お手数おかけしますが、ご確認お願い致します。
guest

回答1

0

  • webpack 4
  • babel 7

ESModules の import / export と CommonJS の module.exports / require が混在するとwebpackで解釈ができずにエラーが発生しがちなので、揃えてあげるのが良さそうに思います。

You can mix require and export. You can't mix import and module.exports.
Cannot assign to read only property 'exports' of object '#<Object>' (mix require and export) #4039

ただ本件は混在してないにもかかわらずこのエラーが発生しているようで、原因はちょっと分からないのですが sample.js で読み込んだモジュールを ... で複製したものを module.exports しているのが鬼門になっている。

下記は同じようなエラーになります

js

1// sample.js 2const hoge = require('./hoge'); 3const sample = {...hoge}; 4module.exports = sample; 5 6// import.ts 7const sample = require('./sample'); 8=> ????‍♀️ 9 10// import.ts 11import sample from './sample'; 12=> ????‍♀️

スプレッド演算子で複製しなければ問題なく動作するので…

js

1const hoge = require('./hoge'); 2const sample = {hoge}; 3module.exports = sample; 4 5// import.ts 6const sample = require('./sample'); 7=> ???? 8 9// import.ts 10import sample from './sample'; 11=> ????

sample.jsexport default にすればうまく動作するかと思います

js

1// sample.js 2const hoge = require('./hoge'); 3const sample = {...hoge}; 4export default sample; 5 6 7// import.ts 8import sample from './sample'; 9=> ????‍♀️ 10 11// import.ts 12const sample = require('./sample'); 13=> require でも ????‍♀️

ESModules と CommonJS の方式が同じファイルで混在しているので、hoge の読み込みも import で揃えた方が良さそうに思います。

js

1// sample.js 2import hoge from './hoge'; 3const sample = {...hoge}; 4export default sample; 5 6// import.ts 7import sample from './sample'; 8=> ????‍♀️ 9 10// import.ts 11const sample = require('./sample'); 12=> require でも ????‍♀️

※ 同じファイルで import したものを module.exports するとすべからく下記のエラーが発生します。

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

js

1// sample.js 2import hoge from './hoge'; 3const sample = {...hoge}; 4module.exports = sample; 5 6// import.ts 7import sample from './sample'; 8=> ????‍♀️ 9 10// import.ts 11const sample = require('./sample'); 12=> ????‍♀️

js

1// sample.js 2import hoge from './hoge'; 3const sample = {hoge}; 4module.exports = sample; 5 6// import.ts 7import sample from './sample'; 8=> ????‍♀️ 9 10// import.ts 11const sample = require('./sample'); 12=> ????‍♀️

cf.
https://github.com/webpack/webpack/issues/4039
https://chaika.hatenablog.com/entry/2019/02/04/083000
https://tech-1natsu.hatenablog.com/entry/2017/10/21/142210

投稿2019/12/25 20:28

編集2019/12/25 20:39
KiKiKi_KiKi

総合スコア596

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問