webpack: import + module.exports in the same module caused error

I'm developing a website with webpack. When I have a code like this:

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

I got the error Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'.

Turns out that changing import $ from 'jquery' to var $ = require('jquery') don't cause any errors.

Why import with module.exports causes this error? Is anything wrong in using require instead?

Solution 1:

You can't mix import and module.exports. In the import world, you need to export things.

// Change this
module.exports = foo;

// To this
export default foo;

Solution 2:

This happens if other modules down stream have an unexpected require tree. Babel changes require to import where it isn't supposed to which causes the aforementioned issue @Matthew Herbst. To solve this add "sourceType": "unambiguous" to your babelrc file or babel.config.js so that @babel/plugin-transform-runtime won't do this change of require expression to import in your commonjs files. eg:

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

  "sourceType": "unambiguous"
}

Solution 3:

You can use require with export. But not import and module.exports.