The scss file in not compiling in reactjs even after having the required dev dependencies .I have used create-react-app to create the app.
Here is the package.json file.
{
"name": "mydecisionapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"css": "^2.2.1",
"loader": "^2.1.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-modal": "^3.1.11",
"react-scripts": "1.1.0",
"style": "^0.0.3",
"validator": "8.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"css-loader": "^0.28.9",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
"webpack": "^3.10.0"
}
}
Here is the package style.scss file .
$brand-color:blue;
* {
color: $brand-color;
}
I looked at all imports in index.js file and it is completely ok but still, I don't see scss compiling .
create-react-app is not configured by default to support scss files. Try reading this How to add SASS/SCSS to a create-react-app
Pls ensure that your version of react-scripts inside the the package.json file is at least 2.0.0.
This is stated at the top of the documentation that can be found here: https://create-react-app.dev/docs/adding-a-sass-stylesheet
Note: this feature is available with react-scripts#2.0.0 and higher.
npm i sass-loader node-sass
I was having the same issue, and it worked for me :)
Related
I'm trying to use the TypeORM CLI to create a migration. I followed their guide but when I run yarn run typeorm migration:generate I get the error:
$ typeorm-ts-node-commonjs migration:generate
/usr/bin/env: ‘node --require ts-node/register’: No such file or directory
/usr/bin/env: use -[v]S to pass options in shebang lines
error Command failed with exit code 127.
My package.json looks like this:
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "tsc -w",
"start": "node dist/index.js",
"dev": "nodemon dist/index.js",
"start2": "ts-node src/index.ts",
"dev2": "nodemon --exec ts-node src/index.ts",
"typeorm": "typeorm-ts-node-commonjs"
},
"author": "",
"license": "ISC",
"dependencies": {
"apollo-server-express": "^3.6.7",
"class-validator": "^0.13.2",
"cors": "^2.8.5",
"express": "^4.17.3",
"express-graphql": "^0.12.0",
"graphql": "^15.3.0",
"pg": "^8.7.3",
"reflect-metadata": "^0.1.13",
"ts-node": "^10.7.0",
"type-graphql": "^1.1.1",
"typeorm": "^0.3.4"
},
"devDependencies": {
"#types/express": "^4.17.13",
"#types/node": "^17.0.23",
"nodemon": "^2.0.15",
"typescript": "^4.6.3"
}
}
I managed to solve this by installing the cli as described here https://orkhan.gitbook.io/typeorm/docs/using-cli#installing-cli
Install ts-node globally npm install -g ts-node
add the following script to package.json: "typeorm": "node --require ts-node/register ./node_modules/typeorm/cli.js" instead of "typeorm": "typeorm-ts-node-commonjs"
then create a migration with:
yarn run typeorm migration:generate -p -d src/data-source.ts src/migrations/<filename without ending>
FYI For anyone facing similar issues: It took me a while to figure out that the various documentations on typeorm are confusing and conflicting at the moment because they just moved to v0.3.0 and not everything has been updated.
I created an npm link inside a local dependency. I've since deleted that local dependency off my HDD.
Now I'm trying to delete this npm link.
I've tried:
npm rm --global dependency
npm uninstall dependency
npm unlink --no-save dependency
However, after doing all that, and after the code has been deleted from my HDD, npm link dependency still works when called from my main project. How to delete it properly? Here's my package.json:
{
"name": "myproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack serve",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"copy-webpack-plugin": "^9.0.1",
"d3-array": "^3.0.1",
"d3-dsv": "^3.0.1",
"d3-format": "^3.0.1",
"d3-scale": "^4.0.0",
"d3-time-format": "^4.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"typescript": "^4.3.5"
},
"devDependencies": {
"#types/d3-array": "^3.0.1",
"#types/d3-dsv": "^3.0.0",
"#types/d3-format": "^3.0.1",
"#types/d3-scale": "^4.0.1",
"#types/d3-time-format": "^4.0.0",
"#types/react-dom": "^17.0.9",
"html-webpack-plugin": "^5.3.2",
"ts-loader": "^9.2.3",
"webpack": "^5.44.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}
Can you post your package.json ?
Weird, this should works
npm unlink dependency
rm -rf node_modules && npm install
It was asked here How do I uninstall a package installed using npm link?
UPD
Can remove symlink from global node_modules.
Find where is global npm list -g and remove it
rm -rf `npm list -g | head -1`/node_modules/dependency
I am using react-responsive-carousel to build out a carousel on a react site. I installed the package with yarn add and got everything working nicely. I then copied and pasted the .scss files from the project git repo into my own project to use as a base (same class names etc) for styling it my own way. Then my project started throwing errors. Specifically this:
./node_modules/css-loader/dist/runtime/api.js
Error: ENOENT: no such file or directory, open '/mysite/node_modules/css-loader/dist/runtime/api.js'
I have since deleted the .scss files since it was with that change that the error appeared, this did nothing, oddly. I have also tried manually installing css-loader and babel-core as suggested on similar problems, but this did nothing and css-loader still doesn't show up in my node-modules folder.
this is my package.json
{
"name": "mysite",
"version": "0.1.0",
"private": true,
"dependencies": {
"apollo-boost": "^0.4.3",
"apollo-client": "^2.6.3",
"apollo-link-http": "^1.5.15",
"babel-core": "^6.26.3",
"css-loader": "^3.0.0",
"eslint-loader": "^2.2.1",
"graphql": "^14.4.2",
"graphql-tag": "^2.10.1",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-apollo": "^2.5.8",
"react-dom": "^16.8.6",
"react-lightbox-component": "^1.2.1",
"react-markdown": "^4.1.0",
"react-responsive-carousel": "^3.1.49",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"webpack": "^3.0.0"
},
"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 dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
any ideas what could be going wrong here? I used create-react-app to start the project, do I need to eject it and edit some webpack config file maybe?
It's really weird since the issue started when I added new .scss files, which I since deleted but this didn't revert the issue.
Any help would be much appreciated.
I have create an app with react.js. I wanted to go into production.
I did
npm run build
serve -s build
I go on localhost:5000
The welcome page works very well, but when i go on localhost:5000/maini have an error
404 | The requested path could not be found
I tried to redo npm run build, but that did not work
What do you propose ?
EDIT
Package.json
{
"name": "name-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^5.10.0",
"node-sass": "^4.11.0",
"p5": "^0.8.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-p5-wrapper": "0.0.4",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8",
"socket.io-client": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"devDependencies": {},
"author": "",
"license": "ISC"
}
It looks like the "-s" or "--single" argument/option on the serve package is either not working or no longer working as expected so requests to paths other than "/" are not being rewritten.
Take a look at the following issue for the serve package: https://github.com/zeit/serve/issues/525
In my test setup downgrading serve as suggested in the bug report fixed the issue.
npm uninstall -g serve
npm install -g serve#10.1.1
serve -s build
got same issue today and finally it was caused by the wrong path in which I ran the cmd "serve -s build". we need to ensure the cmd running in one level up to "build" folder, eg: we have "opt/build" path, then server cmd needs to be done in /opt/
I am developing an app using react and it needs to run on IE. I'm using an external library called query-string. It contains arrow functions and IE doesn't know those and for some reason the code in this library is not transpiled or translated to older JS.
I had similar issue within this project with the library popmotion which was using a find method, but I fixed that by installing Babel polyfill and including it in the main file App.jsx. I did not eject the react app as I'm quite new to this and don't know exactly how react works under the hood.
This is my package.json
{
"name": "ruzovky",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.6",
"deepcopy": "^1.0.0",
"node-sass-chokidar": "^1.3.3",
"npm-run-all": "^4.1.3",
"popmotion": "^8.3.4",
"prop-types": "^15.6.2",
"query-string": "^6.1.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "node-sass-chokidar src/ -o src/ --watch",
"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"
}
}
To help you understand my issue: Everything else does get transpiled, as react takes care of everything (I can create react components using javascript, which no browser supports yet), except this single library. In my node_modules folder there is babel-loader and webpack too.
You should use build tool, the simplest & most widespread one is webpack.
Here is the tutorial on how to transpile ES6 to older versions via webpack