How to resolve eslient token error that is not further specified? - javascript

I am trying to execute a simple function. But eslient tells me that I have a Parsing error: Unexpected token.
export class SomeComponent extends Component {
function foo () { console.log ("hello") return }
render() {
return (
<React.Fragment>
</React.Fragment>
);
}
}
I saw in other posts that the problem might lie in my package configuration. That is why I also provide the configuration here:
{
"name": "test-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"#fortawesome/fontawesome-free": "^5.13.0",
"#material-ui/core": "^4.10.2",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.28",
"#types/react": "^16.9.21",
"#types/react-dom": "^16.9.5",
"#types/react-router-dom": "^5.1.3",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"d3-ease": "^1.0.6",
"html-react-parser": "^0.10.3",
"html-to-react": "^1.4.2",
"i": "^0.3.6",
"install": "^0.13.0",
"jquery": "^3.4.1",
"material-kit-react": "^1.8.0",
"mdbreact": "^4.25.5",
"npm": "^6.14.6",
"prop-types": "^15.7.2",
"pure-react-carousel": "^1.26.1",
"react": "^16.12.0",
"react-alert": "^6.0.1",
"react-alert-template-basic": "^1.0.0",
"react-audio-player": "^0.11.1",
"react-bootstrap": "^1.0.0-beta.17",
"react-bootstrap-carousel": "^4.0.3",
"react-card-carousel": "^1.1.3",
"react-dom": "^16.12.0",
"react-geocode": "^0.2.1",
"react-google-autocomplete": "^1.1.2",
"react-google-maps": "^9.4.5",
"react-h5-audio-player": "^2.4.2",
"react-image-appear": "^1.2.23",
"react-loader-spinner": "^3.1.14",
"react-loading-image": "^0.5.0",
"react-redux": "^7.2.0",
"react-redux-loading-bar": "^5.0.0",
"react-reveal": "^1.2.2",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"react-scroll": "^1.7.9",
"react-select": "^3.1.0",
"react-slick": "^0.23.1",
"react-split-pane": "^2.0.3",
"react-transition-group": "^4.3.0",
"react-user-profile": "^1.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.0.1",
"typescript": "^3.7.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.10.3",
"babel-eslint": "^10.1.0",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.6"
}
}
I followed the following post and installed babel eslient via yarn add -D babel-eslint. However, afterwards react was giving me the error that I installed an incompatible babel eslient version and I had to reinstall all packages again.

Are you trying to use class or functional components, you have some errors in your code.
Class components should look like this:
class ClassComponent extends React.Component {
constructor(props) {
super(props)
// state here
}
printMessage = (msg) => {
console.log(msg);
};
render() {
this.printMessage("Hello World");
return <div>jsx here</div>;
}
}
Functional components should look like this:
function FunctionalComponent(props) {
const printMessage = (msg) => {
console.log(msg);
};
printMessage()
return <div>jsx here</div>;
}

Related

Heap Out of Memory in React Application

