How to fix the TypeError: Cannot assign to read only property 'exports' of object '#<Object>' error
While working on a project, at some point I got this error:
TypeError: Cannot assign to read only property 'exports' of object '#<Object>' error
The error is generated by Webpack and it means you are trying to use CommonJS while you need to use ES modules!
Instead of using the CommonJS syntax:
const myfunction = () => {}
module.exports = myfunction
use this ES Modules syntax:
const myfunction = () => {}
export default myfunction
Then you can import an exported function or object like this:
import myfunction from './myfunction'
You can also export multiple functions or objects from a file:
myfunctions.js
const myfunction1 = () => {}
const myfunction1 = () => {}
export {
myfunction1,
myfunction2
}
Then you can import them as:
import { myfunction1, myfunction2 } from './myfunctions.js'
→ Here's my latest YouTube video
→ Get my JavaScript Beginner's Handbook
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025