webpack: 同じモジュールのimport + module.exportsがエラーを引き起こす

質問

webpackでウェブサイトを開発しています。このようなコードがあった場合

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でimportするとこのエラーが発生するのでしょうか？代わりにrequireを使うのは何か問題があるのでしょうか？

どのように解決するのですか？

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

// Change this
module.exports = foo;

// To this
export default foo;