I'm new to react and decided to try another method to start a project instead of create-react-app which i regret, I used a site createapp.dev which uses a parcel bundler instead of react-scripts bundler so after i was done with the project i tried deploying it to github pages but could not i've read the parcel documentation but still no help so i restarted the project with create-react-app then copied the code but now i'm swimming in a bunch of errors
1.Install missed packages
if you use:
1.npm : npm install --save react-router-dom sass-loader sass
2. yarn : yarn add react-router-dom sass-loader sass
Related
I want to install SASS to my react app.
I try yarn add node-sass my console return error:
./src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss)
Node Sass version 7.0.1 is incompatible with ^4.0.0.
I found advice to uninstall node-sass and install sass. I did it, but then I have got this error:
../src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss) To import Sass files, you first need to install node-sass. Run npm install node-sass or yarn add node-sass inside your workspace. Require stack:
/Users/madlen/(...)/node_modules/sass-loader/lib/loader.js
/Users/madlen/(...)/node_modules/loader-runner/lib/loadLoader.js
/Users/madlen/(...)/node_modules/loader-runner/lib/LoaderRunner.js
/Users/(...)/node_modules/webpack/lib/NormalModule.js
/Users/(...)/node_modules/webpack/lib/NormalModuleFactory.js
/Users/(...)/node_modules/webpack/lib/Compiler.js
/Users/(...)/node_modules/webpack/lib/webpack.js
/Users/(...)/node_modules/react-scripts/scripts/start.js
I try to upgrate yarn, add sass-loader, nothing helps
Do this in your package json
"node-sass": "npm:sass#^1.49.9",
React still asks for node-sass after removing it and replacing with sass so you can alias it like this and now react will use sass
Maybe try updating your project's react-scripts, as doing so fixed the issue for me.
I was having the same issue - saw advice elsewhere to switch node-sass out for sass, and then had the same errors mentioned in the OP. Tried Mark O's solution to alias sass, which worked. However, then I tried setting up absolute imports in my project (with jsconfig.json in the way described here), and that was mysteriously failing too.
I then realized that my project had a very old version of react-scripts for some reason, as it was on 2.x.x. So I swapped react-scripts in my package.json to be "react-scripts": "4.0.3", ran npm install, did npm run start and now absolute imports work. I then tried using sass instead of node-sass again and that works too (npm uninstall node-sass, then npm install sass).
try stopping the current development server, and install node-sass again.
I was having similar problem. These steps fixed my problem.
Delete node_modules rm -rf node_modules
Delete package-lock.json rm package-lock.json
Run npm install or yarn install
I am using;
node-sass: ^6.0.1
npm: 7.24.2
node: v16.13.0
I'm going in circles with npx trying to start a new project. Here's what I get:
"PS C:\Users\John\Documents\WebSites\react_projects> npx create-react-app material-ui
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
"You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).
"We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
npm uninstall -g create-react-app
yarn global remove create-react-app
The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/"
When I type npm uninstall -g create-react-app, I get "up to date, audited 1 package in 495ms. found 0 vulnerabilities."
So I try to create the app again with npx, and I get this:
"Need to install the following packages:
create-react-app
Ok to proceed? (y)"
So I press y, and I get the first error message again. I just go in circles. How can I fix this?
Refer to official reactjs website you need to have ""Node >= 14.0.0 and npm >= 5.6"" on your machine. https://reactjs.org/docs/create-a-new-react-app.html .
Also yarn create is available in Yarn 0.25+
so you might want to check these versions
npm
stands for node package manager. It helps to install, migrate apps by adding dependencies in package.json file. You only need to run npm i. For example in react API call npm i axios you should run and import in file in order to use axios features. Also all you need to have is package.json following dependencies and packages will be added(except node_modules folder as it comes with packages and more in size).
You can use npm to start, build, eject, watch and test.
npx is a CLI tool which provide way to install and manage dependencies hosted in npm registry. It is bundled with npm since 5.2.0v. It is helpful in installing and getting started with frontend JS libraries like reactjs, angularjs, vuejs, Sveltejs or boilerplate apps.
I've cloned a GitHub repo and was installing the packages. I first ran yarn install, and then I ran yarn build. But the second command gave me an error:
Could somebody help me with this please? I would really appreciate it! Thank you!
I had a similar issue, and it was because I had installed webpack in previous directories. You have probably installed a webpack in C:\Users\eden1\node_modules. Try removing that with npm remove webpack when you are located in C:\Users\eden1 or remove the globally installed webpack with npm remove -g webpack.
Hello everyone I just added sass in all possible ways to my app by npm install sass by npm install node-sass by yarn add sass-loader even by sudo npm install --save-dev --unsafe-perm node-sass all these commands by yarn also and my app tells me to add sass :/
Oh I finally did it, I don't know for sure but I guess when installing a new thing node sass or anything you should re-run the react app refresh or even ctrl+f5 won't work I have right now 2 tabs of my react app one is http://localhost:3000/ the other one http://localhost:3001 I commanded yarn start again after installing and it work while the first one is still open and it doesn't work
Hope this will help others
Below is the documented process for adding sass to react app using yarn
yarn add node-sass
Rename the .css files to .scss and update the import statements.
I just did it on my machine and it works.
I am using the following cmnd to initialize a new react project:
npx create-react-app test
But I get this error :
Invalid "exports" main target "index.js" defined in the package config /usr/lib/node_modules/create-react-app/node_modules/is-promise/package.json
I tried :
1. clear the cache using
npm cache clean --force
2.updating npm to 6.14.4
3. installing it globally npm install create-react-app -g
Following this tread I got the idea, that you need to downgrade the node version to 12.12.0 and error will disappear
Edit: As for now, this bug is fixed in 2.2.2 version of is-promise package. If you still experience problems creating new CRA, consider npm install -g --force create-react-app
If even then bug is still present, please comment your issue to this github issue
Try to complete uninstall node js by using revo uninstaller or delete AppData\Roaming\npm folder . I hope its will be working fine . Also dont forgot to use latest version of node js .
So, apparently the issue is from npm and non of us has done anything wrong, still we can use Yarn to start a new react project while they solve it, follow the steps:
step 1: yarn init -y
step 2: Insert this to package.json
"resolutions": {
"is-promise": "2.1.0",
"run-async/is-promise": "2.1.0"
}
step 3: yarn add --dev create-react-app
step 4: yarn create-react-app ../my-app
There is an error with latest create-react-app version 3.4.1
To proceed while while this is getting fixed, I was able to create a new react project with the previous version of create-react-app 3.4.0
To do this first, please remove create-react-app if you installed it globally
npm uninstall -g create-react-app
Once globally uninstalled you can use npx to create a new project
npx create-react-app#3.4.0 yourProjectName
Use the following exact command:
Exact: npx react-create-app test , Your code is incorrect because react must precede create: npx create-react-app test