I am trying to use Sass in my react app.
I am aware node-sass is now deprecated and only version 4 and below of node-sass work with node. However, even when I install node-sass#4.14.1 npm doesn't allow me to install saying there is an error tar#2.2.2
So i install normal sass and normal sass asks me to install node-sass ...
So i go around in circles like a headless chicken. Neither node-sass or normal sass working for me.
Yes normal sass is dart sass. I installed but had issues on a project. I updated tar to version 6 and it still wouldn't work. Then I did it on a new project and it worked.
Related
I created a project via create-react-app 4.0.3 which uses tailwindcss 2. I just tried to upgrade the project to tailwindcss 3, but quickly ran into troubles, since tailwindcss 3 relies on Post CSS 8, which is not supported by create-react-app 4.0.3 , so I also needed to upgrade to create-react-app 5.0.0
The official Create-React-App documentation says "In most cases bumping the react-scripts version in package.json and running npm install in this folder should be enough, but it’s good to consult the changelog for potential breaking changes."
The official Tailwind Upgrade Guide says "update Tailwind, as well as PostCSS and autoprefixer, using npm" and adds to that some minor changes in tailwind.config.js
I followed this steps and ended up with a huge error message when trying to run npm run start
I am thinking that in the end it might be easier to set up the project from a fresh 5.0.0 create-react-app installation, where I install tailwind 3 on top instead of trying to repair all the issues that were caused by the upgrade.
However, before I do this I wanted to ask: What is the recommended solution for upgrading from tailwind 2 to 3 AND upgrade from create-react-app from 4.0.3 to 5.0.0 (since my understanding is that you need to do both to make tailwind work). How did other people solve the issues laid out above?
First you need to update react-scripts to version 5.0.0
Then uninstall craco
Finally update tailwind with the command
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest
You can also follow official guide at https://tailwindcss.com/docs/upgrade-guide to update the new color names and update the tailwind.config.js file
Now yo can run the command npm run start to see the changes and in the console you can see the new build process
I am trying to build react app and I want to use scss to style my app.
Challenge is that even though I already installed node-sass, but I still get this error.
./src/styles/styles.scss (/usr/local/lib/node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!/usr/local/lib/node_modules/react-scripts/node_modules/postcss-loader/src??postcss!/usr/local/lib/node_modules/react-scripts/node_modules/resolve-url-loader??ref--6-oneOf-5-3!/usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/styles/styles.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:
- /usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/getDefaultSassImplementation.js
- /usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/getSassImplementation.js
- /usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/index.js
- /usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js
- /usr/local/lib/node_modules/react-scripts/node_modules/loader-runner/lib/loadLoader.js
- /usr/local/lib/node_modules/react-scripts/node_modules/loader-runner/lib/LoaderRunner.js
- /usr/local/lib/node_modules/react-scripts/node_modules/webpack/lib/NormalModule.js
- /usr/local/lib/node_modules/react-scripts/node_modules/webpack/lib/NormalModuleFactory.js
- /usr/local/lib/node_modules/react-scripts/node_modules/webpack/lib/Compiler.js
- /usr/local/lib/node_modules/react-scripts/node_modules/webpack/lib/webpack.js
- /usr/local/lib/node_modules/react-scripts/scripts/start.js
I also tried to delete node_modules and reinstalled node-sass but it didn't work. Any advice?
This happens to me sometimes and seems like issue with npm. Try installing node-sass using yarn
yarn add node-sass
I'm not going to answer this question directly!
But point to an important matter! node-sass is deprecated!
sass package is used now in react-scripts. And the whole sass compiler or pre-processor is followed in the Dart sass project!
sass package is a distribution of Dart sass!
You can check more details and illustration in the following answer:
https://stackoverflow.com/a/68327656/7668448
This really seems like issue with npm (it happend not always), but if you already use npm to your project, it would be better to use:
npm cache clear --force
instead of relocating all dependencies on yarn.
I recently migrated a create-react-app to typescript. After migration my scss files are being ignored in the .tsx components. I'm importing the files like so:
import './styles/scss/style.scss';
this was working fine in js. I've already installed node-sass and even tried installing #types/node-sass. I'd like to do this without ejecting. Would appreciate any help.
According with this documentation https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
If you use react-scripts#2.0.0 or higher just
npm install node-sass
restart and enjoy.
In my initial react application (created by react-native init project_name). In my project folder, I install my ESLint locally by yarn add eslint --dev.
Then I initialize my configuration by ./node_modules/.bin/eslint --init (with Airbnb style guide, using React, and JSON configuration file format). The installed eslint is disappeared in ./node_modules/.bin folder.
Before initialization:
ls ./node_modules/.bin
acorn eslint jest-runtime node-pre-gyp semver
atob esparse js-yaml nopt sshpk-conv
babylon esvalidate jsesc pegjs sshpk-sign
color-support handlebars json5 rc sshpk-verify
detect-libc image-size loose-envify react-native uglifyjs
envinfo import-local-fixture metro regjsparser uuid
escodegen is-ci mime rimraf watch
esgenerate jest mkdirp sane which
After initiliazation:
ls ./node_modules/.bin
babylon esparse esvalidate jsesc loose-envify semver
What am I missing?
Platforms: macOS, react-native-cli: 2.0.1, react-native: 0.54.2
This is caused by a bug in NPM 5 where npm install will delete almost all of your dependencies. This was the relevant issue. Even though you are using yarn, eslint will use npm under the hood to install the dependencies it needs, and thus will run into the aforementioned bug.
This has very recently been fixed in npm >= 5.7.1, so you will need to upgrade npm and then reinstall all of your modules.
Personally, I'd just recreate the entire project from scratch since it doesn't seem like you've done anything yet. It would be a lot more straightforward than trying to fix things.
By upgrading, you will also be able to use react-native-cli without error as prior to v5.7.1, you were actually supposed to use NPM 4. See this bug.
I'm trying to create a React project in WebStorm 2016.3.1
It's asking me for a create-react-app but I have no idea what that is and I can't find any reference on Google.
What is it and where can I find the value?
You need to install create-react-app npm module, before you use this feature.
npm install -g create-react-app
You can read more about this feature on the official release blog of WebStorm.
Excerpt from the documentation :
Make sure that you have create-react-app installed globally on your computer, for that run npm install -g create-react-app. Then to start your new project, double click on the start task in the npm tasks tool window to run it. That’s it!
I had ie installed create-react-app globally using yarn and webstorm failed to find it. Then I used npm, not to mention globally and its working like a charm.
TL;DRNo need to install anything. Just enter npx create-react-app in the create-react-app field & it should work like a pycharm, I mean charm :)
Side note: npx is pre-bundled with npm since npm version 5.2.0.
I created webStrom react app following this steps.
Download node.js
Open command line console and type "npm install -g create-react-app"
Create react app project from web-storm.
Make sure you provided the correct file path of create-react-app , by default it is
installed in ~\AppData\Roaming\npm\node_modules\create-react-app
use
npm start: to start development server
If you are using asdf or any other tool to manage multiple versions of nodejs, you will need to set up the path to create-react-app manually
I'm on mac, so for me the path was
/Users/<USER>/.asdf/installs/nodejs/12.16.2/.npm/lib/node_modules/create-react-app