Vue-jest Failed to collect coverage from vue file - vue.js

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.

Related

Implementing Lexical editor on Vue 2

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"
]
}

ERROR: Jest: a transform must export a `process` function. STACK: TypeError: Jest: a transform must export a `process` function In VUE Project

ERROR: Jest: a transform must export a process function. STACK: TypeError: Jest: a transform must export a process function In VUE Project
I am trying to run Unit-test my test is passing but it's failing while collecting coverages. I have added jest-config file and all unit-test related packages. Please help, Did i missed any package here??
Package.json
{
"name": "#ava-t2/questionnaire-ui",
"version": "1.0.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:ci": "npm run test:unit --reporters=default --reporters=jest-junit",
"test:e2e": "vue-cli-service test:e2e",
"build:lib": "vue-cli-service build --target lib --name questionnaire-ui src/plugin.ts --mode production",
"pretty-quick": "pretty-quick",
"serve:standalone": "vue-cli-service serve --mode standalone"
},
"main": "dist/questionnaire-ui.umd.js",
"browser": "dist/questionnaire-ui.common.js",
"unpkg": "dist/questionnaire-ui.umd.min.js",
"dependencies": {
"#ava-ui/tailwind-plugin": "^1.1.3",
"#azure/abort-controller": "^1.0.1",
"#azure/storage-blob": "^12.2.0-preview.1",
"#babel/core": "^7.12.10",
"#popperjs/core": "^2.5.4",
"#types/jest": "^24.9.1",
"#types/jspdf": "^1.3.3",
"#vue/cli-plugin-unit-jest": "^4.5.13",
"apisauce": "^2.0.1",
"autoprefixer": "^9.8.6",
"axios": "^0.21.1",
"axios-retry": "^3.1.9",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.0.6",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.5.0",
"core-js": "^3.6.4",
"file-saver": "^2.0.5",
"html2pdf.js": "^0.9.2",
"jest-junit": "^12.2.0",
"jspdf": "^2.3.1",
"lodash": "^4.17.21",
"marked": "^2.0.1",
"node-sass": "^5.0.0",
"postcss": "^7.0.35",
"postcss-prefix-selector": "^1.7.2",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^10.1.0",
"single-spa-vue": "^2.1.0",
"ts-jest": "^26.5.0",
"v-click-outside": "^3.1.2",
"vee-validate": "^3.4.5",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-html-secure": "^1.0.9",
"vue-loader": "^15.9.6",
"vue-property-decorator": "^8.4.1",
"vue-svg-loader": "^0.16.0",
"vuex": "^3.1.3",
"vuex-class": "^0.3.2"
},
"devDependencies": {
"#types/lodash": "^4.14.168",
"#types/marked": "^1.2.1",
"#vue/cli-plugin-babel": "^4.5.0",
"#vue/cli-plugin-router": "~4.3.0",
"#vue/cli-plugin-typescript": "^4.5.0",
"#vue/cli-plugin-vuex": "~4.3.0",
"#vue/cli-service": "^4.5.0",
"#vue/test-utils": "^1.0.3",
"husky": "^4.2.5",
"postcss-prefix-selector": "^1.7.2",
"postcss-preset-env": "^6.7.0",
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1",
"single-spa": "^5.8.2",
"svg-url-loader": "^6.0.0",
"systemjs-webpack-interop": "^2.3.3",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"tslint": "^6.1.2",
"typescript": "^3.9.3",
"vue": "^2.6.12",
"vue-cli-plugin-single-spa": "^2.1.0",
"vue-router": "^3.4.9",
"vue-template-compiler": "^2.6.12"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged tslint . --fix"
}
},
"jest-junit": {
"suiteNameTemplate": "{filepath}",
"outputDirectory": ".",
"outputName": "junit.xml"
}
}
Jest-config file
module.exports = {
preset: "#vue/cli-plugin-unit-jest/presets/typescript-and-babel",
moduleFileExtensions: ["js", "ts", "json", "vue"],
modulePaths: ["./src"],
transform: {
".*\\.(vue)$": "vue-jest",
"^.+\\.tsx?$": "#vue/cli-plugin-unit-jest/node_modules/ts-jest",
"^.+\\.svg$": "<rootDir>/src/svgTransform.js",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
collectCoverage: true,
collectCoverageFrom: [
"**/*.{ts,vue}",
"**/*.{js,jsx}",
"!**/node_modules/**",
"!**/coverage/**",
"!**/index.js"
],
coverageReporters: ["text", "cobertura"],
reporters: ["default", "jest-junit"]
};
According to this discussion, you need jest and ts-jest to be the same versions.

after updating v-calendar : error message: You may need an appropriate loader

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')]
},

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

