Vue-cli: "TypeError: exports is readonly" when using "npm link"

Created on 2 Jan 2019  路  4Comments  路  Source: vuejs/vue-cli

Version

3.2.2

Environment info

Environment Info:

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
  Binaries:
    Node: 10.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.10.1 - C:\Users\cepharum\AppData\Roaming\npm\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    @vue/babel-preset-app:  3.2.2
    @vue/cli-overlay:  3.2.0
    @vue/cli-plugin-babel: ^3.2.2 => 3.2.2
    @vue/cli-plugin-e2e-nightwatch: ^3.2.2 => 3.2.2
    @vue/cli-plugin-eslint: ^3.2.2 => 3.2.2
    @vue/cli-plugin-unit-mocha: ^3.2.2 => 3.2.2
    @vue/cli-service: ^3.2.2 => 3.2.2
    @vue/cli-shared-utils:  3.2.2
    @vue/component-compiler-utils:  2.3.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: ^1.0.0-beta.28 => 1.0.0-beta.28
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    eslint-plugin-vue: ^5.0.0-0 => 5.0.0
    vue: ^2.5.17 => 2.5.21
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.4.2
    vue-router: ^3.0.1 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.17 => 2.5.21
    vue-template-es2015-compiler:  1.6.0
    vuex: ^3.0.1 => 3.0.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

  1. Have some module using CommonJS module.exports for exporting symbols. In my case this module is scoped, but public, FWIW. And it is published via npm, already.
  2. Have some vue/cli based project listing that module as a dependency.
  3. Run server. See everything is working.
  4. Start development on module in 1., thus use "npm link" and "npm link " to integrate live version.
  5. Re-Run server. See blank page (or whatever was visible when using now linked module.) See console in browser showing "TypeError: exports is readonly".

What is expected?

I'd expect application being compiled the same way when using linked dependencies while developing those rather than having to publish every single fix on npm.

What is actually happening?

Have to re-publish dependency on npm and update in project to see any modification work with my project.

Most helpful comment

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.resolve.symlinks(false)
  }
}

We'll add this hint to the docs later.

All 4 comments

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.resolve.symlinks(false)
  }
}

We'll add this hint to the docs later.

Is there any reason to have resolve.symlinks enabled in webpack?
I switched to using npm-link-copy in order to circumvent issues with npm link.

@bodograumann

  1. It's the default in webpack.
  2. Disabling it might cause HMR issues.

@bodograumann Replacing live links with a copy-solution might be an option. So is using live links in the first place e.g. when developing larger modules copying will be painful waste of time.

UPDATE: Copying files is a total different approach here and the particular module doesn't solve issues, but prevents them, only. It's like locking up the door to the room the fire is burning in.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

JIANGYUJING1995 picture JIANGYUJING1995  路  3Comments

eladcandroid picture eladcandroid  路  3Comments

Gonzalo2683 picture Gonzalo2683  路  3Comments

Benzenes picture Benzenes  路  3Comments

brandon93s picture brandon93s  路  3Comments