This is the style from my Vue template file:
<style lang="sass" scoped>
a
color: inherit
cursor: pointer
.nav-link.active
border-bottom: 4px solid #28a745
.nav-justified
border-bottom: 0.25px solid lightgray
.fade-enter-active, .fade-leave-active
transition: opacity .1s
.fade-enter, .fade-leave-to
opacity: 0
</style>
and this is the error I get:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
╷
16 │ opacity: 0
│ ^
╵
Webpack config:
module.exports = {
module: {
rules: {
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"vue-style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
{
loader: "sass-loader"
}
],
},
package.json"
{
"private": true,
"scripts": {
"dev": "webpack serve --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js && firebase deploy",
"functions-deploy": "firebase deploy --only functions",
"functions-emulator": "firebase emulators:start --only functions"
},
"dependencies": {
"#vue/compat": "^3.1.0",
"#vue/compiler-sfc": "^3.1.0",
"bootstrap-vue": "^2.22.0",
"pug-plain-loader": "^1.0.0",
"vue": "^3.1.0",
"vue-multiselect": "^2.1.3"
},
"devDependencies": {
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0-rc.2",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^4.5.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"pug": "^3.0.2",
"pug-loader": "^2.4.0",
"rimraf": "^2.6.0",
"sass": "^1.32.8",
"sass-loader": "^10.2.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"style-loader": "^2.0.0",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^16.8.3",
"vue-style-loader": "^3.0.1",
"webpack": "^4.46.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Related
I've got a bunch of errors after the update from Vue 2.6(2.6.11) to Vue 2.7 (2.7.13):
Error in
./src/views/pages/SupportPage.vue?vue&type=style&index=0&id=43fb95c5&lang=scss&scoped=true&
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷ 1 │ #import "#/assets/styles/variables.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
[path to the project]\src\views\pages\SupportPage.vue 1:9 root stylesheet
Folders structure:
tests/unit/setup.js:
import '#/components/global-components'
import sinon from 'sinon'
import localStorage from './test-helpers/local-storage'
global.sinon = sinon
global.localStorage = localStorage
window.HTMLElement.prototype.scrollIntoView = () => {}
window.matchMedia = window.matchMedia || function matchMedia () {
return {
matches: false,
addListener () {},
removeListener () {}
}
}
Pre-Processor Loader in vue.config.js:
css: {
loaderOptions: {
sass: {
prependData: '#import "#/assets/styles/variables.scss";'
}
}
}
package.json:
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit --include tests/unit/setup.js --timeout 5000",
"lint": "vue-cli-service lint --no-fix",
"deploy": "vue-cli-service s3-deploy",
"lint:fix": "vue-cli-service lint --fix",
"test": "yarn test:unit",
"cy:open": "cypress open",
"cy:run": "cypress run",
"cy:test": "start-server-and-test serve http://localhost:8080 'yarn cy:run --record --headless --browser chrome'",
"recache": "node ./public/scripts/recache.js"
},
"dependencies": {
"#appsignal/javascript": "^1.0.0",
"#appsignal/vue": "^1.0.0",
"#contentful/rich-text-from-markdown": "^13.4.0",
"#contentful/rich-text-html-renderer": "^13.0.0",
"#contentful/rich-text-types": "^15.7.0",
"#popperjs/core": "^2.4.0",
"actioncable": "^5.2.2",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-error": "^1.1.13",
"apollo-link-http": "^1.5.17",
"apollo-utilities": "^1.3.4",
"axios": "^0.18.0",
"body-scroll-lock": "^3.1.3",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.22.0",
"contentful": "^7.3.0",
"contentful-rich-text-vue-renderer": "^2.1.0",
"core-js": "^3.6.4",
"countries-list": "^2.4.2",
"graphql": "^15.0.0",
"graphql-ruby-client": "1.7.4",
"graphql-tag": "^2.9.2",
"gsap": "./gsap-bonus.tgz",
"jquery": "^3.3.1",
"logrocket": "^2.1.3",
"mobile-detect": "^1.4.4",
"moment": "^2.22.2",
"moment-timezone": "^0.5.33",
"node-sass": "^4.9.3",
"paymentiq-cashier-bootstrapper": "^1.3.2",
"qrcode": "^1.3.4",
"smoothscroll-polyfill": "^0.4.4",
"sourcebuster": "^1.1.0",
"style-loader": "^0.23.1",
"text-mask-addons": "^3.8.0",
"throttle-debounce": "^3.0.1",
"unfetch": "^3.1.1",
"vue": "^2.7.13",
"vue-apollo": "^3.0.0-beta.19",
"vue-clipboard2": "^0.3.0",
"vue-i18n": "^8.10.0",
"vue-lazyload": "^1.3.3",
"vue-meta": "^2.0.4",
"vue-mq": "^1.0.1",
"vue-observe-visibility": "^0.4.6",
"vue-radial-progress": "^0.3.2",
"vue-recaptcha": "^1.1.1",
"vue-router": "^3.0.1",
"vue-text-mask": "^6.1.2",
"vue-visibility-change": "^1.2.1",
"vuejs-datepicker": "^1.6.2",
"vuejs-logger": "^1.5.3",
"vuelidate": "^0.7.5",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/plugin-syntax-optional-chaining": "^7.8.3",
"#vue/cli": "^4.5.19",
"#vue/cli-plugin-babel": "^4.5.19",
"#vue/cli-plugin-eslint": "^4.5.19",
"#vue/cli-plugin-unit-mocha": "^4.5.19",
"#vue/cli-service": "^4.5.19",
"#vue/eslint-config-airbnb": "^5.0.2",
"#vue/test-utils": "^1.0.3",
"babel-eslint": "^10.1.0",
"chai": "^4.1.2",
"compression-webpack-plugin": "^3.0.0",
"cypress": "^5.0.0",
"eslint": "7.2.0",
"eslint-config-airbnb-base": "14.2.1",
"eslint-loader": "^2.1.0",
"eslint-plugin-cypress": "^2.11.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-vue": "^9.7.0",
"html-webpack-plugin": "^4.3.0",
"moment-locales-webpack-plugin": "^1.2.0",
"preload-webpack-plugin": "^3.0.0-beta.4",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"sinon": "^6.1.4",
"sinon-chai": "^3.2.0",
"standard": "^12.0.1",
"start-server-and-test": "^1.11.3",
"vue-cli-plugin-s3-deploy": "~4.0.0-rc3",
"vue-template-compiler": "^2.7.14",
"webfonts-loader": "^7.0.0",
"webpack": "^4.0.0",
"webpack-bundle-analyzer": "^3.8.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"resolutions": {
"#babel/parser": "7.20.2"
}
}
Changes after the update (package.json):
I know there's Lexical-Vue that is built around Vue 3. But I want to try implementing it on Vue 2 app and it's apparently not working well.
The error says I need an appropriate loader for Lexical module but I'm not quite sure what it wants. My questions are, is the error from my Vue code or webpack? if then, what are the suggested solutions?
<template>
<div ref="editorRef"></div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
import { createEditor } from 'lexical'
export default {
name: 'App',
components: {
HelloWorld
},
mounted: function () {
const config = {
namespace: 'lex'
}
const editor = createEditor(config)
editor.setRootElement(this.$refs.editorRef)
}
}
</script>
error in ./node_modules/lexical/Lexical.dev.js
Module parse failed: Unexpected token (8753:13)
You may need an appropriate loader to handle this file type.
|
| exportJSON() {
| return { ...super.exportJSON(),
| type: 'paragraph',
| version: 1
# ./node_modules/lexical/Lexical.js 8:57-84
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
{
"name": "lexical-test-vue",
"version": "1.0.0",
"description": "A Vue.js project",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"lexical": "^0.6.0",
"vue": "^2.5.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
I get this message after upgrading v-calendar to the latest version on my Vue project.
./node_modules/v-calendar/lib/v-calendar.umd.min.js
Module parse failed: Unexpected token (1:30468)
You may need an appropriate loader to handle this file type.
and this is my code:
webpack.base.conf.js
module: {
rules: [
(...)
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
(...)
package.json:
{
(...)
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"#chenfengyuan/vue-carousel": "^1.0.5",
"axios": "^0.21.1",
"babel-polyfill": "^6.26.0",
"connect-history-api-fallback": "^1.6.0",
"node-sass": "^4.14.1",
"query-string": "^6.2.0",
"quill-image-drop-module": "^1.0.3",
"quill-image-extend-module": "^1.1.2",
"quill-image-resize-module": "^3.0.0",
"sass-loader": "^7.1.0",
"v-calendar": "^2.2.1",
"vue": "^2.6.11",
(...)
},
"devDependencies": {
"#babel/preset-env": "^7.3.1",
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"prerender-spa-plugin": "^3.4.0",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.6.11",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "2.11.1",
"webpack-merge": "^4.1.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
Webpack is so difficult for me...
This webpack settings in my project seems like old version but I don't know where to start to fix it. (I already tried but I had to change too many things and too many errors so I gave up.)
please kindly help if anyone knows the solution.
I had a similar issue with a different package and it was solved by parsing the package.
In your webpack.base.conf.js add this resolve('node_modules/v-calendar') to your include
webpack.base.conf.js
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/v-calendar')]
},
Hello I'm new to vue and jest. I added jest to already existing vue project.
And I want get test coverage result from .js and .vue file.
But. It dosen't go well.
When I try run
vue-cli-service test:unit
Return below Error
Failed to collect coverage from D:\work\project\src\components\service\sidebar\partials\menu.vue
ERROR: Falsy value found in plugins
Here is my config files
.babelrc
{
"presets": [
["env"], "stage-2"
],
"plugins": ["dynamic-import-node"],
"comments": true
}
jset.config.js
module.exports = {
preset: '#vue/cli-plugin-unit-jest/presets/no-babel',
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
collectCoverage :true,
moduleFileExtensions: [
'js',
'json',
'vue'
],
transform: {
// process `*.vue` files with `vue-jest`
".*\\.(vue)$": "vue-jest",
// process js with `babel-jest`
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
collectCoverageFrom: [
'**/*.{js,vue}',
'!**/plugins/**',
'!src/main.js',
'!src/router/index.js',
'!**/node_modules/**'
]
}
package.json
{
"name": "web-application",
"version": "1.0.0",
"private": true,
"description": "web-application",
"author": "John",
"scripts": {
...
"test:unit": "vue-cli-service test:unit",
},
"dependencies": {
...
"copy-webpack-plugin": "^4.6.0",
"dotenv": "^8.1.0",
"element-ui": "^2.10.0",
"eslint-plugin-vue": "^5.2.3",
"fs": "0.0.1-security",
"log4js": "^5.0.0",
"lottie-web": "^5.5.5",
"pm2": "^3.5.1",
"recordrtc": "^5.5.8",
"request": "^2.88.0",
"sweetalert2": "^8.13.0",
"vue": "^2.6.10",
"vue-croppie": "^1.3.13",
"vue-drag-select": "^0.1.5",
"vue-izitoast": "^1.2.1",
"vue-moment": "^4.0.0",
"vue-raven": "^1.0.3",
"vue-router": "^3.1.3",
"vue-tilt.js": "^1.0.2",
"vue-toasted": "^1.1.27",
"vue2-scrollbar": "0.0.3",
"vuex": "^3.1.1"
},
"devDependencies": {
"#babel/preset-env": "^7.4.5",
"#vue/cli-plugin-unit-jest": "^4.2.3",
"#vue/cli-service": "^4.2.3",
"#vue/test-utils": "^1.0.0-beta.31",
"babel-core": "^6.25.0",
"babel-eslint": "^8.2.2",
"babel-jest": "^25.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"crypto-js": "^3.1.9-1",
"css-hot-loader": "^1.4.4",
"css-loader": "^1.0.1",
"es6-promise": "^4.2.8",
"eslint": "^4.19.1",
"eslint-config-prettier": "^6.5.0",
"eslint-config-vue": "^2.0.2",
"eslint-plugin-html": "^4.0.6",
"eslint-plugin-prettier": "^3.1.1",
"file-loader": "^1.1.11",
"file-saver": "^1.3.8",
"glob": "^7.1.4",
"html-loader": "^0.5.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"pkg": "^4.4.0",
"postcss-loader": "^2.0.6",
"sass-loader": "^7.1.0",
"secure-web-storage": "^1.0.2",
"style-loader": "^0.18.2",
"url-loader": "^1.1.2",
"vue-awesome-swiper": "^3.1.3",
"vue-axios": "^2.1.4",
"vue-i18n": "^8.11.2",
"vue-jest": "^3.0.5",
"vue-loader": "^14.2.2",
"webpack": "^4.39.3",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2",
"webpack-merge": "^4.2.1"
},
"bin": {
"app": "./server.js"
},
"lint": "eslint --ext .js,.vue src",
"pkg": {
"assets": [
"dist/**/*"
]
}
}
Please tell me if you need more information. I'll add it.
Thank you for read this question.
This is self answer. Well it was silly problem.
There are three problem
preset: '#vue/cli-plugin-unit-jest/presets/no-babel' in jest.config.js make transform option useless
removed
Jest 24 dosen't support babel 6.
it should be
babel-jest": "^23.6.0"
transform's location was wrong
it should be like
transform: {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
}
Now i fixed three problem. and working good.
I leave this answer because I want my shameful behavior to help others.
I am setting up babel jest in my Vue project. Updating babel is giving me this error.
Error: Plugin/Preset files are not allowed to export objects, only functions - in babel-preset-stage2
Here is my package.json:
{
"name": "JOM",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "node build/build.js",
"lint": "vue-cli-service lint",
"test:e2e": "node test/e2e/runner.js",
"test": "npm run unit",
"pa11y": "pa11y-ci --config pa11y-config.json -j > pa11y-results.json",
"unit": "jest --config jest.config.js",
"serve": "vue-cli-service serve"
},
"dependencies": {
"#sentry/browser": "^5.6.3",
"#sentry/integrations": "^5.6.1",
"#tinymce/tinymce-vue": "^2.0.0",
"axios": "^0.18.0",
"babel-preset-es2015": "^6.24.1",
"cookie": "^0.4.0",
"core-js": "^2.6.5",
"file-saver": "^2.0.2",
"lodash.debounce": "^4.0.8",
"moment": "^2.24.0",
"register-service-worker": "^1.6.2",
"serve": "^11.0.0",
"tinymce": "^5.0.15",
"vue": "^2.6.10",
"vue-fineuploader": "^2.0.0-rc.9",
"vue-router": "^3.1.3",
"vuetify": "^1.5.18",
"vuetify-loader": "^1.3.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/preset-env": "^7.6.0",
"#babel/preset-react": "^7.0.0",
"#babel/preset-stage-2": "^7.0.0",
"#vue/cli-plugin-babel": "^3.7.0",
"#vue/cli-plugin-e2e-nightwatch": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.7.0",
"#vue/cli-plugin-pwa": "^3.7.0",
"#vue/cli-plugin-unit-jest": "^3.9.0",
"#vue/cli-service": "^3.7.0",
"#vue/eslint-config-standard": "^4.0.0",
"#vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.2.0",
"babel-loader": "^8.0.4",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.22.0",
"chalk": "^2.4.2",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"file-loader": "^1.1.4",
"jest": "^22.4.4",
"jest-serializer-vue": "^0.3.0",
"lint-staged": "^8.1.5",
"pa11y": "^5.2.0",
"pa11y-ci": "^2.3.0",
"sinon": "^7.4.2",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-jest": "^1.4.0",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^4.25.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.2.2"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
Babel configuration:.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "#babel/preset-stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
jest.config.js
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': '<rootDir>/node_modules/vue-jest',
'^.+\\.jsx?$': 'babel-jest'
},
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
setupFiles: ['<rootDir>/tests/jest-setup'],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
mapCoverage: true,
testURL: 'http://localhost/'
}
Can someone please help me with a solution? It looks like an issue with babel version. This happens after i upgrade my babel jest