Plugin/Preset files are not allowed to export objects, only functions

I'm getting this error after updating react-native to "^0.56.0":
bundling failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/ben/vepo/frontend/node_modules/babel-preset-flow/lib/index.js
I tried to do something similar to the highest voted answer here but instead for babel-preset-flow:
https://github.com/babel/babel-loader/issues/540
.babelrc:
"presets": ["react-native", "flow", "#babel/preset-flow"]
package.json
{
"name": "vepo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./app/fonts"
]
},
"jest": {
"preset": "react-native",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
},
"dependencies": {
"#babel/preset-flow": "^7.0.0-beta.52",
"#babel/preset-react": "^7.0.0-beta.52",
"babel-preset-react-native": "^4.0.0",
"flow-typed": "^2.4.0",
"generator-rn-toolbox": "^2.2.0",
"imagemagick": "^0.1.3",
"immutable": "4.0.0-rc.9",
"metro-bundler": "^0.22.1",
"native-base": "^2.3.3",
"prop-types": "^15.5.10",
"react": "16.3.1",
"react-native": "^0.56.0",
"react-native-aws3": "^0.0.8",
"react-native-blur": "^3.1.3",
"react-native-communications": "^2.2.1",
"react-native-drawer": "^2.3.0",
"react-native-fbsdk": "facebook/react-native-fbsdk#065507a",
"react-native-git-upgrade": "^0.2.7",
"react-native-image-picker": "^0.26.7",
"react-native-interactable": "^0.1.2",
"react-native-mail": "^3.0.2",
"react-native-maps": "^0.16.4",
"react-native-modal": "^2.3.2",
"react-native-modalbox": "^1.3.9",
"react-native-multiple-choice": "^0.0.8",
"react-native-navigation": "^1.1.100",
"react-native-off-canvas-menu": "^0.1.31",
"react-native-optimized-flatlist": "^1.0.1",
"react-native-redux-router": "^1.0.7",
"react-native-select-multiple": "^1.0.3",
"react-native-side-menu": "^0.20.1",
"react-native-vector-icons": "^4.4.0",
"react-navigation": "^1.0.0-beta.11",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"redux-immutable": "^4.0.0",
"redux-observable": "^0.14.1",
"reselect": "^3.0.0",
"rxjs": "^5.2.0",
"yarn": "^1.3.2",
"yoga": "^0.0.0"
},
"devDependencies": {
"adm-zip": "^0.4.7",
"babel-cli": "^6.26.0",
"babel-eslint": "^7.1.1",
"babel-plugin-module-resolver": "^2.7.0",
"eslint": "^3.17.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-flowtype": "^2.30.3",
"eslint-plugin-jsx": "^0.0.2",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-react-native": "^2.3.1",
"flow-bin": "^0.72.0",
"plist": "^2.1.0",
"react-devtools": "^3.2.1",
"react-test-renderer": "~15.4.1",
"redux-devtools": "^3.3.2",
"remote-redux-devtools": "^0.5.7",
"remotedev-server": "^0.2.4",
"xcode": "^1.0.0"
}
}
Nothing is working. Any ideas?
EDIT: there is no node_modules/babel-preset-flow folder at all
I had the same error and resolved it by uninstalling babel-preset-flow and installing #babel/preset-flow. I believe this is due to React Native 56 using Babel 7. And add to .babelrc
{
"presets": ["#babel/preset-flow"]
}
Upgrade your babel-preset-react-native dependency.
"babel-preset-react-native": "^5",
You don't need to have #babel/preset-react or #babel/preset-flow installed.
Hope this helps.
Open .babelrc file and then edit the presets section of the code as follows:
"presets": ["module:metro-react-native-babel-preset"],
I solved this issue by installing "babel-preset-react-native-stage-0" in my project and changed .babelrc file:
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
]
for Babel 7 and above and according to this document create a file with name bable.config.js instead of .babelrc and then export presets like this :
const presets = [
"flow"
]
module.exports = {presets}