in my reactjs app, which has been created with creat-react-app, I've created these files
.env
.env.developmnet
.env.development.local
which contains REACT_APP_END_POINT=localhost:3001
the problem is when I run npm start the process.env.REACT_APP_END_POINT is undefined, but if I run the command like REACT_APP_END_POINT=localhost:3001 npm start, everything is fine.
here is the versions for related packages:
"react": "^16.13.1"
"react-scripts": "3.4.1"
Please make sure your .env place as the same level with src and 'package.json'
Related
When I create React project, it has below error report:
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.44.2"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:
/Users/lizhiyuan/node_modules/webpack (version: 4.46.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
I go to the package.json file, but I did not find related codes in it. The part code of the file is:
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#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"
},
In addition, another tip is:
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
However, I cannot find such ".env" file in my project. It is also hard to create ".env" file on my MacBook because the behavior is deterred by the system.
Does anyone know how to fix it?
Yes, I've heard CRA has issues with webpack. I'd suggest you to write your own project from scratch with a custom webpack 5 config.
However, you can simply fix this issue by creating a file named .env at the root of your project and adding this line in it: SKIP_PREFLIGHT_CHECK=true. Restart you app, it will work. MaxOs doesn't hamper you to create .env file in your IDE (vscode for ex.).
I'm trying to run a repo from Github locally. The folder structure for react is somewhat different what what I usually see in a react project(I'm new to react). the folder structure is like
-index.js
-css folder
-jsx folder - components
-jsx folder - index.html
-jsx folder - index.js
Also react is added as a peer dependency. I'm not sure how to run this repository. Any help is much appreciated
React in package.json
"peerDependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-router-dom": "^5.1.2"
}
It was library files. So I had to create a new project using create-react-app and install the library in my new project and then make changes.
The error shown when yarn start command is given
Error details:
Internal Error: confusion#workspace:.: This package doesn't seem to be present in your lockfile; try to make an install to update your resolutions
at J.getCandidates (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:2:276872)
at i.getCandidates (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:2:266282)
at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:2:286432 at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349928
at new Promise (<anonymous>)
at e.exports (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349910)
at o (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349611)
at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349684
at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349727
at new Promise (<anonymous>)
My package.json file is
{
"name": "confusion",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
}
}
I have tried adding
"scripts":{
"start":"react-scripts start"
}
But no change in the error.
Cross-posting from this question:
The problem in here seems to be an existing yarn.lock file inside of one of the workspaces. Deleting it solves the problem.
More info:
Example: 3 workspaces: 2 create-react-app (app, home) and one shared component: (components)
Inside the component folder a lingering yarn.lock file exists. Remove it.
Also check that:
All your workspaces have "private:true" in each of their package.json (same level as name, private, source).
Check that you have added your workspaces inside a "workspaces" key in the main package.json
When you're executing yarn workspaces myworkspace myworkspace matches the name of your workspace in its package.json. In my case, the name of the workspace inside the components folder is called #schon/components, so I need to address it as yarn worksapces #schon/components instead.
It means a certain package is not installed, and you need to install it.
Try running yarn install to install the required packages.
If this does not work, try deleting the node_modules folder and run yarn install again.
If it fails, delete both node_modules folder and yarn.lock file and run yarn install.
try to remove node_modules by installing this package globally
yarn add global rimraf
then remove the node
the -> rimraf node_moules
then remove the yarn.lock the install it by yarn
I got this example from https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic. Referring to below image:
https://ibb.co/rZPn6L5
I copied whole code App.js and App.css, did a npm start. Below is from my web browser
https://ibb.co/LrP4NR2
Anything I missed ? My display is different that the one showed in codesandbox.
Also copy the imported minified bootstrap CSS file that was placed in index.js
// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';
You likely forgot to copy over the dependencies from package.json and install them.
When you open the package.json in CodeSandbox, you will see this:
"dependencies": {
"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
Do you have the bootstrap and react-bootstrap dependencies installed locally? If not, add this to your package.json:
"bootstrap": "^4.4.1",
"react-bootstrap": "^1.0.0",
I almost forgot; if you open the index.js in CodeSandbox, you will see the following two lines:
// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';
You also need to copy over that code and put it in your local index.js.
Then run npm install or yarn (depending on which package manager you're using) and it should work.
By the way, looking at the URL I could tell that the code is coming from a GitHub repository. You can just clone that repository with Git and and then run the examples locally. That's far better than copying and pasting code from CodeSandbox.
Create React App docs suggest forking react-scripts (instead of ejecting) if we have many similar projects. That's exactly my use case - I am trying to standardize the packages and structure that I always use in a React project. I would like to add these packages to the generated package.json file as opposed to the dependencies of react-scripts. For example, in the generated package.json file, the dependencies section should look like this:
"dependencies": {
"#material-ui/core": "^3.9.2",
"react": "^16.8.3",
"react-dom": "^16.8.3"
},
It appears that the only way to do this is to modify create-react-app itself because the code that generates package.json resides there.
I know that the CRA team recommends against modifiying create-react-app itself. So is there any other way to achieve what I am trying to do?