Why am I getting a "module not found" when using console.log in my react application? - reactjs

I am attempting to use console.log() to be able to verify some values in my react application, but as soon as I type console.log() anywhere within any .js file in the src folder, the page doesn't load anymore and an error is thrown, saying I cannot import the file console-browserify/index.js because it falls outside of the src folder.
I have bootstrapped the project with npx create-react-app and normally I don't face any problems.
Here is the error as well as my package.json file : enter image description here
{
"name": "lovebook",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/styled": "^11.9.3",
"#mui/material": "^5.8.6",
"#mui/x-date-pickers": "^5.0.0-beta.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#web3auth/web3auth": "^1.1.0",
"console": "^0.7.2",
"console-browserify": "^1.2.0",
"date-fns": "^2.28.0",
"grommet": "^2.25.0",
"grommet-icons": "^4.7.0",
"magic-sdk": "^7.0.0",
"moralis": "^1.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-moralis": "^1.4.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4",
"web3uikit": "^0.1.163"
},
"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"
]
}
}

make sure you type "cd (your project path name)" when you create a new terminal, so any excess packages don't get installed into the node modules problem. Maybe you should recreate the project and check whether the error keeps showing. At last I'm not sure if it's gonna help much, but try reloading the server you're running your application on

Related

Tried uploading my react project to github pages but when clicked on it shows me an incorrect page

tried uploading react project and it directs me to this other page.
enter image description here
the image above is what happens when i click on githu pages.
the following is my package json file,
I tried npm run deploy but it doesnt do nothing to the github page.
{
"name": "leslie-creations",
"version": "0.1.0",
"private": true,
"homepage": "https://jflo25.github.io/CreationsByLeslie/",
"dependencies": {
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#material-tailwind/react": "^1.2.5",
"#mui/icons-material": "^5.11.0",
"#mui/material": "^5.11.3",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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"
]
},
"devDependencies": {
"gh-pages": "^4.0.0",
"tailwindcss": "^3.2.4"
}
}
tried changing the homepage to "homepage": "https://jflo25.github.io" but when i do so and run npm run deploy it doesn't seem to do anything. Any suggestions on how i can fix this or just start over with a new repo? This my first time trying to upload a react project through vs code terminal and cant figure it out.

Blank Screen when running npm build and only error is 'Uncaught TypeError: Expected parameter accessToken'

This is my first time using the Contentful API to create a blog. When I run it in my local environment with npm start, it works and looks great. When I try to run this through Vercel, Netlify, or Github Pages, there is only a blank screen with this error message in console.
error message in console
I have tried reworking my client.js file, adding in the environment variables from my .env.development file to the host sites, changing the homepage to numerous things, everything has no effect on the blank screen of my build. Here are screenshots of my client.js:
import * as contentful from "contentful"
export const client = contentful.createClient({
space: process.env.REACT_APP_SPACE_ID,
accessToken: process.env.REACT_APP_ACCESS_TOKEN
})
.env.development code:
REACT_APP_SPACE_ID=************
REACT_APP_ACCESS_TOKEN=*************************
and my package.json:
{
"homepage": ".",
"name": "chasing-ravens",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/icons": "^2.0.13",
"#chakra-ui/react": "^2.4.2",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"contentful": "^9.2.14",
"dompurify": "^2.4.1",
"framer-motion": "^6.5.1",
"marked": "^4.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.4",
"react-scripts": "5.0.1",
"sass": "^1.56.2",
"swiper": "^8.4.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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"
]
},
"devDependencies": {
"gh-pages": "^4.0.0"
}
}
Any help would be so appreciated, I feel like I am going in circles here.

What are the corresponding testing-library/react versions for react 16.8.6?

I'm trying to make a typescript frontend but I can't use the react-dom/client import because of an issue that I've narrowed down to my testing-library/react version not corresponding with my react version. I've tried multiple downgraded versions but can't seem to get it to work.
Is there any solutions to this? I'll attach my package.json file below.
{
"name": "balls",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "12.1.5",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.1",
"#types/node": "^16.11.35",
"#types/react": "^16.8.6",
"#types/react-dom": "^16.8.6",
"#vercel/node": "^1.15.2",
"axios": "^0.27.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "5.0.1",
"typescript": "^4.6.4",
"vercel": "^24.2.3",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
Looking at the peer dependencies of package.json of the version 12 of react-testing-library we can say that until version 12.*, react-testing-library supports any react version before react 18. As of react-testing-library 13, it requires react 18.
So to answer the question, at the time of writing, you can use react-testing-library 12.1.5 with react 16.8.6.

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

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

{
"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!

Resources