import and module.exports in Vuex module show Uncaught TypeError: Cannot assign to read only property 'exports' of object

Question

i have a vuex module by Vue CLI

import { Sev } from "../api";
const modules = {
  actions: {
    getData() {
      Sev();
    }
  }
};

module.exports = modules;

and i got an error in browser console

test.js?5df4:10 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.eval (test.js?5df4:10)
    at eval (test.js:12)
    at Module../src/config/store_modules/test.js (app.js:1263)

then i change the code to

import { Sev } from "../api";
// const modules = {
export default {
  actions: {
    getData() {
      Sev();
    }
  }
};
// module.exports = modules;

then work well. But i don't know what different. is it a bug ?

Answer 1

VueJS is browser code and use ES6 modules

import xxx from './path/to/xxx';
export xxx;
export default xxx;

while CommonJS is used by NodeJS and is completely different

const yyy = require('./path/to/yyy');
module.exports = { yyy };
exports.zzz = yyy;

You're writing Vue code so you must use ES6 modules and the import/export syntax, the module object doesn't behave as you'd expect in ES6