Can't resolve '#babel/runtime/helpers/esm/objectSpread2' - reactjs

{
"version": "0.1.0",
"private": true,
"dependencies": {
"#mui/icons-material": "^5.0.1",
"#reduxjs/toolkit": "^1.6.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"firebase": "^9.0.2",
"firebase-tools": "^9.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.5",
"react-router-dom": "^5.3.0",
"react-scripts": "2.0.0",
"react-slick": "^0.28.1",
"slick-carousel": "^1.8.1",
"styled-components": "^4.1.3"
},
"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 op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/runtime": "^7.15.4"
}
}
while running npm run build this error popup I tried to install babelcore and runtime manually but it didn't fixed it. Is there any way to fix this??
please help me.
thanks in advance:)

I ran into this problem today when updating all our dependencies.
We configure webpack ourselves and aren't running a vanilla Create-React-App setup so our environments are different to yours.
For what it's worth...
I installed the dependency and tried turning it off an on again, seemed to do the trick.
Explicitly declare the #babel/runtime in package.json file
"devDependencies": {
....other dependencies,
"#babel/runtime": "^7.15.4",
}
Delete the package-lock.json file
Re-install dependencies
npm install
Error went away, your set up might be different with create-react-app so I hope this works for you too!

Related

Can't run React project due to react-scripts error

