How to use HAML inside a .vue file in vue 3-rc.3 - vue.js

I am trying to use HAML inside the .vuefile in the vue version 3 but it is not working.
What I did.
Intall vue cli version 3.0.0-rc.3
Created a new project with:
My package is:
{
"name": "project 3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"haml": "^0.4.3",
"haml-haml-loader": "^1.0.1",
"hamljs": "^0.6.2",
"register-service-worker": "^1.0.0",
"vue": "^2.5.16",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-beta.15",
"#vue/cli-plugin-eslint": "^3.0.0-beta.15",
"#vue/cli-plugin-pwa": "^3.0.0-beta.15",
"#vue/cli-plugin-unit-mocha": "^3.0.0-beta.15",
"#vue/cli-service": "^3.0.0-beta.15",
"#vue/test-utils": "^1.0.0-beta.16",
"chai": "^4.1.2",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"vue-template-compiler": "^2.5.16"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
In the old vue cli version 2 with pwa template it worked fine, my package.json for the one that works:
{
"name": "project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Ruan Carlos <ruanltbg#gmail.com>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"haml": "^0.4.3",
"haml-haml-loader": "^1.0.1",
"hamljs": "^0.6.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.5",
"babel-core": "^6.26.0",
"sw-precache-webpack-plugin": "^0.11.4",
"babel-eslint": "^8.0.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.1.0",
"connect-history-api-fallback": "^1.4.0",
"copy-webpack-plugin": "^4.1.1",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"eslint": "^4.9.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-config-airbnb-base": "^11.1.3",
"eslint-import-resolver-webpack": "^0.8.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.5",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.4",
"webpack-bundle-analyzer": "^2.9.0",
"cross-env": "^5.0.5",
"karma": "^1.7.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^1.3.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.5",
"mocha": "^4.0.1",
"chai": "^4.1.2",
"sinon": "^4.0.1",
"sinon-chai": "^2.14.0",
"inject-loader": "^3.0.1",
"babel-plugin-istanbul": "^4.1.5",
"phantomjs-prebuilt": "^2.1.15",
"chromedriver": "^2.33.1",
"cross-spawn": "^5.1.0",
"nightwatch": "^0.9.16",
"selenium-server": "^3.6.0",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.3.0",
"rimraf": "^2.6.2",
"url-loader": "^0.6.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.7.1",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^4.1.0",
"uglify-es": "^3.1.3"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Does anybody has any clue?

Related

Either Build or Serve gets error according to different vue-loader version

My vue#2 project has a vue-loader dependency of 15.7.1 and npm run dev serve the purpose. To deploy the project I run npm run build command and get's the following error:
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
However, I changed the vue-loader to an older version of 14.2.2 and build the project again that beautifully worked. Now when I want to serve the project in development mode with the command npm run dev it gets an error:
Cannot find module 'vue-loader/lib/plugin'. requireStack: 'C:\\client\\build\\webpack.dev.conf.js', ..
I need a vue-loader version that will fullfill the both purpose at a time. Here is my package.json:
{
"name": "client",
"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",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"file-saver": "^2.0.2",
"form-data": "^2.5.1",
"generate-password": "^1.4.2",
"izitoast": "^1.4.0",
"jimp": "^0.6.8",
"js-cookie": "^2.2.0",
"lodash": "^4.17.15",
"mdi": "^2.2.43",
"moment": "^2.24.0",
"nprogress": "^0.2.0",
"pdfjs": "^2.3.1",
"pdfjs-dist": "^2.1.266",
"pdfmake": "^0.1.60",
"sweetalert2": "^8.13.5",
"vue": "^2.5.2",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-flag-icon": "^1.0.6",
"vue-i18n": "^8.12.0",
"vue-number-animation": "^1.1.2",
"vue-offline": "^2.0.8",
"vue-router": "^3.0.7",
"vue-loader": "^14.2.2",
"vuetify": "^2.0.4",
"vuetify-datetime-picker": "^2.0.3",
"vuex": "^3.1.1",
"vuex-persistedstate": "^2.5.4",
"vuex-router-sync": "^5.0.0",
"xlsx": "^0.15.1"
},
"devDependencies": {
"#mdi/font": "^3.7.95",
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.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",
"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",
"material-design-icons-iconfont": "^5.0.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-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"
]
}

Vue 2 based , vue-cli, vue-property-decorator, vue-class-component, Vuetify, project migration to Vue 3

I am working on project upgrade from Vue 2 to Vue 3. The code base changed according to Vue migration documents: https://v3-migration.vuejs.org/breaking-changes/introduction.html#overview. I have mismatch of above mentioned libraries. Does somebody has a running project and would share their working library versions
Current mismatch error is :
TypeError: Cannot read property 'NormalModule' of undefined
at VueLoaderPlugin.apply (C:[credentials]\app\node_modules\vue-loader-v16\dist\pluginWebpack5.js:44:47)
at webpack (C:[credentials]app\node_modules\#vue\cli-service\node_modules\webpack\lib\webpack.js:51:13)
at serve (C:[credentials]app\node_modules\#vue\cli-service\lib\commands\serve.js:163:22)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Package.json:
"scripts": {
"serve": "vue-cli-service serve",
"build": "npm run build:dashboard",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"build-storybook": "build-storybook",
"build:dashboard": "vue-cli-service build --dest $npm_package_config_dashboard src/main.ts",
"compile-typescript": "tsc",
"start": "node app.js",
"storybook": "start-storybook -p 6006",
"watch:tsc": "npx tsc --watch"
},
"dependencies": {
"#juggle/resize-observer": "^3.2.0",
"#popperjs/core": "2.4.4",
"#sentry/browser": "^5.28.0",
"#sentry/integrations": "^5.28.0",
"#sentry/tracing": "^5.28.0",
"#stripe/stripe-js": "^1.9.0",
"#types/lodash": "^4.14.161",
"#types/lodash-es": "^4.17.3",
"#vue/cli-service-global": "^4.5.15",
"bootstrap": "^4.6.1",
"chart.js": "3.0.0-beta.6",
"core-js": "^3.6.5",
"dayjs": "^1.8.36",
"jquery": "^3.5.1",
"lodash-es": "4.17.15",
"nouislider": "14.6.2",
"odometer": "0.4.8",
"patternomaly": "^1.3.2",
"posthog-js": "^1.7.0",
"register-service-worker": "^1.7.1",
"tippy.js": "^6.2.6",
"vue": "^3.2.20",
"vue-class-component": "^8.0.0-rc.1",
"vue-property-decorator": "^10.0.0-rc.3",
"vue-router": "^4.0.0-alpha.6",
"vue-shepherd": "0.2.1",
"vuetify": "^3.0.0-alpha.12",
"vuex": "^4.0.0-alpha.1",
"vuex-persist": "^2.3.0"
},
"devDependencies": {
"#storybook/addon-actions": "^6.2.9",
"#storybook/addon-essentials": "^6.2.9",
"#storybook/addon-knobs": "^6.2.9",
"#storybook/addon-links": "^6.2.9",
"#storybook/vue": "^6.2.9",
"#types/jest": "^26.0.23",
"#types/jquery": "^3.5.5",
"#types/node": "^12.12.62",
"#types/nouislider": "^9.0.5",
"#types/wnumb": "^1.2.0",
"#typescript-eslint/eslint-plugin": "^3.10.1",
"#typescript-eslint/parser": "^3.10.1",
"#vue/cli": "^4.5.13",
"#vue/cli-plugin-babel": "^4.5.12",
"#vue/cli-plugin-eslint": "^4.5.12",
"#vue/cli-plugin-pwa": "^4.5.12",
"#vue/cli-plugin-router": "^4.5.12",
"#vue/cli-plugin-typescript": "^4.5.12",
"#vue/cli-plugin-unit-jest": "^4.5.12",
"#vue/cli-plugin-vuex": "^4.5.15",
"#vue/cli-service": "^4.5.13",
"#vue/compiler-sfc": "^3.2.27",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^5.1.0",
"#vue/test-utils": "^2.0.0-alpha.1",
"css-loader": "^4.3.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^7.0.0-alpha.0",
"eslint-watch": "^7.0.0",
"faker": "^5.1.0",
"fibers": "^5.0.0",
"husky": "^4.3.0",
"jest": "^26.4.2",
"lint-staged": "^10.4.0",
"node-sass": "^5.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.1.2",
"prettier-eslint": "^11.0.0",
"react-is": "^16.13.1",
"sass": "^1.48.0",
"sass-loader": "^10.2.0",
"style-loader": "^1.2.1",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.18.0",
"ts-jest": "^26.3.0",
"typescript": "^4.4.4",
"vue-cli-plugin-sass-resources-loader": "^1.0.0",
"vue-cli-plugin-vue-next": "~0.1.4",
"vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0",
"vue-eslint-parser": "^7.1.0",
"vue-loader": "^15.9.1",
"vue-style-loader": "^4.1.3",
"watch": "^1.0.2",
"wnumb": "^1.2.0",
"babel-eslint": "^10.1.0"
},
"config": {
"dashboardprod": "../../wwwroot/dashboard",
"dashboard": "./dist"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": [
"vue-cli-service lint",
"git add"
],
"*.{scss,vue}": "stylelint"
}
}
Any and all advises are appreciated
My colleague solved it by moving to Vite. My suggestion would be to drop webpack and use Vite instead.
Migration guide for Vue 2 to 3 here: https://v3-migration.vuejs.org/
Vuetify migration guide: https://next.vuetifyjs.com/en/getting-started/upgrade-guide

SyntaxError: Unexpected token typeof

When i perform yarn test getting this issue
SyntaxError: Unexpected token typeof
Not used typeof in the project but it's used in react-native package. Also gone through this SO question, accepted answer is not working and another answer (adding react-native-web package) is giving some other problems.
Do we have any solution to solve this problem
Edit
package.json
{
"name": "xxxx",
"version": "x.x.xx",
"description": "xxx",
"author": "xxx",
"main": "lib/index.js",
"scripts": {
"dev": "node scripts/dev-server.js",
"build": "bin/build",
"build:mobile": "bin/build-mobile",
"start": "npm run dev",
"start:mobile": "bin/start-mobile",
"android": "bin/android",
"ios": "bin/ios",
"lint": "eslint --ext .js,.jsx src",
"lint-fix": "eslint --fix --ext .js,.jsx src",
"test": "jest",
"validate": "yarn test",
"snapshot": "jest --updateSnapshot",
"test:mobile": "bin/test-mobile",
"eject:mobile": "bin/eject-mobile",
"prepublishOnly": "yarn build",
"configureConsumerRepo": "git submodule init && yarn pullConsumerRepo",
"pullConsumerRepo": "git submodule update --remote --merge",
"patch": "npm version patch -m \"Upgrade to %s\"",
"mobile": "yarn build:mobile && yarn start:mobile"
},
"husky": {
"hooks": {
"pre-push": "yarn validate"
}
},
"dependencies": {
"chroma-js": "^1.3.4",
"moment": "^2.19.3",
"react-native-parsed-text": "^0.0.20",
"scroll-into-view": "^1.9.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-cli": "^6.26.0",
"babel-core": "^6.22.1",
"babel-eslint": "^8.0.1",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.1",
"enzyme-to-json": "^3.1.2",
"eslint": "^4.8.0",
"eslint-config-airbnb": "^16.0.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"husky": "^1.0.0-rc.1",
"jest-cli": "^21.2.1",
"jest-junit": "^3.3.0",
"jest-styled-components": "^4.9.0",
"normalize.css": "^7.0.0",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"ora": "^1.2.0",
"postcss-flexbugs-fixes": "^3.2.0",
"postcss-loader": "^2.0.6",
"prop-types": "^15.6.0",
"react": "^16.13.1",
"react-dom": "^16.0.0-rc.3",
"react-helmet": "^5.2.0",
"react-native": "0.63.4",
"react-native-mock-render": "^0.0.16",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-select": "^2.1.0",
"react-test-renderer": "^16.2.0",
"redux": "^3.7.2",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"style-loader": "^0.19.0",
"styled-components": "^2.2.1",
"url-loader": "^0.5.8",
"wdio-mocha-framework": "^0.5.11",
"wdio-sauce-service": "^0.4.4",
"webdriverio": "^4.9.11",
"webpack": "^2.6.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"jest": {
"notify": true,
"setupFiles": [
"<rootDir>/src/components/__tests__/shim.js"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/components/__tests__/assetsTransformer.js",
"\\.(css|less)$": "<rootDir>/src/components/__tests__/assetsTransformer.js"
},
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"testPathIgnorePatterns": [
"<rootDir>/src/components/__tests__/shim.js",
"<rootDir>/src/components/__tests__/utils.js",
"<rootDir>/src/components/__tests__/assetsTransformer.js",
"<rootDir>/webdriverio-test/"
]
},
"engines": {
"node": ">= 10.0.0",
"npm": ">= 6.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"peerDependencies": {
"react-native-fast-image": "^5.2.0"
}
}

Vue project "npm run dev" results in "This site cannot be reached error"

When I run "npm run dev" for my Vue project it says it compiled correctly but 0.0.0.0:8080 says "This site can't be reached". I have also tried localhost:8080 and gotten the same result.
I don't know if this matters, but the current version of vue on my computer is version 3.11.0
How do I fix this?
Thanks!
Edit: Here is my package.json file
{
"name": "a-site",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "An Author",
"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": {
"axios": "^0.18.1",
"es6-promise": "^4.2.4",
"gsap": "^2.0.0",
"hammerjs": "^2.0.8",
"numeral": "^2.0.6",
"prejs": "^1.2.6",
"v-money": "^0.8.1",
"vee-validate": "^2.0.9",
"vue": "^2.6.6",
"vue-router": "^3.0.1",
"vue-scroll-stop": "^0.1.5",
"vue-youtube-embed": "^2.2.1",
"vue2-filters": "^0.3.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^8.5.1",
"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",
"node-sass": "^4.9.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",
"sass-loader": "^7.0.1",
"sass-resources-loader": "^1.3.3",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "1.0.1",
"vue-loader": "^13.7.3",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.11.5",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

Error: Plugin/Preset files are not allowed to export objects, only functions - Babel jest

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