Heap Out of Memory error while starting the application. I have listed my package.json file content which might be needed for proper detailing. Although I set max_old_space_size to 4096, it still provides me the same error. My Pc configuration is 4GB RAM and I5 intel processor. Is it due to my pc configuration or memory leaks in the code. Please elaborate the possible fix for the issue. I face this issue when I use sass in my dev dependencies.
"name": "superadmin-panel",
"version": "0.1.0",
"private": true,
"license": "MIT",
"dependencies": {
"#ant-design/icons": "4.6.2",
"#auth0/auth0-react": "^1.4.0",
"#david.kucsai/react-pdf-table": "^0.4.1",
"#react-pdf/renderer": "^2.1.1",
"#welldone-software/why-did-you-render": "^6.1.1",
"antd": "^4.15.0",
"antd-img-crop": "^3.14.1",
"apexcharts": "^3.26.0",
"axios": "^0.21.1",
"bootstrap-scss": "^4.6.0",
"chart.js": "^3.0.2",
"chartist": "^0.11.4",
"connected-react-router": "^6.9.1",
"draft-convert": "^2.1.11",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"emoji-mart": "^3.0.1",
"feather-icons": "^4.28.0",
"firebase": "^8.3.3",
"html-to-draftjs": "^1.5.0",
"jquery": "^3.6.0",
"leaflet": "^1.7.1",
"node-sass": "npm:sass#^1.52.3",
"react-apexcharts": "^1.3.7",
"react-bootstrap": "^1.5.2",
"react-bootstrap-typeahead": "^5.1.4",
"react-chartist": "^0.14.4",
"react-ckeditor-component": "^1.1.0",
"react-clock": "^3.0.0",
"react-copy-to-clipboard": "^5.0.3",
"react-countdown": "^2.3.1",
"react-countup": "^4.3.3",
"react-data-table-component": "^6.11.7",
"react-datepicker": "^3.7.0",
"react-draft-wysiwyg": "^1.14.5",
"react-dropzone-uploader": "^2.11.0",
"react-feather": "^2.0.9",
"react-google-maps": "^9.4.5",
"react-hook-form": "^6.15.4",
"react-icons": "^4.2.0",
"react-image-crop": "^8.6.6",
"react-image-lightbox": "^5.1.1",
"react-input-range": "^1.3.0",
"react-jwt": "^1.1.2",
"react-moment": "^1.1.1",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-router-redux": "^4.0.8",
"react-scripts": "^4.0.3",
"react-slick": "^0.28.1",
"react-slugify": "^2.1.0",
"react-spinners": "^0.11.0",
"react-switch-lang": "^1.0.2",
"react-times": "^3.1.12",
"react-toastify": "^7.0.3",
"react-transition-group": "^4.4.1",
"reactstrap": "^8.9.0",
"redux": "^4.0.5",
"redux-saga": "^1.1.3",
"sweetalert2": "^10.16.0",
"swr": "^1.2.2",
"uuid": "^8.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md}' --config ./src/.prettierrc"
},
"resolutions": {
"react-dev-utils": "^10.0.0"
},
"eslintConfig": {
"extends": "react-app",
"plugins": [
"jsx-a11y"
],
"rules": {
"no-whitespace-before-property": "off"
},
"overrides": [
{
"files": [
"*-index.js"
],
"rules": {
"no-unused-expressions": "off"
}
}
],
"reportUnusedDisableDirectives": true,
"noInlineConfig": true
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"env-cmd": "^10.1.0",
"rc-tween-one": "^3.0.6",
"react-app-rewired": "^2.1.8",
"redux-devtools-extension": "^2.13.9",
"sass": "^1.52.3",
"typescript": "^4.2.3"
},
"husky": {
"hooks": {
"pre-commit": "npx run format",
"pre-push": "npx run format"
}
},
"engines": {
"npm": ">=6.0.0",
"node": ">=14.0.0"
}
}

Craco react app: Missing class properties transform

