React - unexpected token in state object - reactjs

I am learning in React JS and facing below issue.
I am getting Unexpected token error after npm start. I have simple array in state object. I checked eslintConfig setting exists in package.json then still why this error?
error -
below is package.json settings -
{
"name": "react-app-1",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^4.1.1",
"i": "^0.3.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}


it's pretty simple
modify the
this =>
let state = {
tags = ['tag1', 'tag2']
}
to =>
let state = {
tags : ['tag1', 'tag2']
}


You must use : inside an object for declaration
state = {
tags: ['tag1','tag2']
}

Related

Error when npm start after creating React out of box app. The argument 'filename' must be a fileURL object/string or absolute path string #eslint

I am seeing this error when running npm start.
The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received 'file:///C:/Users/... 10%/reactApp/react-app/node_modules/react-scripts/node_modules/#eslint/eslintrc/dist/eslintr...
this is my package.json
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"eslint": "^7.17.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"eslint": "^7.17.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
I am running node v16.13.2

again and again this error, i can't solve it when running react app

Failed to compile
./src/index.js 1:39
Module parse failed: Unexpected token (1:39)
File was processed with these loaders:
./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
$RefreshRuntime$ = require('C:/Users/I'm-cx0140/Desktop/myapp/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
|
This error occurred during the build time and cannot be dismissed.
my package.json file
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.13.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
enter code here

Try downgrading react scripts-
Go into the package.json and changed the react-scripts to 4.0.1 and type npm install(terminal) and re-run it.

i can't run react app using npm start how to fix this error?

Failed to compile
./src/index.js 1:39
Module parse failed: Unexpected token (1:39)
File was processed with these loaders:
./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
$RefreshRuntime$ = require('C:/Users/I'm-cx0140/Desktop/dreact/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
|
This error occurred during the build time and cannot be dismiss
my package.json
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.13.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
enter code here
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.13.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}

Removing the " ' " from my foldername work for me. change I'm-cx0140 to something like Im-cx0140

The ' character in your user name (I'm-cx0140) can trigger this issue, create your project in another folder.

Using React Components in Azure Functions: HOW?

I am trying to render static HTML inside an Azure function from React-components with the help of: ReactDOMServer.renderToStaticMarkup(<HelloWorldPage />)
where <HelloWorldPage /> is a React-component.
However, I receive SyntaxError: Unexpected identifier errors both on imports and use of React components inside my Azure function although i have imported react and react-dom.
My package.json looks like:
{
"name": "experimental",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
I am certain the solution to this is fairly simple, which makes it extra frustrating. But I do not know where to start. I would be infinitely grateful if someone could point me in the right direction. Thanks!

Can't find anything using "screen" in react-testing-library

Whenever I try to find the element i.e. expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument(); I get the message :
TestingLibraryElementError: Unable to find an accessible element with the role "heading"
However if I do
const { getByRole } = render(<NewCommentForm />);
expect(getByRole("heading", { level: 2 })).toBeInTheDocument();
It works.
Here is my package.json file:
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001/",
"dependencies": {
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/user-event": "^7.1.2",
"axios": "^0.21.1",
"jest-axe": "^4.0.0",
"moment": "^2.29.0",
"prettier": "^2.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts 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": {
"#testing-library/dom": "^7.28.1",
"#testing-library/react": "^11.2.5"
}
}
And setupTests.js
import "#testing-library/jest-dom/extend-expect";
Can you tell me why screen is not working properly when call getByRole method on it? It seems like screen.getByText works fine.

Resources