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
Related
While I was trying to update npm packages, this error popped up which doesn't give any details. I tried to check if is because of my webpack config, but is not because I tried running webpack without using my config.
I saw on other forums this error but it was thrown one or two times, not 30 times like in my case.
These are my dependencies and I'm guessing one of this package versions throws this error without other details:
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/plugin-proposal-class-properties": "^7.2.0",
"#babel/plugin-proposal-decorators": "^7.4.0",
"#babel/plugin-proposal-export-namespace-from": "^7.2.0",
"#babel/plugin-proposal-function-sent": "^7.2.0",
"#babel/plugin-proposal-json-strings": "^7.2.0",
"#babel/plugin-proposal-numeric-separator": "^7.2.0",
"#babel/plugin-proposal-object-rest-spread": "^7.4.3",
"#babel/plugin-proposal-optional-chaining": "^7.9.0",
"#babel/plugin-proposal-throw-expressions": "^7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-syntax-import-meta": "^7.2.0",
"#babel/plugin-syntax-jsx": "^7.2.0",
"#babel/plugin-transform-modules-commonjs": "^7.4.3",
"#babel/plugin-transform-react-jsx": "^7.3.0",
"#babel/plugin-transform-runtime": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/register": "^7.4.0",
"#babel/runtime": "^7.4.3",
"#babel/runtime-corejs3": "^7.4.3",
"#soda/friendly-errors-webpack-plugin": "^1.8.1",
"#testing-library/dom": "^7.2.2",
"#types/jest": "^25.1.4",
"#types/node": "^11.15.39",
"#vue/test-utils": "^1.0.0-beta.31",
"async": "^2.6.2",
"autoprefixer": "^9.5.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^26.6.3",
"babel-loader": "^8.0.0",
"babel-plugin-transform-vue-jsx": "^4.0.1",
"case-sensitive-paths-webpack-plugin": "^2.2.0",
"chalk": "^2.4.2",
"copy-webpack-plugin": "^11.0.0",
"cross-env": "^5.2.0",
"css-loader": "^6.7.2",
"css-minimizer-webpack-plugin": "4.2.2",
"csso-webpack-plugin": "^1.0.0-beta.10",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.2.2",
"eventsource-polyfill": "^0.9.6",
"exports-loader": "^0.7.0",
"expose-loader": "^4.0.0",
"file-loader": "^6.2.0",
"glob": "^7.1.6",
"html-webpack-plugin": "^5.5.0",
"imports-loader": "^0.8.0",
"jest": "^26.6.3",
"jest-canvas-mock": "^2.3.1",
"jest-date-mock": "^1.0.8",
"jest-expect-message": "^1.0.2",
"jest-serializer-vue": "^2.0.2",
"jest-sonar-reporter": "^2.0.0",
"jquery-mockjax": "^2.5.0",
"jsdoc": "^3.6.5",
"mini-css-extract-plugin": "^2.7.2",
"node-notifier": "^5.4.0",
"node-sass": "^4.11.0",
"ol": "6.5.0",
"ora": "^3.3.0",
"portfinder": "^1.0.20",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"resolve-url-loader": "^3.0.1",
"rimraf": "^2.6.3",
"sass-loader": "^13.2.0",
"semver": "^6.0.0",
"shelljs": "^0.8.3",
"terser-webpack-plugin": "4.2.3",
"ts-loader": "^5.3.3",
"typescript": "^4.9.4",
"uglify-js": "3.2.0",
"url-loader": "^4.1.1",
"vue-class-component": "^7.0.2",
"vue-eslint-parser": "^6.0.3",
"vue-jest": "^3.0.7",
"vue-loader": "^15.7.0",
"vue-property-decorator": "^8.1.0",
"vue-style-loader": "^4.1.2",
"vue-styleguidist": "^4.56.3",
"vue-template-compiler": "^2.6.1",
"vuedraggable": "^2.20.0",
"webpack": "^5.62.2",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^3.3.1",
"webpack-merge": "^4.2.1",
"whatwg-fetch": "^3.0.0",
"write-file-webpack-plugin": "^4.5.0" },
It seems my issue was related to the cli itself. I needed to downgrade the webpack-cli package from v5 to v4 and it removed the error. Unfortunate fix though.
TLDR: custom events ($listeners) won't be automatically binded in the vue 3 compat build. It is as if all the components would have inheritAttrs: false (although $attrs will be binded and it doesn't include class/style either as the docs say it would)
I followed the official vue 3 migration guide with the compat build, it should've been relatively easy to migrate, however it seems a bit harder as expected. So I added the following code to the vue.config.js:
// Vue 2 => Vue 3 migration config
config.resolve.alias.set('vue', '#vue/compat');
config.module
.rule('vue')
.use('vue-loader')
.tap((options) => ({
...options,
compilerOptions: {
compatConfig: {
MODE: 3,
},
},
}));
Most of the work is already done, however I realised that none of the listeners seems to be working. After some investigation I found out that the $listeners object won't be automatically binded as they should be. They aren't included for some reason in the $attrs object neither will they be inherited (I guess they are related).
I tried INSTANCE_LISTENERS: false, option with both false and true values, unfortunately neither seemed to work. Now the only option I can see right now is adding v-on="$listeners" to all components that may need to bind any events. This is obviously not a good solution, it is hacky and they are also removed in vue 3 completely but I couldn't think of another solution. Did anybody else experience the same and know maybe a better solution for this?
Thanks for your help in advance!
EDIT:
I thought maybe sharing the dependencies could help in detecting the issue so here they are:
"dependencies": {
"#apollo/client": "^3.5.5",
"#datadog/browser-logs": "^2.17.0",
"#datadog/browser-rum": "^2.17.0",
"#popperjs/core": "^2.10.1",
"#rd-internal/rd-vue-gtm": "^1.1.0",
"#vue/apollo-option": "^4.0.0-alpha.15",
"#vue/compat": "^3.2.23",
"#vue/runtime-dom": "^3.2.23",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-schema": "^1.2.5",
"apollo-upload-client": "^14.1.3",
"bootstrap": "^5.1.0",
"bootstrap-vue": "^2.21.2",
"chart.js": "^2.9.4",
"core-js": "^3.17.2",
"dayjs": "^1.10.6",
"graphql": "^15.7.2",
"graphql-tag": "^2.12.6",
"graphql-tools": "^4.0.7",
"intersection-observer": "^0.12.0",
"loader-utils": "^2.0.0",
"lodash.clonedeep": "^4.5.0",
"lodash.debounce": "^4.0.8",
"lodash.get": "^4.4.2",
"lodash.isequal": "^4.5.0",
"lodash.merge": "^4.6.2",
"lodash.set": "^4.3.2",
"lodash.some": "^4.6.0",
"normalize.css": "^8.0.1",
"papaparse": "^5.3.1",
"tinycolor2": "^1.4.2",
"v-tooltip": "^2.1.3",
"vue": "^3.2.23",
"vue-apollo": "^3.0.7",
"vue-chartjs": "^3.5.1",
"vue-ctk-date-time-picker": "^2.5.0",
"vue-i18n": "^9.2.0-beta.22",
"vue-meta": "^2.4.0",
"vue-router": "^4.0.12",
"vuelidate": "^0.7.6",
"vuelidate-error-extractor": "^2.4.1",
"whatwg-fetch": "^3.6.2"
},
"devDependencies": {
"#intlify/eslint-plugin-vue-i18n": "^1.2.0",
"#jagi/jest-transform-graphql": "^1.0.2",
"#testing-library/jest-dom": "^5.14.1",
"#typescript-eslint/eslint-plugin": "^4.30.0",
"#typescript-eslint/parser": "^4.30.0",
"#vue/cli-plugin-babel": "^4.5.15",
"#vue/cli-plugin-eslint": "^4.5.15",
"#vue/cli-plugin-typescript": "^4.5.15",
"#vue/cli-plugin-unit-jest": "^4.5.15",
"#vue/cli-service": "^4.5.15",
"#vue/compiler-sfc": "^3.2.23",
"#vue/eslint-config-airbnb": "^5.3.0",
"#vue/eslint-config-typescript": "^7.0.0",
"#vue/test-utils": "^1.2.2",
"babel-eslint": "^10.1.0",
"babel-jest": "^27.1.0",
"casual-browserify": "^1.5.19-2",
"change-case": "^4.1.2",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-sonarjs": "^0.10.0",
"eslint-plugin-unicorn": "^35.0.0",
"eslint-plugin-vue": "^7.17.0",
"eslint-plugin-vue-scoped-css": "^1.3.0",
"full-icu": "^1.3.4",
"glob": "^7.1.7",
"html-webpack-plugin": "^4.5.1",
"hygen": "^6.1.0",
"inflection": "^1.13.1",
"jest-junit": "^12.2.0",
"lint-staged": "^11.1.2",
"node-sass": "^6.0.1",
"sass-loader": "^10.2.0",
"sockjs-client": "^1.5.2",
"style-resources-loader": "^1.4.1",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"stylelint-declaration-use-variable": "^1.7.3",
"stylelint-no-unsupported-browser-features": "^5.0.1",
"stylelint-order": "^4.1.0",
"stylelint-scss": "^3.20.1",
"ts-jest": "^24.3.0",
"typescript": "^4.4.2",
"vue-cli-plugin-webpack-bundle-analyzer": "~4.0.0",
"vue-composition-test-utils": "^1.0.3"
},
Npm run serve is not working after I freshly installed npm in the project folder. I am using the latest webpack. Also tried uninstalling and installing npm gloabally. Though this was running before npm install. Nothing has changes in package.json since begining. I don't have idea whats going wrong here. Gives error below
at checkResourceSource (E:\projects\project-emr\emr\node_modules#vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)
{
"dependencies": {
"#fortawesome/fontawesome-free": "^5.11.2",
"#toast-ui/vue-calendar": "^1.1.1",
"animate.css": "^3.7.2",
"auth0-js": "^9.12.2",
"autoprefixer": "latest",
"axios": "^0.19.2",
"bootstrap-vue": "^2.1.0",
"cache-loader": "^4.1.0",
"classnames": "2.2.6",
"core-js": "^3.3.2",
"css-loader": "^3.2.0",
"highcharts": "^8.0.0",
"highcharts-vue": "^1.3.5",
"instantsearch.css": "^7.3.1",
"instantsearch.js": "^3.6.0",
"jquery": "^3.4.1",
"js-cookie": "^2.2.1",
"lodash": "latest",
"lottie-web": "^5.5.10",
"material-design-icons-iconfont": "^6.1.0",
"moment": "^2.24.0",
"node-snackbar": "^0.1.16",
"postcss-loader": "^3.0.0",
"ramda": "^0.26.1",
"register-service-worker": "^1.6.2",
"smooth-scrollbar": "^8.5.1",
"swiper": "^5.3.0",
"url-loader": "^3.0.0",
"vee-validate": "^3.2.2",
"vue": "^2.6.10",
"vue-class-component": "^7.2.3",
"vue-file-agent": "^1.7.3",
"vue-flatpickr-component": "^8.1.5",
"vue-form-wizard": "^0.8.4",
"vue-i18n": "^8.15.3",
"vue-instantsearch": "^2.6.0",
"vue-morris": "^1.1.0",
"vue-photo-grid": "^1.0.2",
"vue-property-decorator": "^8.3.0",
"vue-resource": "^1.5.1",
"vue-router": "^3.1.3",
"vue-select": "^3.4.0",
"vue-slick": "^1.1.15",
"vue-slider-component": "3.0.32",
"vuedraggable": "^2.23.2",
"vuefire": "^2.2.1",
"vuetify": "^2.3.10",
"vuex": "^3.0.1",
"webpack": "latest",
"wowjs": "^1.1.3"
},
"devDependencies": {
"#babel/polyfill": "^7.7.0",
"#fullcalendar/list": "^4.3.0",
"#mdi/font": "^5.6.55",
"#vue/cli-plugin-babel": "~4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-plugin-pwa": "^4.1.2",
"#vue/cli-plugin-router": "^4.1.0",
"#vue/cli-plugin-vuex": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.3",
"bootstrap": "^4.3.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"lint-staged": "^9.5.0",
"mutationobserver-shim": "^0.3.3",
"node-sass": "^4.13.1",
"popper.js": "^1.16.0",
"portal-vue": "^2.1.6",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-bootstrap-vue": "^0.6.0",
"vue-cli-plugin-i18n": "~0.6.1",
"vue-clipboard2": "^0.3.1",
"vue-loader": "^15.7.2",
"vue-template-compiler": "^2.6.10"
}
I'm trying to migrate to the last vue-styleguidist but since v4.0.0 i can't.
With the 3.26.2 it's working fine.
I have this error :
(node:11764) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 6)
There is a guide for the migration?
It's very strange since the babel typescript snafu everything is fine, maybe i need to add something inside babel configuration?
i'm working with :
NodeJS 10.15.1
My dependencies :
"dependencies": {
"async-validator": "^1.12.2",
"cleave.js": "^1.5.3",
"color": "^3.1.2",
"ie11-custom-properties": "^2.3.0",
"interactjs": "^1.7.2",
"lodash": "^4.17.15",
"lodash.orderby": "^4.6.0",
"mobile-device-detect": "^0.2.3",
"normalize-wheel": "^1.0.1",
"portal-vue": "^1.5.1",
"throttle-debounce": "^1.0.1",
"vue": "^2.6.10",
"vue-avatar": "^2.1.8",
"vue-i18n": "^7.4.1",
"vue-infinite-scroll": "^2.0.2",
"vue-lorem-ipsum": "0.0.1",
"vue-router": "^3.1.3",
"vue-styleguidist": "4.0.3",
"vue-svgicon": "^2.1.3",
"vuebar": "^0.0.20"
},
"devDependencies": {
"#babel/core": "^7.7.4",
"#vue/babel-preset-app": "^3.12.1",
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-unit-jest": "^3.12.1",
"#vue/cli-service": "^3.12.1",
"#vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^8.2.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.2",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^22.4.4",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.26.0",
"cheerio": "^1.0.0-rc.3",
"connect-history-api-fallback": "^1.6.0",
"cross-env": "^5.2.1",
"css-loader": "^0.28.9",
"deepmerge": "^2.0.1",
"eslint": "^4.16.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-import-resolver-webpack": "^0.8.4",
"eslint-loader": "^2.2.1",
"eslint-plugin-html": "^4.0.2",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-vue": "^4.4.0",
"express": "^4.17.1",
"favicons-webpack-plugin": "0.0.8",
"file-loader": "^1.1.11",
"highlight.js": "^9.16.2",
"html-webpack-plugin": "^3.1.0",
"http-proxy-middleware": "^0.18.0",
"jest": "^24.9.0",
"jest-cucumber": "^2.0.11",
"jest-html-reporters": "^1.2.0",
"jest-serializer-vue": "^2.0.2",
"json-loader": "^0.5.7",
"markdown-it": "^8.4.0",
"markdown-it-container": "^2.0.0",
"mini-css-extract-plugin": "^0.2.0",
"node-sass": "^4.13.0",
"nodemon": "^1.19.4",
"normalize.css": "^8.0.0",
"npm-run-all": "^4.1.2",
"ora": "^2.0.0",
"postcss-loader": "^2.0.10",
"postcss-url": "^7.3.0",
"raw-loader": "^0.5.1",
"resolve-url-loader": "^2.3.2",
"sass-loader": "^6.0.6",
"shelljs": "^0.8.1",
"style-loader": "^0.20.3",
"ts-jest": "^24.2.0",
"tslint": "^5.20.1",
"typescript": "^3.7.2",
"url-loader": "^1.0.1",
"vue-clipboards": "^1.3.0",
"vue-html-loader": "^1.2.4",
"vue-jest": "^3.0.5",
"vue-loader": "^14.2.4",
"vue-markdown-loader": "^2.4.0",
"vue-server-renderer": "^2.6.10",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.2",
"webpack-bundle-analyzer": "^2.9.2",
"webpack-cli": "^3.3.10",
"webpack-dashboard": "^1.1.1",
"webpack-dev-middleware": "^3.7.2",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2",
"yaml-loader": "^0.5.0"
}
After updating to vue 2.5.8 I've started getting this error: Cannot create property 'inject' on string 'reactiveData'
My dependencies are as follows:
"axios": "^0.16.2",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"buefy": "^0.5.3",
"chart.js": "^2.7.0",
"cross-env": "^5.0.1",
"element-ui": "^2.0.5",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"moment-timezone": "^0.5.13",
"pusher-js": "^4.2.1",
"vanilla-tilt": "^1.4.1",
"vue": "2.5.8",
"vue-chartjs": "^2.8.7",
"vue-router": "^2.7.0",
"vue2-google-maps": "0.8.0",
"vuex": "^2.4.1"
Would love to know how I can get around this one.