I'm getting a Missing class properties transform. error for my CardData class, and I have no idea why, as I've installed the #babel/plugin-transform-classes.
//CardData.ts
import type RawCardRow from "#interfaces/RawCardRow";
import { InteractionType } from "#enums";
import IFrameValidator from "../IFrameValidator";
export default class CardData {
src: string;
title: string;
added?: Date;
sourceId: string;
author: string;
interaction: InteractionType;
validator!: IFrameValidator;
isActive!: boolean;
failed!: boolean;
constructor(row: RawCardRow) {
this.src = row.src;
this.title = row.title;
this.added = new Date(row.added);
this.sourceId = row.src;
this.author = row.author;
this.interaction =
InteractionType[row.interaction as keyof typeof InteractionType];
this.isActive = false;
this.validator = new IFrameValidator(this.src);
this.failed = false;
// this.error = undefined;
}
setActive(b: boolean): void {
this.isActive = b;
}
fail() {
this.failed = true;
}
}
craco.config.js:
const path = require("path");
const CracoAlias = require("craco-alias");
module.exports = {
webpack: {
configure: {
module: {
rules: [
{
type: "javascript/auto",
test: /\.mjs$/,
include: /node_modules/,
},
],
},
},
},
plugins: [
{
plugin: CracoAlias,
options: {
source: "tsconfig",
baseUrl: "./src",
tsConfigPath: "./tsconfig.path.json",
},
},
],
style: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
babel: {
plugins: [
"glsl",
"#babel/plugin-transform-classes",
"transform-class-properties",
],
},
};
package.json
{
"name": "seisolo",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.2.0",
"#dnd-kit/core": "^4.0.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#react-three/drei": "^8.3.1",
"#react-three/postprocessing": "^2.1.2",
"#tailwindcss/forms": "^0.3.3",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/file-saver": "^2.0.3",
"#types/jest": "^26.0.15",
"#types/lodash.isequalwith": "^4.4.6",
"#types/node": "^12.0.0",
"#types/papaparse": "^5.2.6",
"#types/react": "^17.0.0",
"#types/react-custom-scrollbars": "^4.0.8",
"#types/react-dom": "^17.0.0",
"#types/redux-logger": "^3.0.9",
"#types/three": "^0.134.0",
"#withvoid/melting-pot": "^1.6.0",
"classnames": "^2.3.1",
"create-react-class": "^15.7.0",
"crooks": "^1.0.23",
"drei": "^2.2.21",
"easy-peasy": "^5.0.3",
"esquery": "^1.4.0",
"evergreen-ui": "^6.4.0",
"file-saver": "^2.0.5",
"framer-motion": "^5.5.5",
"google-spreadsheet": "^3.1.15",
"interpolate-range": "^2.1.0",
"konva": "^8.2.2",
"leva": "^0.9.18",
"lodash": "^4.17.21",
"lodash.isequalwith": "^4.4.0",
"lodash.shuffle": "^4.2.0",
"moment": "^2.29.1",
"moment-duration-format": "^2.3.2",
"overlayscrollbars": "^1.13.1",
"overlayscrollbars-react": "^0.2.3",
"papaparse": "^5.3.1",
"prop-types": "^15.7.2",
"rc-slider": "^9.7.2",
"react": "^17.0.2",
"react-addons-transition-group": "^15.6.2",
"react-audio-player": "^0.17.0",
"react-beautiful-dnd": "^13.1.0",
"react-curveto": "^1.0.6",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^17.0.2",
"react-grid-layout": "^1.3.0",
"react-hanger": "^2.4.4",
"react-konva": "^17.0.2-5",
"react-lineto": "^3.3.0",
"react-player": "^2.9.0",
"react-radio-group": "^3.0.3",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-sound": "^1.2.0",
"react-soundplayer": "^1.0.5",
"react-stonecutter": "^0.3.10",
"react-three-fiber": "^6.0.13",
"react-three-gui": "^0.4.2",
"react-tiny-popover": "^7.0.1",
"reactjs-popup": "^2.0.5",
"redux-logger": "^3.0.6",
"sass": "4.14.1",
"svg-catmull-rom-spline": "^0.0.1",
"three": "^0.134.0",
"three-extend-material": "^1.0.0",
"three-obj-loader": "^1.1.3",
"typescript": "^4.1.2",
"use-asset": "^1.0.4",
"use-image": "^1.0.8",
"waveform-data": "^4.1.1",
"web-vitals": "^1.0.1"
},
"engines": {
"node": "14"
},
"scripts": {
"eject": "react-scripts eject",
"start": "craco start",
"build": "craco build",
"test": "craco test"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/plugin-transform-classes": "^7.16.7",
"#types/google-spreadsheet": "^3.1.5",
"#types/react-audio-player": "^0.13.0",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-grid-layout": "^1.1.2",
"#types/react-sound": "^1.2.3",
"#types/react-stonecutter": "^0.3.1",
"#types/react-table": "^7.7.1",
"#types/webpack-env": "^1.16.2",
"#welldone-software/why-did-you-render": "^6.2.0",
"autoprefixer": "^9",
"babel-plugin-glsl": "^1.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"better-docs": "^2.3.2",
"craco-alias": "^3.0.1",
"eslint-config-xo-react": "^0.25.0",
"eslint-plugin-filenames": "^1.3.2",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-only-warn": "^1.0.2",
"eslint-plugin-sonarjs": "^0.9.1",
"eslint-plugin-unicorn": "^34.0.1",
"file-loader": "^6.2.0",
"glslify": "^7.1.1",
"jsdoc": "^3.6.7",
"jsdoc-plugin-typescript": "^2.0.6",
"jsdoc-to-markdown": "^7.0.1",
"postcss": "^7",
"react-loader-spinner": "^4.0.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat"
}
}
I've tried restarting the dev server and reinstall my packages.