I'm trying to start a React project with npm start and the following error is shown:
$ npm start
> client#0.1.0 start
> react-scripts
Unknown script "undefined".
Perhaps you need to update react-scripts?
See: https://facebook.github.io/create-react-app/docs/updating-to-new-releases
I have updated react-scripts to last version, npm install, even I pulled a version of the project without the previous changes and still the error is shown.
I share the package.json. I appreciate any help and suggestions in advance.
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.1",
"#testing-library/user-event": "^12.2.2",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-input-range": "^1.3.0",
"react-redux": "^7.2.4",
"react-router": "^5.2.1",
"react-router-dom": "^5.2.1",
"react-scripts": "^5.0.1",
"redux": "^4.1.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"styled-components": "^5.3.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts",
"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"
]
}
}```
Use npm run start.
If that doesn't work, try removing your package-lock.json and node_modules folder, then run npm install and try again.

React: stuck at wait-on at localhost:3000

I have been trying to implement electron and react together ,with the below package.json
{
"name": "loader",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"cross-env": "^7.0.3",
"electron-is-dev": "^2.0.0",
"react": "^18.2.0",
"react-countup": "^6.3.1",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-idle-timer": "^5.4.2",
"react-loader-spinner": "^5.3.3",
"react-rnd": "^10.3.7",
"react-router-dom": "^6.4.0",
"react-scripts": "5.0.1",
"react-spring": "^9.5.3",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"main": "public/main.js",
"homepage": "./",
"scripts": {
"react-start": "react-scripts start",
"react-build": "react-scripts build",
"react-test": "react-scripts test --env=jsdom",
"react-eject": "react-scripts eject",
"electron-build": "electron-builder",
"release": "yarn react-build && electron-builder --publish=always",
"build": "yarn react-build && yarn electron-build",
"start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000/ && electron .\""
},
"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": {
"concurrently": "^7.5.0",
"electron": "^21.2.3",
"electron-builder": "^23.6.0",
"wait-on": "^6.0.1"
}
}
It is clear that concurrently is being used to run all the commands together at same time. Now when I do yarn start, all commands are executed along with the react-start, but even after the react is available at http://localhost:3000 the wait-on never executes further and is stucked, eventually the electron never starts.
If tested without wait-on then all commands are executed well along with the electron.
Can someone guide on this?
I had the same issue.
All I needed to do was to change it from wait-on http://localhost:3000 to wait-on http://127.0.0.1:3000.
Hope that helps!

localhost not working after save in VS Code

Currently working on a project, the project works perfectly fine after npm start and can function normally. However, after any changes made in VS Code, it seems localhost not listening any changes anymore. The workaround is to refresh the browser anytime changes has been made. Does anyone have experienced above issue?
I have tried to remove package-lock.json and node_modules, re-install packages by npm install, nothing helped.
Here is my package.json
{
"name": "crypto-dashboard",
"version": "0.1.0",
"private": true,
"homepage": "https://nickng852.github.io/crypto-dashboard/",
"dependencies": {
"#craco/craco": "^6.3.0",
"#reduxjs/toolkit": "^1.7.1",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"autoprefixer": "^9.8.7",
"axios": "^0.22.0",
"chart.js": "^3.6.0",
"firebase": "^9.1.2",
"html-react-parser": "^1.4.2",
"millify": "^4.0.0",
"moment": "^2.29.1",
"node-sass": "^6.0.1",
"postcss": "^7.0.38",
"react": "^17.0.2",
"react-chartjs-2": "^3.3.0",
"react-click-away-listener": "^2.0.5",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.2",
"react-scripts": "4.0.3",
"redux": "^4.1.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.16",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"predeploy": "npm run build"
},
"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"
]
}
}

unable to run 'yarn run build'

I'm trying to build my site.
It works when I run yarn start
Now I want to build it.
I run yarn run build and i get this error
yarn run build
yarn run v1.22.17
warning package.json: No license field
error Command "build" not found.
I have a package.json that contains the same script that allowed previous projects to run.
{
"name": "bl_site_12_28",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/icons": "^1.1.1",
"#chakra-ui/react": "^1.0.0",
"#emotion/react": "^11.0.0",
"#emotion/styled": "^11.0.0",
"#testing-library/jest-dom": "^5.9.0",
"#testing-library/react": "^10.2.1",
"#testing-library/user-event": "^12.0.2",
"chakra-ui-markdown-renderer": "^4.0.0",
"framer-motion": "^4.0.0",
"react": "^17.0.2",
"react-audio-player": "^0.17.0",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-icons": "^3.11.0",
"react-markdown": "^7.1.2",
"react-player": "^2.9.0",
"react-router-dom": "^6.2.1",
"react-scripts": "^3.0.1",
"web-vitals": "^0.2.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"
]
}
}
I tried running yarn run as another post suggested to get a list of possible posts, but i get a similar message above. It seems that yarn is not reading my package.json
#KyleRifqi's helpful comment was all that was needed.
I used ls to identify the files in the current directly I was running yarn run build from.
I realized the package.json was not in that directory. I cd into the correct directory and then it worked

Deploying create-react-app --template-typescript to gh pages

I have a problem with deploying typescript react app, all I get is the most outer element from the MainTemplate.tsx file, I should be seeing a logging screen, there are no routes available for me that I have available locally. Also, I have done npm run build many times now, and it is saying that my last deploy was 14 hours ago, how can I refresh it? I tried to change my deply script to this one but did not work:
"deploy": "./node_modules/gh-pages/bin/gh-pages-clean.js && gh-pages -d build"
this is my package.json
{
"homepage": "https://dziekonskik.github.io/project-money-front",
"name": "project-money-front",
"version": "0.1.0",
"private": false,
"proxy": "http://localhost:3000",
"dependencies": {
"#aws-amplify/ui-react": "^1.2.3",
"#reduxjs/toolkit": "^1.5.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.20.14",
"#types/react": "^16.14.8",
"#types/react-dom": "^16.9.13",
"#types/react-redux": "^7.1.16",
"#types/styled-components": "^5.1.9",
"aws-amplify": "^4.1.1",
"axios": "^0.21.1",
"dotenv": "^8.2.0",
"formik": "^2.2.9",
"gsap": "^3.7.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.0",
"styled-reset": "^4.3.4",
"typescript": "~4.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "./node_modules/gh-pages/bin/gh-pages-clean.js && gh-pages -d build"
},
"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": {
"#types/react-router-dom": "^5.1.7",
"gh-pages": "^3.2.3"
}
}
Thanks!
Thank you #yume_chan changing BrowserRouter component to HashRouter did the job. Also there was no need to modify deploy script when I changed back to
"deploy": "gh-pages -d build"
worked as well with HashRouter
Regards!

Resources