How to fix: this.setDynamic is not a function - vue.js

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.

Related

Babel - can not use async/await and regeneratorRuntime error

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.

Vue-jest Failed to collect coverage from vue file

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.

How to fix regeneratorRuntime error async method with babel 7.5 + runtime + plugin-transform-runtime

I try to use async/await on a js script (class method) in a webpack config but i have got this error :
search.js:33 Uncaught ReferenceError: regeneratorRuntime is not defined
I have maybe an error in the babelrc file but i tried all things found on the web :/
Stack : WSL1 node 10.16.3 npm 6.11.1 in Visual Studio Code.
Previously, i had polyfill config with a similar problem.
I tried to use new Babel recommandations with #babel/plugin-transform-runtime and #babel/runtime but the issue persists.
I tried to remove /node_modules/ directory and lock package files to generate it again with npm i but nothing changes.
I have no problem with an async function declaration (outside a class).
File with generated error
class Search {
constructor() {...}
async run() {
await this.xxxx();
}
xxxx() {...}
}
.babelrc
{
"presets": [
["#babel/preset-env"],
[
"#babel/env",
{
"modules": false,
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
[ "#babel/plugin-transform-runtime", {"regenerator": true, "corejs": 3} ],
[ "#babel/plugin-transform-async-to-generator" ]
]
}
package.json
{
...
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-async-to-generator": "^7.5.0",
"#babel/plugin-transform-runtime": "^7.6.2",
"#babel/preset-env": "^7.6.3",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^2.0.2",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"fontmin-webpack": "^2.0.4",
"imagemin-gifsicle": "^6.0.1",
"imagemin-jpegtran": "^6.0.0",
"imagemin-optipng": "^7.0.0",
"imagemin-svgo": "^7.0.0",
"imagemin-webpack": "^5.1.0",
"jquery": "^3.4.1",
"loader": "^2.1.1",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-cli": "^6.1.2",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^7.3.1",
"style": "0.0.3",
"style-loader": "^0.23.1",
"sugarss": "^2.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7",
"webpack-manifest-plugin": "^2.0.4"
},
"dependencies": {
"#babel/runtime": "^7.6.3",
"core-js": "^3.3.2",
"detect-it": "^3.0.5",
"gifsicle": "^4.0.1",
"slick-carousel": "^1.8.1"
},
"browserslist": [
"last 2 versions"
]
}
I found the solution.
In the main js file
import "regenerator-runtime/runtime";
Add regenerator-runtime
npm i regenerator-runtime
Thanks.

Object doesn't support property or method 'assign' vuejs

the site is howing blank page when i loaded it on IE 11
i added "#babel/polyfill": but no luck
package.json
"dependencies": {
"#babel/polyfill": "^7.4.4",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bootstrap": "^4.2.1",
"html2pdf.js": "^0.9.1",
"jquery": "^3.3.1",
............
bable.config.js
module.exports = {
presets: [
'#vue/app',
],
};
SCRIPT438: Object doesn't support property or method 'assign'
Please try to add the following script in the head of the index.html page.
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js'></script>

Unexpected identifier with jest + vuejs + vuetify

I've searched high and low for an answer. I suspect that it is a .babelrc issue, but I can't find an answer that works.
The app runs just fine, but as I found out, both Jest and Rollup really depend on .babelrc. The other possible culprit is Leaflet. Of all the components that I build and test, only the one containing Leaflet and vue2-leaflet seem to have this problem. Considering I'm working on a mapping app, this is critical for me.
I'm posting here, because I can't prove anything. And there are a number of other folks that have seen similar problems.
Terminal Output:
nr test:unit
> cxl-vue-leaflet#3.0.1-SNAPSHOT test:unit /Users/dan.mahoney/Projects/cxl-vue-leaflet
> NODE_ENV=testing BABEL_DISABLE_CACHE=1 jest --verbose --no-cache
Determining test suites to run...
# Starting...
# 1 test suites found.
# FAIL src/components/__test__/specs/cxl-vue-leaflet.spec.js
#
# /Users/dan.mahoney/Projects/cxl-vue-leaflet/node_modules/vuetify/lib/index.js:1
#
# ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Vuetify from './components/Vuetify';
# ^^^^^^^
#
# SyntaxError: Unexpected identifier
#
# Stack:
#
# at new Script (vm.js:85:7)
1..0
# Test Suites: 0% , 1 failed, 1 total
# Tests: 0 total
# Time: 2.088s
# Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cxl-vue-leaflet#3.0.1-SNAPSHOT test:unit: `NODE_ENV=testing BABEL_DISABLE_CACHE=1 jest --verbose --no-cache`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cxl-vue-leaflet#3.0.1-SNAPSHOT test:unit 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! /Users/dan.mahoney/.npm/_logs/2019-03-08T21_06_53_748Z-debug.log
.babelrc:
{
"sourceMaps": true,
"presets": [
[
"#babel/preset-env",
]
],
"env": {
"test": {
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
]
}
},
"plugins": [
"transform-es2015-modules-commonjs",
["add-module-exports", {
"vuetify": {
"transform": "vuetify/es5/components/${member}",
"preventFullImport": "false"
},
}],
]
}
Jest config in package.json:
"jest": {
"transformIgnorePatterns": [
"<rootDir>/node_modules/"
],
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1",
"^.+\\.(css)$": "identity-obj-proxy"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
},
"reporters": [
"jest-tap-reporter"
],
"collectCoverageFrom": [
"**/components/*.vue",
"!**/node_modules/**"
]
},
Dependencies:
"dependencies": {
"get-value": "^3.0.1",
"leaflet": "^1.4.0",
"leaflet.icon.glyph": "^0.2.0",
"moment": "^2.23.0",
"vue-moment": "^4.0.0",
"vue2-leaflet": "^2.0.2",
"vue2-leaflet-markercluster": "^3.0.0",
"vuetify": "^1.5.5"
},
"devDependencies": {
"#babel/core": "^7.3.4",
"#babel/plugin-proposal-object-rest-spread": "^7.3.4",
"#babel/plugin-transform-runtime": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"#vue/cli-service": "^3.5.0",
"#vue/test-utils": "^1.0.0-beta.28",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.3.1",
"babel-plugin-add-module-exports": "^1.0.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-source-map-support": "^2.0.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-imports": "^1.4.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"chromedriver": "^2.38.3",
"eslint": "^5.15.1",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-config-strict": "^14.0.1",
"eslint-config-strict-es": "^1.0.4",
"eslint-detailed-reporter": "^0.7.3",
"eslint-import-resolver-webpack": "^0.11.0",
"eslint-loader": "^2.1.0",
"eslint-plugin-html": "^5.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^22.1.3",
"eslint-plugin-leon-require-jsdoc": "0.0.1",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-security": "^1.4.0",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
"eslint-plugin-vue-a11y": "0.0.28",
"growl": "^1.10.2",
"husky": "^1.3.1",
"identity-obj-proxy": "^3.0.0",
"is-image": "^2.0.0",
"jest": "^24.3.1",
"jest-tap-reporter": "^1.9.0",
"jest-transform-stub": "^2.0.0",
"jest-vue-preprocessor": "^1.5.0",
"jsdoc": "^3.5.5",
"jsdoc-vue": "^1.0.0",
"jsdom": "^13.0.0",
"jsdom-global": "^3.0.2",
"material-design-icons-iconfont": "^4.0.2",
"minimist": "^1.2.0",
"nightwatch": "^1.0.11",
"npm-merge-driver": "^2.3.5",
"parse5": "^5.1.0",
"raf": "^3.4.0",
"require-extension-hooks": "^0.3.2",
"require-extension-hooks-babel": "^0.1.1",
"require-extension-hooks-vue": "^2.0.0",
"rollup": "^1.6.0",
"rollup-plugin-analyzer": "^3.0.0",
"rollup-plugin-babel": "^4.3.0",
"rollup-plugin-babel-minify": "^7.0.0",
"rollup-plugin-commonjs": "^9.1.8",
"rollup-plugin-postcss": "^2.0.1",
"rollup-plugin-replace": "^2.1.0",
"rollup-plugin-vue": "^4.3.2",
"selenium": "^2.20.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"tap-summary": "^4.0.0",
"vue": "^2.6.8",
"vue-jest": "^3.0.4",
"vue-loader": "^15.7.0",
"vue-meta": "^1.5.8",
"vue-template-compiler": "^2.6.8",
"vuepress": "^1.0.0-alpha.42",
"vuepress-jsdoc": "^1.0.3",
"vuetify-loader": "^1.0.8"
},
I'm really at a loss here. Thanks for any help.
By default, Jest doesn't transform anything in node_modules (where vuetify package lives), but you actually need it to run vuetify through the configured babel-jest transform so that the imports could be transpiled. To do that, use this config in jest.config.js:
module.exports = {
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!vuetify)'
],
...
}
A Pull Request was just submitted to document this pitfall.
For anyone still experiencing this with Vue 3/Vuetify 3, the fix for me was similar, but I wasn't using many of the packages in the original question:
Jest config
"jest": {
"preset": "#vue/cli-plugin-unit-jest",
"transform": {
"^.+\\.vue$": "#vue/vue3-jest",
"^.+\\.(js|mjs)$": "babel-jest"
},
"transformIgnorePatterns": ["/node_modules/(?!(vuetify)/)"]
// plus some globals and a module alias
}
Babel config
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset',
],
};
Dependency versions
"dependencies": {
"vue": "^3.2.31",
"vuetify": "^3.0.4",
"#vue/cli-plugin-babel": "^5.0.8",
"#vue/cli-plugin-unit-jest": "~5.0.8",
"#vue/cli-service": "~5.0.1",
"#vue/compiler-sfc": "^3.0.7",
"#vue/test-utils": "^2.2.6",
"#vue/vue3-jest": "^27.0.0-alpha.4",
"jest": "^27.5.1"
}
The trick was configuring the transform/transformIgnorePatterns as we had not previously needed to transform any Node modules. This fixed the Jest encountered an unexpected token/ SyntaxError: Cannot use import statement outside a module
I did still run into an issue where I could not import Vuetify components in my test files, I would get the following error:
Cannot find module 'vuetify/components' from 'tests/unit/InfoWindow/sections/DisplayFields/ScheduleDisplay.spec.js'
1 | import {shallowMount} from '#vue/test-utils';
2 | import {createVuetify} from 'vuetify';
> 3 | import * as components from 'vuetify/components';
| ^
4 | import * as directives from 'vuetify/directives';
I'm not sure of the cause, but the solution was to add explicit mappings to the Jest config:
"moduleNameMapper": {
"^vuetify/components$": "<rootDir>/node_modules/vuetify/lib/components/index.mjs",
"^vuetify/directives$": "<rootDir>/node_modules/vuetify/lib/directives/index.mjs"
}