错误类型错误：无法读取未定义的属性“样式资源加载器”

Posted 2023-02-23

【中文标题】错误类型错误：无法读取未定义的属性“样式资源加载器”

【英文标题】：ERROR TypeError: Cannot read property 'style-resources-loader' of undefined

【发布时间】：2021-03-23 12:01:23

【问题描述】：

我有一个使用 Vue 2.6 的项目，其中这个错误发生在样式组装的某个阶段（如果我理解正确的话）。同时，我既不能构建也不能运行项目，但是所有模块都从 package.json

安装成功

错误

ERROR TypeError: Cannot read property 'style-resources-loader' of undefined

完整的细节：

 ERROR  TypeError: Cannot read property 'style-resources-loader' of undefined
TypeError: Cannot read property 'style-resources-loader' of undefined
    at module.exports (/var/www/eskso.wsofter.ru/public_html/front/node_modules/vue-cli-plugin-style-resources-loader/index.js:2:53)
    at /var/www/eskso.wsofter.ru/public_html/front/node_modules/@vue/cli-service/lib/Service.js:78:7
    at Array.forEach (<anonymous>)
    at Service.init (/var/www/eskso.wsofter.ru/public_html/front/node_modules/@vue/cli-service/lib/Service.js:76:18)
    at Service.run (/var/www/eskso.wsofter.ru/public_html/front/node_modules/@vue/cli-service/lib/Service.js:215:10)
    at Object.<anonymous> (/var/www/eskso.wsofter.ru/public_html/front/node_modules/@vue/cli-service/bin/vue-cli-service.js:36:9)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sapphire@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the sapphire@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-12-12T05_45_34_046Z-debug.log
root@bytebrush:/var/www/eskso.wsofter.ru/public_html/front# 

package.json

...
  "dependencies": 
    "-": "0.0.1",
    "axios": "^0.21.0",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.8.1",
    "es6-promise": "^4.2.8",
    "moment": "^2.29.1",
    "scroll-lock": "^2.1.4",
    "swiper": "^6.4.1",
    "v-mask": "^2.2.3",
    "v-tooltip": "^2.0.3",
    "vee-validate": "^4.0.4",
    "vue": "^2.6.12",
    "vue-awesome-swiper": "^4.1.1",
    "vue-axios": "^3.2.0",
    "vue-click-outside": "^1.1.0",
    "vue-cool-lightbox": "^2.6.9",
    "vue-gtag": "^1.10.0",
    "vue-recaptcha": "^1.3.0",
    "vue-router": "^3.4.9",
    "vue-select": "^3.10.8",
    "vue-the-mask": "^0.11.1",
    "vue-toasted": "^1.1.28",
    "vue-yandex-maps": "^0.10.9",
    "vue-yandex-metrika": "^1.8.3",
    "vue2-perfect-scrollbar": "^1.5.0",
    "vuejs-datepicker": "^1.6.2",
    "vuelidate": "^0.7.6",
    "vuex": "^3.6.0"
  ,
  "devDependencies": 
    "@vue/cli-plugin-babel": "~4.5.9",
    "@vue/cli-plugin-eslint": "~4.5.9",
    "@vue/cli-plugin-router": "~4.5.9",
    "@vue/cli-plugin-vuex": "~4.5.9",
    "@vue/cli-service": "~4.5.9",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "css-loader": "^5.0.1",
    "eslint": "^7.15.0",
    "eslint-plugin-prettier": "^3.2.0",
    "eslint-plugin-vue": "^7.2.0",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
    "prettier": "^2.2.1",
    "style-resources-loader": "^1.4.1",
    "vue-cli-plugin-style-resources-loader": "~0.1.4",
    "vue-svg-loader": "^0.16.0",
    "vue-template-compiler": "^2.6.12"
  
...

【问题讨论】：

如果您npm uninstall 您的style-resources-loader 和vue-cli-plugin-style-resources-loader devDependencies 之一（或两者）会发生什么？

哇，我卸载了 vue-cli-plugin-style-resources-loader 并且工作正常！多谢，伙计！ )

【参考方案1】：

style-resources-loader 用于自动导入某些资源。 vue-cli-plugin-style-resources-loader 只是一个包装器。可能两者都不需要，这可能会导致问题。尝试删除以下devDependencies 之一：

vue-cli-plugin-style-resources-loader style-resources-loader

例如：

npm uninstall vue-cli-plugin-style-resources-loader