Vue-cli: Local NPM Module causes "Cannot assign to read only property 'exports' of object"

[grantcarthew]

Version

3.0.5

Node and OS info

Node 10.12.0 / npm 6.4.1 / Debian 4.9.110-3 deb9u6

Steps to reproduce

Use a local file module in your package.

What is expected?

After the app is compiled successfully the browser should run the app without errors.

What is actually happening?

Chrome reports the following error when the app is initialized: Cannot assign to read only property 'exports' of object

---

This issue is fixed in my code however I wanted to document this so anyone else having the issue can find it.

I am using a local npm module with npm install ../path/to/module.

After an upgrade the file based local module was not being transpiled correctly and was being sent to the browser with module.exports intact. This caused the error in the browser: Cannot assign to read only property 'exports' of object

The fix was in this issue: https://github.com/webpack/webpack/issues/4039#issuecomment-419284940

I had to add sourceType: "unambiguous" to my babel.config.js file.

Here is what my current babel.config.js file looks like:

module.exports = {
  presets: [
    '@vue/app'
  ],
  sourceType: 'unambiguous'
}

Hope this helps someone.

Update 2019-08-01

Checkout @sathish76 post below. It may be useful.

[crazy-wang]

it is very useful！it helped me， thanks very much.

[grantcarthew]

@crazy-wang made this issue pop up on my notifications.

Looks like my off-hand issue has been useful. Happy to help.

[gabemule]

Saved me aswell, thx

[zhump]

module.exports = {
  presets: [
  [ '@vue/app',{
   modules: 'cjs'
  }]
  ]
}

这样也可以解决，但是打包的体积会变大。

---

不过这个问题在vue-cli3.2.0版本是不会出现的。

[zuberek]

Absolutely love it! But can you explain to me why is this happening? I wrote an npm package in ES5 CommonJS and wanted to use in my Vue-cli app while still working server side. It works now with your fix but how do i ensure it would work out of the box? I spent a day trying to bundle the package using webpack/browserify, tried things like UMD etc. Nothing worked. Should i write in ES6 from the beginning?

@grantcarthew

[grantcarthew]

Sorry @zuberek. I don't have a solid answer for that. I suspect the local install modules are just not getting transpiled by Babel. Have a closer look at the Babel documentation.

I am using npm link now rather than installing a local module. It seems to work a little easier.

[davidqqq]

My googling led me to the same webpack/webpack#4039 but I was not patient enough to read all solutions. Lucky my googling skill brought me here and sourceType: 'unambiguous' did the trick. Now I am going back to understand how it solved the problem. Thank you! @grantcarthew

[RickChenCX]

done! thx

[grantcarthew]

@sodatea Hi, should this be reopened? Seems like a few people are having trouble with it.

[mrtarkhan]

saved me, thanks. but how? and why?

[sathish76]

I changed from this

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "development":{
      "plugins": ["dynamic-import-node"]
    }
  }
}

to this

{
  "presets": [
    ["env", {
      "modules": "commonjs",
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "development":{
      "plugins": ["dynamic-import-node"]
    }
  }
}

[jgaehring]

Thanks @sathish76 ! This worked for me, when adding the sourceType field didn't. That created the following error:

Syntax Error: SyntaxError: 'import' and 'export' may appear only with 'sourceType: "module"' (1:0)

Changing "modules": false to "modules": "commonjs" got things working again.

For background, I encountered the error after running npm update to resolve another issue, which updated a bunch of babel and webpack packages (including the dev server), though I can't isolate which update specifically broke my config. Hope this is helpful to anyone else encountering this error!

[Agrimaldo]

TKS, your solution works in my project!