I am trying to write testing for Vue application by using Vue Test Utils. I have faced the issue "ReferenceError: regeneratorRuntime is not defined" because of compiling async/await in babel.
Searching online, I installed the following dependencies
In my "devDependencies"
"#babel/core": "^7.15.0",
"#babel/plugin-transform-runtime": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#vue/cli-plugin-babel": "^3.1.1",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-plugin-unit-jest": "^4.5.13",
"#vue/cli-service": "^3.1.1",
"#vue/test-utils": "^1.2.2",
"babel-cli": "^6.26.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^27.0.6",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
In my "dependencies"
"babel-polyfill": "^6.26.0",
"core-js": "^3.16.3",
Also, added the plugins in babel.config.js
module.exports = {
presets: ['#vue/app', "#babel/preset-env"],
plugins: ['#babel/plugin-transform-runtime', "transform-regenerator"],
}
But when run a test, it still output the same error about ReferenceError: regeneratorRuntime is not defined. I really like to know what's going on with it...Thanks.
Related
A .mov file is necessary to cater Safari users.
However in vue:
<video
id="myvideo"
autoplay
muted
loop
playsinline
>
<source src="#/assets/01/output2.mov" type="video/quicktime" />
</video>
When I trying to compile, "npm run serve" to start the local host:
ERROR Failed to compile with 1 error 5:40:14 pm
error in ./src/assets/01/output2.mov
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
Not sure what to do, i try to instaill a package: File Loader, setup some config in vue.config.js:
module.exports = {
module: {
rules: [
{ test: /\.mov$/, use: 'file-loader' }
],
},
}
However, after i try to run it again, it saids: "Module is not allowed"
My package.json
"dependencies": {
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"file-loader": "^6.2.0",
"gsap": "^3.8.0",
"vue": "^2.6.11",
"vue-cool-lightbox": "^2.7.4",
"vue-i18n": "^8.26.3",
"vue-meta": "^2.4.0",
"vue-router": "^3.2.0",
"vue-slick-carousel": "^1.0.6"
},
"devDependencies": {
"#intlify/vue-i18n-loader": "^1.1.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-cli-plugin-i18n": "~2.3.1",
"vue-template-compiler": "^2.6.11"
},
Thank you all kindly~!
For me it went through like this
module.exports = {
productionSourceMap: false,
transpileDependencies: [
'vuetify'
],
chainWebpack: config => {
config.module
.rule('mov')
.test(/\.mov$/)
.use('file-loader')
.loader('file-loader')
.end()
}
}
My package.json
"dependencies": {
"#lottiefiles/lottie-interactivity": "^1.2.0",
"#lottiefiles/lottie-player": "^1.4.5",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-axios": "^3.4.0",
"vue-meta": "^2.4.0",
"vue-moment": "^4.1.0",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0",
"vuex": "^3.6.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"axios": "^0.18.0",
"babel-eslint": "^10.1.0",
"css-loader": "^6.5.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"style-loader": "^3.3.1",
"stylus": "^0.55.0",
"stylus-loader": "^6.2.0",
"vue-cli-plugin-axios": "~0.0.4",
"vue-cli-plugin-vuetify": "~2.4.3",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
},
npm run serve was working fine, suddenly it started giving the same error. I am not able to understand the root cause of it and why it isn't working. Can anyone suggest how to resolve this issue?
"devDependencies": {
"#vue/cli-plugin-babel": "^4.2.0",
"#vue/cli-plugin-eslint": "^4.2.0",
"#vue/cli-plugin-router": "^4.2.0",
"#vue/cli-plugin-vuex": "^4.2.0",
"#vue/cli-service": "^4.2.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.1.2",
"prettier": "^1.19.1",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
}
To resolve this problem, it is enough to remove plugins of eslint. Therefore, you must remove below line, and again run your project.
"#vue/cli-plugin-eslint": "^4.2.0"
I'm trying to use Jest with VueJS, however I'm getting Cannot find module 'babel-core' at Object.<anonymous> (node_modules/vue-jest/lib/compilers/babel-compiler.js:1:15).
The only way I could fix this was adding
"#babel/core": "^7.7.5",
"babel-core": "^7.0.0-beta.47",
Then test pass, but I do not want to keep the 'beta' version in my package.json, and it is weird to have #babel/core and babel-core together, knowing they are the same package in different versions.
I see the error seems to be in Vue-Jest, but it is already in last version.
Below is my current package.json that breaks (without "babel-core": "^7.0.0-beta.47")
"dependencies": {
"#vue/babel-preset-app": "^3.12.1",
"axios": "^0.19.0",
"chai": "^4.2.0",
"date-fns": "^1.30.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"register-service-worker": "^1.5.2",
"v-click-outside": "^2.1.5",
"vue": "^2.6.10",
"vue-alertify": "^1.1.0",
"vue-body-class": "^2.0.0-beta.2",
"vue-clipboard2": "^0.3.1",
"vue-mq": "^0.1.3",
"vue-multiselect": "^2.1.6",
"vue-recaptcha-v3": "^1.8.0",
"vue-router": "^3.1.3",
"vue-the-mask": "^0.11.1",
"vuelidate": "^0.7.4",
"vuex": "^3.1.2",
"vuex-persist": "^2.2.0"
},
"devDependencies": {
"#babel/core": "^7.7.5",
"#babel/plugin-transform-modules-commonjs": "^7.7.5",
"#babel/polyfill": "^7.7.0",
"#babel/preset-env": "^7.7.5",
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-eslint": "^3.12.1",
"#vue/cli-plugin-pwa": "^3.12.1",
"#vue/cli-service": "^3.12.1",
"#vue/eslint-config-standard": "^4.0.0",
"#vue/test-utils": "^1.0.0-beta.30",
"babel-eslint": "^10.0.3",
"copy-webpack-plugin": "^5.0.5",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"eslint-plugin-vue-libs": "^3.0.2",
"jest": "^24.9.0",
"vue-jest": "^3.0.5",
"vue-svg-loader": "^0.12.0",
"vue-template-compiler": "^2.6.10"
}
Any help would be appreciated.
just use babel-bridge . from github issue
npm install babel-core#^7.0.0-bridge.0 --save-dev
There is some problem with my babel config, not sure what it is..
Error I am seeing:
ERROR Failed to compile with 1 errors friendly-errors 21:27:50
ERROR in ./.nuxt/client.js friendly-errors 21:27:50
Module build failed (from ./node_modules/#nuxt/webpack/node_modules/babel-loader/lib/index.js): friendly-errors 21:27:50
TypeError: this.setDynamic is not a function
my .babelrc looks like this:
{
"presets": [
[
"vue-app",
{
"useBuiltIns": true
}
],
"flow"
],
"plugins": ["#babel/plugin-proposal-decorators", "#babel/plugin-proposal-class-properties"],
"env": {
"test": {
"plugins": ["babel-jest-assertions", "transform-runtime"]
}
}
}
Package-lock, installed plugins:
"#babel/core": "^7.4.5",
"#babel/preset-env": "^7.4.5",
"#nuxtjs/google-analytics": "^2.2.0",
"acorn": "^6.1.1",
"axios": "^0.18.1",
"babel-jest-assertions": "^0.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-flow": "^6.23.0",
What needs to be changed for this config to work? Have visited various stackoverflow answers, and have not found a working fix yet.
UPDATED CONFIG AFTER COMMENTS:
"#babel/plugin-transform-runtime": "^7.4.4",
"#babel/polyfill": "^7.4.4",
"#vue/babel-preset-app": "^3.0.0-rc.2",
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-imports": "^1.5.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
The answer to this problem is this. Be aware of your babel configuration, ie like mentioned in the comments. Babel 6 will not work correctly with Babel 7 plugins and etc. Thank you for all the provided help in the comments.
Following is my package json file. I have installed node_modules successfully. But Getting the error:
"TypeError: Cannot read property 'babel' of undefined"
while running "webpack --watch".
Please let me know if anyone is aware of this.
"axios": "0.16.2",
"babel-plugin-root-import": "^5.1.0",
"bootstrap": "3.3.7",
"chalk": "^2.3.0",
"chart.js": "^2.7.1",
"del": "^3.0.0",
"html-entities": "^1.2.1",
"jquery": "3.1.1",
"karma-es6-shim": "^1.0.0",
"leaflet": "1.0.*",
"less": "2.7.2",
"libphonenumber-js": "^1.2.12",
"lodash": "4.17.4",
"moment": "^2.19.1",
"store": "^2.0.12",
"url-loader": "0.5.8",
"vee-validate": "2.0.0-rc.7",
"vue": "2.4.2",
"vue-chartjs": "^2.7.2",
"vue-loader": "12.0.3",
"vue-paginate": "3.4.0",
"vue-resource": "1.2.1",
"vue-router": "2.3.1",
"vue-template-compiler": "2.4.2",
"vuejs-datepicker": "0.6.3",
"vuex": "^2.5.0"
},
"devDependencies": {
"babel-cli": "6.23.0",
"babel-core": "6.23.1",
"babel-loader": "6.3.2",
"babel-preset-es2015": "6.22.0",
Your version of babel-loader looks to be out of date. Uninstall it with npm uninstall babel-loader and re-install with npm i -D babel-loader. You may also need to update to babel-preset-env and remove babel-preset-es2015
https://babeljs.io/docs/en/env/#upgrading-to-babel-preset-env
For me it was a version mismatch between webpack and babel-loader.
I had babel-loader#6.2.0 with webpack#4.12.0, updating to babel-loader#7.1.4 fixed the issue for me.