基于 Vue CLI / Typescript 的项目不再构建或运行 Mocha 测试
Posted
技术标签:
【中文标题】基于 Vue CLI / Typescript 的项目不再构建或运行 Mocha 测试【英文标题】：Vue CLI / Typescript based project no longer builds or runs Mocha tests 【发布时间】：2021-09-10 18:36:17 【问题描述】：我有一个从 Vue CLi 搭建的 Vue 2 项目，它抛出了几十个错误。它适用于开发，但运行单元测试或构建生产时都会出错。
下面是错误示例，Package.json 文件，vue.config.js
这里是一些错误的例子：
这些与使用 Typescript ?. 有关
error in ./tests/unit/store/programme/programme/getters.spec.ts
Module parse failed: Unexpected token (24:38)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/ts-loader/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| it('returns a Programme with the id of `selectedProgrammeId`', function ()
| state.programmes.selectedProgrammeId = programmeCollection[2]._id;
> expect(getters.programme(state)?._id).to.eq(programmeCollection[2]._id);
| );
| );
@ ./node_modules/mochapack/lib/entry.js 7:2895-2975
编译 Vuetify
error in ./node_modules/vuetify/src/components/VSwitch/VSwitch.sass
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
1 │ @import './_variables.scss'
│ ^^^^^^^^^^^^^^^^^^^
╵
Users/davidclare/Documents/strata%202/admin-2-spa/node_modules/vuetify/src/components/VSwitch/VSwitch.sass 1:9 root stylesheet
@ ./node_modules/vuetify/src/components/VSwitch/VSwitch.sass 4:14-209
@ ./node_modules/vuetify/lib/components/VSwitch/VSwitch.js
@ ./node_modules/vuetify/lib/components/VSwitch/index.js
@ ./src/views/Programme/Module/Edit.dialog.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--15-2!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Programme/Module/Module.vue?vue&type=script&lang=ts&
@ ./src/views/Programme/Module/Module.vue?vue&type=script&lang=ts&
@ ./src/views/Programme/Module/Module.vue
@ ./tests/unit/programme/module/journalItemsButton.spec.ts
@ ./node_modules/mochapack/lib/entry.js```
## Package.json
"name": "2-spa",
"version": "0.1.0",
"private": true,
"scripts":
"dev": "vue-cli-service serve --mode Local",
"prep": "npm run audit; npm run test:unit; npm run lint; npm run build:dev",
"test:unit": "vue-cli-service test:unit --mode development",
"audit": "npm audit --audit-level=moderate --production",
"lint": "vue-cli-service lint",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:dev": "vue-cli-service build --mode Development",
"build:test": "vue-cli-service build --mode Test",
"build:prod": "vue-cli-service build --mode Production"
,
"dependencies":
"@auth0/auth0-spa-js": "^1.12.1",
"@types/auth0-js": "^9.14.0",
"@types/lodash": "^4.14.161",
"apollo-boost": "^0.4.9",
"apollo-link-batch-http": "^1.2.14",
"array-move": "^3.0.1",
"axios": "^0.21.1",
"babel-runtime": "^6.26.0",
"chart.js": "^2.9.3",
"core-js": "^3.6.5",
"graphql": "^15.3.0",
"lodash": "^4.17.20",
"logrocket": "^1.0.13",
"logrocket-vuex": "0.0.3",
"opossum": "^5.1.3",
"retry-axios": "^2.4.0",
"simplemde-theme-base": "^0.2.1",
"uuid": "^8.3.2",
"vue": "^2.6.12",
"vue-apollo": "^3.0.4",
"vue-chartjs": "^3.5.1",
"vue-fragment": "^1.5.1",
"vue-markdown": "^2.2.4",
"vue-router": "^3.4.5",
"vue-simplemde": "^1.1.2",
"vue-toasted": "^1.1.28",
"vuedraggable": "^2.24.1",
"vuetify": "^2.3.12",
"vuex": "^3.5.1"
,
"devDependencies":
"@types/chai": "^4.2.12",
"@types/mocha": "^8.0.3",
"@types/opossum": "^4.1.1",
"@types/uuid": "^8.3.0",
"@types/vue-markdown": "^2.2.1",
"@typescript-eslint/eslint-plugin": "^4.3.0",
"@typescript-eslint/parser": "^4.3.0",
"@vue/cli-plugin-babel": "~4.5.6",
"@vue/cli-plugin-eslint": "~4.5.6",
"@vue/cli-plugin-router": "~4.5.6",
"@vue/cli-plugin-typescript": "~4.5.6",
"@vue/cli-plugin-unit-mocha": "~4.5.6",
"@vue/cli-plugin-vuex": "~4.5.6",
"@vue/cli-service": "~4.5.6",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^5.1.0",
"@vue/test-utils": "1.1.0",
"chai": "^4.2.0",
"eslint": "^7.10.0",
"eslint-plugin-graphql": "^4.0.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.1",
"graphql-tag": "^2.11.0",
"html-loader": "^1.3.2",
"node-sass": "^4.14.1",
"prettier": "2.2.1",
"sass": "^1.26.11",
"sass-loader": "^10.0.2",
"typescript": "~4.0.3",
"vue-cli-plugin-apollo": "~0.22.2",
"vue-cli-plugin-vuetify": "~2.0.7",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.6.0"
## vue.config.js
module.exports =
transpileDependencies: ['vuetify'],
lintOnSave: true,
configureWebpack:
devtool: 'source-map',
,
pluginOptions:
apollo: lintGQL: true ,
,
;
vue info
Environment Info:
System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
Yarn: Not Found
npm: 7.18.1 - ~/.nvm/versions/node/v14.17.0/bin/npm
Browsers:
Chrome: 91.0.4472.114
Edge: Not Found
Firefox: 89.0.1
Safari: 14.1.1
npmPackages:
@types/vue-markdown: ^2.2.1 => 2.2.1
@vue/babel-helper-vue-jsx-merge-props: 1.0.0
@vue/babel-helper-vue-transform-on: 1.0.0-rc.2
@vue/babel-plugin-jsx: 1.0.0-rc.3
@vue/babel-plugin-transform-vue-jsx: 1.1.2
@vue/babel-preset-app: 4.5.6
@vue/babel-preset-jsx: 1.1.2
@vue/babel-sugar-functional-vue: 1.1.2
@vue/babel-sugar-inject-h: 1.1.2
@vue/babel-sugar-v-model: 1.1.2
@vue/babel-sugar-v-on: 1.1.2
@vue/cli-overlay: 4.5.6
@vue/cli-plugin-babel: ~4.5.6 => 4.5.6
@vue/cli-plugin-eslint: ~4.5.6 => 4.5.6
@vue/cli-plugin-router: ~4.5.6 => 4.5.6
@vue/cli-plugin-typescript: ~4.5.6 => 4.5.6
@vue/cli-plugin-unit-mocha: ~4.5.6 => 4.5.6
@vue/cli-plugin-vuex: ~4.5.6 => 4.5.6
@vue/cli-service: ~4.5.6 => 4.5.6
@vue/cli-shared-utils: 4.5.6
@vue/compiler-core: 3.0.5
@vue/compiler-dom: 3.0.5
@vue/compiler-sfc: 3.0.5
@vue/compiler-s-s-r: 3.0.5
@vue/component-compiler-utils: 3.2.0
@vue/eslint-config-prettier: ^6.0.0 => 6.0.0
@vue/eslint-config-typescript: ^5.1.0 => 7.0.0
@vue/preload-webpack-plugin: 1.1.2
@vue/shared: 3.0.5
@vue/test-utils: 1.1.0 => 1.1.0
@vue/web-component-wrapper: 1.2.0
eslint-plugin-vue: ^7.0.1 => 7.11.1
logrocket-vuex: 0.0.3 => 0.0.3
typescript: ~4.0.3 => 4.0.3
vue: ^2.6.12 => 2.6.12
vue-apollo: ^3.0.4 => 3.0.4
vue-chartjs: ^3.5.1 => 3.5.1
vue-cli-plugin-apollo: ~0.22.2 => 0.22.2
vue-cli-plugin-vuetify: ~2.0.7 => 2.0.7
vue-eslint-parser: 7.6.0
vue-fragment: ^1.5.1 => 1.5.1
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.3 (16.1.2)
vue-markdown: ^2.2.4 => 2.2.4
vue-router: ^3.4.5 => 3.4.5
vue-simplemde: ^1.1.2 => 1.1.2
vue-style-loader: 4.1.2
vue-template-compiler: ^2.6.12 => 2.6.12
vue-template-es2015-compiler: 1.9.1
vue-toasted: ^1.1.28 => 1.1.28
vuedraggable: ^2.24.1 => 2.24.1
vuetify: ^2.3.12 => 2.3.12
vuetify-loader: ^1.6.0 => 1.6.0
vuex: ^3.5.1 => 3.5.1
npmGlobalPackages:
@vue/cli: 4.5.13
【问题讨论】：
我相信这是相关的：github.com/vuejs/vue-cli/issues/6833 【参考方案1】：此问题可能是由使用 javascript optional chaining operator 引起的。这是 es2020 及以上版本支持的功能，显然 Vuejs 的默认 Babel 配置不知道如何处理。
我在 Vuejs 存储库中找到了一个 suggestion in a related issue 来定位 tsconfig.json 中的“es2019”，这为我解决了这个问题：
# tsconfig.json
"compilerOptions":
"target": "es2019",
...
【讨论】：
以上是关于基于 Vue CLI / Typescript 的项目不再构建或运行 Mocha 测试的主要内容，如果未能解决你的问题，请参考以下文章
基于 Vue CLI / Typescript 的项目不再构建或运行 Mocha 测试