web-dev-qa-db-ja.com

webpack：同じモジュールでimport + module.exportsを実行するとエラーが発生しました

Webpackを使用してWebサイトを開発しています。このようなコードがある場合：

_import $ from 'jquery';
function foo() {};
module.exports = foo;
_

エラー_Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'_が発生しました。

_import $ from 'jquery'_をvar $ = require('jquery')に変更してもエラーは発生しません。

module.exportsでインポートするとこのエラーが発生するのはなぜですか？requireを代わりに使用することで何か問題がありますか？

javascriptimportwebpackecmascript-6require
31
juniorgarcia

importとmodule.exportsを混在させることはできません。 importの世界では、物をエクスポートする必要があります。

// Change this
module.exports = foo;

// To this
export default foo;
54
Matthew Herbst

これは、ダウンストリームの他のモジュールに予期しないツリーが必要な場合に発生します。 Babelの変更では、@ Matthew Herbstの前述の問題の原因となるはずのない場所にインポートする必要があります。これを解決するには、"sourceType": "unambiguous"をbabelrcファイルまたはbabel.config.jsに追加し、@ babel/plugin-transform-runtimeがcommonjsファイルにインポートするためのrequire式のこの変更を行わないようにします。例えば：

module.exports = {
  presets: [
    '@quasar/babel-preset-app'
  ],

  "sourceType": "unambiguous"
}
5
Emmanuel Mahuni