SCSS variable export not imported in React

After a general package upgrade on my React project, SCSS variable imports in JavaScript stopped working. Imports themselves are still working, but variables exported from SCSS never appear in JavaScript.
Here's what I'm doing:
_variables.scss:
$akt-dark-teal: #035164;
$akt-light-blue: #007FAA;
:export {
primaryMain: $akt-dark-teal;
secondaryMain: $akt-light-blue;
}
In React:
import scss from './scss/parts/_variables.scss';
console.log(scss); // [object Object]
console.log(scss.primaryMain); // undefined
console.log(scss.secondaryMain); // undefined
This used to work before the package upgrade. The path to the imported SCSS file is correct, I verified it. Besides similar exports fail the same way with other files, no matter where they are or what is their name.
I think the problem lies somewhere in the packages:
The current package.json:
{
"name": "js-dashboard",
"version": "0.0.1",
"private": true,
"homepage": "/public/",
"dependencies": {
"#date-io/moment": "^2.10.8",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#material-ui/pickers": "^3.3.10",
"#reduxjs/toolkit": "^1.5.1",
"#stripe/react-stripe-js": "^1.4.0",
"#stripe/stripe-js": "^1.13.2",
"#testing-library/jest-dom": "^5.11.10",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^13.1.5",
"#types/react-redux": "^7.1.16",
"axios": "^0.21.1",
"chart.js": "^3.1.1",
"cryptr": "^6.0.2",
"css-loader": "^5.2.4",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"eslint": "^7.24.0",
"firebase": "^8.4.1",
"history": "^5.0.0",
"html-react-parser": "^1.2.6",
"http": "0.0.1-security",
"https": "^1.0.0",
"immer": "^9.0.1",
"json-loader": "^0.5.7",
"libphonenumber-js": "^1.9.16",
"lodash": "^4.17.21",
"material-ui-phone-number": "^2.2.6",
"moment": "^2.29.1",
"nanoid": "^3.1.22",
"node-sass": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-chartjs-2": "^3.0.2",
"react-csv": "^2.0.3",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-to-pdf": "0.0.13",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"sass": "^1.32.11"
},
"scripts": {
"start": "set PORT=3001 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1"
}
}
The old package.json before the package upgrade:
{
"name": "js-dashboard",
"version": "0.0.1",
"private": true,
"homepage": "/public/",
"dependencies": {
"#date-io/moment": "^1.3.13",
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.54",
"#material-ui/pickers": "^3.2.10",
"#reduxjs/toolkit": "^1.5.0",
"#stripe/react-stripe-js": "^1.1.2",
"#stripe/stripe-js": "^1.11.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/react-redux": "^7.1.11",
"axios": "^0.21.1",
"chart.js": "^2.9.4",
"cryptr": "^6.0.2",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"eslint": "^6.6.0",
"firebase": "^7.23.0",
"history": "^5.0.0",
"html-react-parser": "^0.14.2",
"immer": "^7.0.15",
"json-loader": "^0.5.7",
"libphonenumber-js": "^1.9.4",
"lodash": "^4.17.20",
"material-ui-phone-number": "^2.2.6",
"moment": "^2.29.1",
"nanoid": "^3.1.18",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-beautiful-dnd": "^13.0.0",
"react-chartjs-2": "^2.11.1",
"react-csv": "^2.0.3",
"react-dom": "^16.13.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.3",
"react-to-pdf": "0.0.13",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0"
},
"scripts": {
"start": "set PORT=3001 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Update: fixed on CRA v5.0.0
This is a bug that appeared with the version 4 of create-react-app. Here is the issue about it on Github. It has been fixed since then and the fix should be available in the next release.
In the meantime, if you use something to override the webpack config of CRA you can fix it yourself by setting the compileType of css-loader to 'icss' as explained in this answer.

ReactJS randomly Unexpected token '<'

Project was created with create-react-app. Did not eject. There are no webpack configs. Default "react-scripts": "^3.4.0". On dev version there is no error. But on production when user stays long on one page and clicks the link it shows white page, and after updating the site(deploying new version). This error randomly appears. Output on console
Unexpected token '<'
and no other information.
There is my package.json
{
"name": "project-name",
"version": "2.0.0",
"description": "description",
"private": true,
"dependencies": {
"#bugsnag/js": "^6.5.0",
"#bugsnag/plugin-react": "^6.5.0",
"#glidejs/glide": "^3.4.1",
"#material-ui/core": "^4.4.1",
"#sentry/browser": "^5.11.2",
"#sentry/cli": "^1.49.0",
"#types/jest": "^25.1.3",
"#types/node": "^13.7.4",
"#types/rc-switch": "^1.9.0",
"#types/react": "^16.9.22",
"#types/react-dom": "^16.9.5",
"axios": "^0.19.0",
"chart.js": "^2.9.1",
"classnames": "2.2.6",
"debounce-promise": "^3.1.2",
"formik": "^1.5.8",
"jquery": "^3.4.1",
"logrocket": "^1.0.6",
"logrocket-react": "^4.0.1",
"moment": "2.24.0",
"moment-timezone": "^0.5.27",
"orgchart": "^2.1.5",
"prop-types": "^15.7.2",
"purgecss": "^1.4.0",
"rc-switch": "^1.9.0",
"react": "^16.9.0",
"react-autosuggest": "^9.4.3",
"react-chartjs-2": "^2.7.6",
"react-circular-progressbar": "^2.0.2",
"react-contextmenu": "^2.11.0",
"react-data-export": "^0.6.0",
"react-datepicker": "^2.9.6",
"react-dom": "^16.9.0",
"react-dropzone-component": "^3.2.0",
"react-intl": "2.4.0",
"react-perfect-scrollbar": "^1.5.3",
"react-redux": "7.1.1",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.4.0",
"react-select": "^3.0.4",
"react-select-async-paginate": "^0.3.10",
"react-table": "latest",
"react-transition-group": "^4.3.0",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-saga": "^1.0.5",
"styled-components": "^5.0.0",
"tailwindcss": "^1.1.2",
"typescript": "^3.8.2",
"xlsx": "^0.15.5",
"yup": "^0.27.0"
},
"scripts": {
"start": "yarn run tailwind && react-scripts start",
"build": "yarn run tailwind && node ./purge-tailwindcss.js && cross-env react-scripts build",
"tailwind": "./node_modules/.bin/tailwind build ./src/assets/css/vendor/tailwind.base.css -c ./tailwind.js -o ./src/assets/css/vendor/tailwind.css",
"test": "react-scripts test --env=node",
"crt": "bash create-component.sh",
"eject": "react-scripts eject",
"lint": "eslint src/**/*.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"babel-plugin-import": "^1.13.0",
"cross-env": "^5.2.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.0",
"eslint-plugin-react-hooks": "^1.7.0",
"node-sass": "^4.12.0",
}
}
Don't know how. But after enabling sourcemap this error doesn't shown.
I removed this command from yarn build:
GENERATE_SOURCEMAP=false

Transform error:unknown plugin "transform-decorators" specified in react native

I am getting this after installing jest, and transform-decorators-legacy.
But jest is running successfully and passing tests for each screen.
I am using MOBX for stores.
bablerc file :
{
"presets": ["react-native","babel-preset-expo","react-native-
stage-0/decorator-support"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source","transform-decorators
-legacy"]
}
}
}
package.json
"scripts": {
"test": "node_modules/.bin/jest"
},
"jest": {
"preset": "jest-expo"
},
"author": null,
"private": true,
"main": "node_modules/expo/AppEntry.js",
"dependencies": {
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"expo": "^21.0.0",
"mobx": "^3.3.1",
"mobx-react": "^4.3.3",
"native-base": "^2.3.3",
"react": "16.0.0-alpha.12",
"react-native": "https://github.com/expo/react-native/archive/sdk-21.0.2.tar.gz",
"react-native-admob": "^2.0.0-beta.2",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-native-modal": "^4.1.0",
"react-native-prompt": "^1.0.0",
"react-navigation": "^1.0.0-beta.15"
},
"devDependencies": {
"babel-jest": "^21.2.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-react-native": "^4.0.0",
"cavy": "^0.4.1",
"jest": "^21.2.1",
"jest-expo": "^22.0.1-SNAPSHOT.2017.11.1",
"react-dom": "^16.0.0",
"react-test-renderer": "^16.0.0",
"regenerator-runtime": "^0.11.0"
}
}

Categories