How to Fix the TypeError: Cannot Assign to Read Only Property 'exports' of Object '#<Object>' Error

While working on a project, you might encounter the following error:

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

This error is typically generated by Webpack and indicates that you are attempting to use CommonJS syntax when you should be using ES modules.

Instead of using the CommonJS syntax:

const myfunction = () => {}
module.exports = myfunction

you should use the ES Modules syntax:

const myfunction = () => {}
export default myfunction

To import an exported function or object, you can use the following syntax:

import myfunction from './myfunction'

If you want to export multiple functions or objects from a file, you can do so as follows:

myfunctions.js

const myfunction1 = () => {}
const myfunction1 = () => {}

export {
  myfunction1,
  myfunction2
}

To import these multiple exports, you can use the following syntax:

import { myfunction1, myfunction2 } from './myfunctions.js'