Webpack 和 Vue-CLI 的间歇性“TypeError：“exports”是只读的”错误

Posted 2023-03-07

【中文标题】Webpack 和 Vue-CLI 的间歇性“TypeError：“exports”是只读的”错误

【英文标题】：Intermittent "TypeError: "exports" is read-only" error with Webpack and Vue-CLI

【发布时间】：2019-05-07 15:00:24

【问题描述】：

我有一个 Vue-CLI 应用程序，直到最近它都运行良好。现在，有时控制台中会出现此消息，并且应用程序的其余部分无法加载：

TypeError: "exports" is read-only

直接原因似乎是我的一个模块，它使用module.exports 导出其默认功能。 I understand that Webpack（Vue CLI 使用）减少了对 module.exports 的支持，至少在包含 ES2015 import 语句的模块的情况下。但那是not the case here。而且 Webpack 有时也能很好地编译它。

特别奇怪的是它是断断续续的。一般来说，我可以通过rm -rf node_modules; npm install 暂时解决问题。 （纱线安装似乎不太可靠）。但后来它又回来了。

可能是什么原因？也许是两个相互竞争的依赖？我的 package.json 看起来像这样：

  "dependencies": 
    "@turf/turf": "^5.1.6",
    "bluebird": "^3.5.3",
    "color": "^3.1.0",
    "mapbox-gl": "^0.50.0",
    "mapbox-gl-utils": "^0.4.0",
    "thenify": "^3.3.0",
    "vue": "^2.5.17",
    "vue-carousel": "^0.16.0-rc2"
  ,
  "devDependencies": 
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-eslint": "^3.2.1",
    "@vue/cli-service": "^3.0.5",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.4",
    "copy-webpack-plugin": "^4.6.0",
    "eslint": "^5.9.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "vue-template-compiler": "^2.5.17"
  ,
  "postcss": 
    "plugins": 
      "autoprefixer": 
    
  ,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

我的 vue.config.js 是（简化的）：

const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path');

module.exports = 
  chainWebpack: config => 
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .tap(options => 
        options.configFile = path.resolve(__dirname, ".eslintrc.js");
        return options;
      )
  ,
  configureWebpack: 
    plugins: [
      new CopyWebpackPlugin([ 
         ...           
    ]
  

我怀疑，但不确定，当我在使用npm link 链接的模块中进行更新时会触发问题。

使用 Vue CLI 2.1.1 版。

作为一种解决方法，如果我改用 ES2015 export 语句，是的，应用程序可以工作，但是我无法使用 NodeJS 运行我的测试套件。

对于如何使我的环境更加稳定以便不再发生这种间歇性问题的任何建议，我很乐意。

【问题讨论】：

我确认这个问题似乎是由于使用了 npm 链接。 Webpack 存在符号链接依赖项的问题。我已经为此苦苦挣扎了几个小时，并意识到它正在努力安装我的模块的新发布版本，但是在使用 npm link 链接它时失败了。

仅供参考：github.com/vuejs/vue-cli/issues/3227

【参考方案1】：

根据https://github.com/vuejs/vue-cli/issues/3227，这是由于一些可配置的行为。在你的 vue.config.js 中添加这个：

module.exports = 
  chainWebpack: (config) => 
    config.resolve.symlinks(false)
  

它在我的情况下工作。

【讨论】：

谢谢，太棒了。我确实发现问题肯定是符号链接，并且使用了简单地复制本地更新而不是符号链接的解决方法。

欢迎您......几个月前我在这个问题上磕磕绊绊，那时我也开始复制一些东西，这就是 PITA......

【参考方案2】：

添加后我也遇到了这个问题

chainWebpack: (config) => 
  config.resolve.symlinks(false)

到我的 vue.config.js

为了解决这个问题，我删除了我的 node_modules 文件夹并运行了一个新的 npm install