Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Local NPM Module causes "Cannot assign to read only property 'exports' of object" #2746

Closed
grantcarthew opened this issue Oct 16, 2018 · 12 comments
Closed

Comments

@grantcarthew
Copy link

@grantcarthew grantcarthew commented Oct 16, 2018

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: webpack/webpack#4039 (comment)

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

This comment has been minimized.

Copy link

@crazy-wang crazy-wang commented Jan 22, 2019

it is very useful!it helped me, thanks very much.

@grantcarthew

This comment has been minimized.

Copy link
Author

@grantcarthew grantcarthew commented Jan 22, 2019

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

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

@gabemule

This comment has been minimized.

Copy link

@gabemule gabemule commented Feb 23, 2019

Saved me aswell, thx

@zhump

This comment has been minimized.

Copy link

@zhump zhump commented Mar 9, 2019

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

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


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

@zuberek

This comment has been minimized.

Copy link

@zuberek zuberek commented Mar 29, 2019

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

This comment has been minimized.

Copy link
Author

@grantcarthew grantcarthew commented Apr 1, 2019

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

This comment has been minimized.

Copy link

@davidqqq davidqqq commented May 16, 2019

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

This comment has been minimized.

Copy link

@RickChenCX RickChenCX commented Jun 12, 2019

done! thx

@grantcarthew

This comment has been minimized.

Copy link
Author

@grantcarthew grantcarthew commented Jun 12, 2019

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

@mrtarkhan

This comment has been minimized.

Copy link

@mrtarkhan mrtarkhan commented Jul 31, 2019

saved me, thanks. but how? and why?

@sathish76

This comment has been minimized.

Copy link

@sathish76 sathish76 commented Aug 1, 2019

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

This comment has been minimized.

Copy link

@jgaehring jgaehring commented Dec 5, 2019

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!

@MathiasCiarlo MathiasCiarlo mentioned this issue Dec 11, 2019
3 of 7 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants
You can’t perform that action at this time.