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

Question

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?

Answer 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;