Sass does not compiling in create-react-app. The current package.json structure is
{
"name": "create-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-scripts": "1.1.4"
},
"dependencies": {
"node-sass-chokidar": "^1.2.2",
"npm-run-all": "^4.1.2",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.4",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Repo: https://github.com/athimannil/create-app
It is working fine, npm start watch your .scss files and output .css files as expected.
Make sure to require the .css files in your components.
Since src/App.js still imports src/App.css, the styles become a part of your application. You can now edit src/App.scss, and src/App.css will be regenerated.
Also since .css files are now generated, you should remove them from your SCM.
At this point you might want to remove all CSS files from the source control, and add src/**/*.css to your .gitignore file.
doc
The 2. version of create-react-app supports Sass now. Install node-sass (e.g. npm install node-sass) to enable it. Checkout this application's Navigation component.
Related
I am having this issue with my react website. I've already hosted this website on github pages and I just updated the code and ran "npm run deploy" but it keeps on giving me this error "Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option)." any idea how to fix this?
{
"homepage": "https://saksham-89.github.io/Portfolio",
"name": "portfolio",
"version": "2",
"dependencies": {
"#emailjs/browser": "^3.4.0",
"#iconscout/react-unicons": "^1.1.6",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"framer-motion": "^6.2.8",
"git": "^0.1.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"react-scroll": "^1.8.6",
"swiper": "^8.0.7",
"web-vitals": "^2.1.0",
"yarn": "^1.22.19"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
I have the following script in the scripts block of my package.json, this requires babel via babel-register- and sets the NODE_ENV to development in order to do so.
"test": "set NODE_ENV=development&&mocha --watch --require babel-register --require jsdom-global/register --require ignore-styles --require src/tests/helpers.js src/tests/**/*.js"
I am however getting this error:
Error: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received:undefined.
I have tried many combinations of uninstalling, reinstalling, altering the order of requirements within my script and several other steps mentioned in the main git issue for this error.
Can anyone see any glaring error in my method here? Full package below:
"dependencies": {
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts": "1.1.4",
"tslib": "^1.9.3",
"typescript": "^3.0.1"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"build-ts": "set NODE_ENV=development tsc || exit 0",
"watch-ts": "tsc --watch",
"build": "react-scripts build",
"start": "npm-run-all -p build-* watch-* start-js",
"test": "set NODE_ENV=development&&mocha --watch --require babel-register --require jsdom-global/register --require ignore-styles --require src/tests/helpers.js src/tests/**/*.js",
"eject": "react-scripts eject"
},
"babel": {
"presets": [
"es2015",
"react",
"react-app"
],
"plugins": [
"transform-object-rest-spread"
]
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"chai": "^4.1.2",
"enzyme": "^3.4.1",
"enzyme-adapter-react-16": "^1.2.0",
"ignore-styles": "^5.0.1",
"jsdom": "^11.12.0",
"jsdom-global": "^3.0.2",
"mocha": "^5.2.0",
"node-sass-chokidar": "^1.3.3",
"npm-run-all": "^4.1.3",
"sinon": "^6.1.5"
}
You're currently using set to specify your NODE_ENV variable which results in it not being available to child processes, i.e. the next command chained after the && operator, which is mocha.
If you use export instead, you'll ensure it's available to child processes.
Change the beginning of your test script to the following:
"test": "export NODE_ENV=development && mocha --watch ..."
Cross-patform:
export will only work in Bash environments. For a cross-platform solution consider utilizing cross-env to set the environment variables instead. Example:
"test": "cross-env NODE_ENV=development mocha --watch ..."
Note: export has been replaced with cross-env and the && operator is not necessary.
When I run npm install, I get the following error:
npm WARN eslint-config-react-app#2.1.0 requires a peer of eslint-plugin-jsx-a11y#^5.1.1 but none is installed. You must install peer dependencies yourself.
Here is what my package.json looks like:
{
"name": "name",
"version": "0.1.0",
"private": true,
"dependencies": {
"ajv": "^6.5.0",
"aws-amplify": "^0.4.0",
"react": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.8.2"
}
}
Does anyone know how to remove this error?
This is not an error, it is a WARNing
The easiest trial is delete node_modules directory and retype to see if it persists
npm install
Moreover you can use npm-install-peers to find and install required peer dependencies
npm install -g npm-install-peers
npm-install-peers
Also you can change the log level to error so that you won't see the warnings
I have a react application I created with create-react-app and I have added storybook to it. When I run yarn run storybook it does not reload when I change files.
My application is laid out like
src
->components
--->aComponent.js
->stories
--->index.js
->index.js
Here is my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"immutable": "^3.8.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
},
"devDependencies": {
"#storybook/addon-actions": "^3.3.14",
"#storybook/addon-links": "^3.3.14",
"#storybook/addons": "^3.3.14",
"#storybook/react": "^3.3.14",
"babel-core": "^6.26.0",
"flow-bin": "^0.67.1"
}
}
I have no custom web pack config. What do I need to do to get hot module reloading working?
You must increase your watch count
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Had the same issue, should pass module as a 2nd argument for storiesOf
// V Won't hot reload with `module`
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
I had this problem too,
my environment was:
ubuntu 18.04
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-scripts": "3.1.2",
"#storybook/react": "^5.2.1"
I solved this problem with running as the sudo user like this:
sudo yarn run storybook
I did a build for a React app using npm run-script build and I need to run it. Using npm run webpack is returning an error. Excuse my being very new to React but I really need to know how to run this app. I hope you can help!
My package.json:
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"downloadjs": "^1.4.7",
"fast-memoize": "^2.2.8",
"flow-bin": "^0.52.0",
"lodash": "^4.17.4",
"mapbox-gl": "^0.39.1",
"material-ui": "^0.18.7",
"moment": "^2.18.1",
"node-sass-chokidar": "^0.0.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-mapbox-gl": "^2.5.0",
"react-redux": "^5.0.5",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-router-redux": "next",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"react-emotion": "^7.2.2",
"react-scripts": "1.0.10",
"styled-components": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow"
}
Here are the folders and files of the built app
As I mentioned in comments.
npm run build uses react-scripts to create a build for you
To run in production:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow",
"start:prod": 'node dist/app.js'
}
By looking at "react-scripts": "1.0.10", it seems you created the app using create-react-app.
create-react-app is using yarn by default. So you can run yarn then yarn build (same as npm install and then npm run build)
If you need change webpack configuration. The app have eject first. You can do it by yarn eject. And then you can edit the webpack config file.
Does this help?
Are you using create-react-app? If yes then run "npm run build" in your root folder. This command will run your app