We Keep Coding

css file is not found

i get a 404 ( net::ERR_ABORTED 404) error when rendering on the github.io. For some reason it’s not seeing the stylesheet.css. localhost works just fine. I moved the link inside the index.html, but it didn’t help. Any thoughts?enter image description here
enter image description here
{
"name": "js_project_skeleton",
"version": "1.0.0",
"description": "skeleton for new JS project",
"main": "index.js",
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
],
"scripts": {
"start": "webpack-dev-server --config webpack.dev.js",
"webpack:watch": "webpack --watch --config webpack.dev.js",
"webpack:build": "webpack --config webpack.prod.js --optimize-minimize"
},
"author": "mrcjbradley",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/plugin-proposal-optional-chaining": "^7.7.5",
"#babel/preset-env": "^7.6.3",
"autoprefixer": "^9.6.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"fibers": "^4.0.1",
"file-loader": "^5.0.2",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.14.1",
"postcss-loader": "^3.0.0",
"sass": "^1.23.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"url-loader": "^3.0.0",
"webpack": "^4.41.1",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
}
}

try ./src/styles/stylesheet.css or src/styles/stylesheet.css

You need a way to send your static files to the client. This can be achieved with a reverse proxy like Nginx, or simply using express.static().
Put all your "static" (css, js, images) files in a folder dedicated to it, different from where you put your "views" (html files in your case). I'll call it styles for the example. Once it's done, add this line in your server code:
app.use("/styles", express.static('./styles/'));
This will effectively serve every file in your "styles" folder via the /styles route.
Querying your stylesheet.css file in the client thus becomes:
<link href="styles/stylesheet.css">

i am developing an app with node js , it works perfectly locally but crashes anytime i try to upload it to heroku,it says cat find dotenv

i am developing an app with node js , it works perfectly locally but crashes anytime i try to upload it to heroku,it says Error: Cannot find module 'dotenv.i have installed it serval times and also updated my package but the problem continues,
this is my package.json
{
"name": "myapp",
"description": "a really cool app",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"engines": {
"node": "10.16.3",
"npm": "6.13.4"
},
"dependencies": {
"#mapbox/mapbox-sdk": "^0.9.0",
"body-parser": "^1.19.0",
"cookie-parser": "~1.4.4",
"debug": "~4.1.1",
"ejs": "~3.0.1",
"ejs-mate": "^3.0.0",
"express": "^4.17.1",
"express-session": "^1.17.0",
"faker": "^4.1.0",
"http-errors": "~1.7.3",
"method-override": "^3.0.0",
"mongoose": "^5.8.1",
"mongoose-paginate": "^5.0.3",
"morgan": "~1.9.1",
"passport": "^0.4.1",
"passport-local": "^1.0.0",
"passport-local-mongoose": "^5.0.1",
"serve-favicon": "^2.5.0"
},
"devDependencies": {
"dotenv": "^8.2.0",
"locus": "^2.0.4"
}
}
this is my Procfile
web: node app.js
this is my git ignore file
/node_modules
.DS_Store
/*.env

Try movin dotenv from 'devDependencies' to 'dependencies'
Anything that is needed to actually run your app (lets call it "in production"), should be in 'dependencies'.
Anything that you may need while eg testing can be installed to 'devDependencies'

module does not exist in the haste module map

I'm new here, I hope I enter all the information needed.
When trying to do some webscraping in my app, I got errors
module...does not exist in the haste module map" with 'events' and 'stream'.
I researched my issue, and tried the directions at: https://github.com/facebook/react-native/issues/4968 except for the watchman step, since I am on Windows.
Unfortunately, the same error keeps popping up, just with different modules. This time its babel that's complaining.
What should I do?
I also tried making a new react-native-init project and just git cloning my src code. Still get a similar error.
{
"name": "Work",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"axios": "^0.18.0",
"cheerio": "^1.0.0-rc.2",
"events": "^3.0.0",
"firebase": "^5.0.3",
"htmlparser2": "^3.9.2",
"react": "16.3.1",
"react-native": "0.55.2",
"react-native-calendars": "^1.21.0",
"react-native-communications": "^2.2.1",
"react-native-fs": "^2.11.17",
"react-native-router-flux": "^4.0.0-beta.28",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "^2.13.0",
"react-twitter-embedded-timeline": "^0.5.0",
"react-twitter-widgets": "^1.7.1"
},
"devDependencies": {
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.3",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
Copied from node cmd screen.

I faced the same issue with my react-native app.
resetting the node cache solved the issue for me :
npm start -- --reset-cache
I hope it helps

Unhandled JS Exception: Unexpected identifier '_Object$defineProperty'. Import expects exactly one argument

Description:
I'm getting a very vague error when I run my project (that was previously working), I'm guessing at this point that it has nothing to do with my project.
After spending most of the day yesterday trying to figure it out, I realized that react-native had updated itself.
What I've tried:
After cleaning the project with the various tools, I got rid of another error which was causing the project to fail during the build process (react-native run-ios).
yarn upgrade
yarn cache clean
react-native upgrade
rm -rf ios/build/; kill $(lsof -t -i:8081); react-native run-ios
However, I'm still getting the same issues
There are also issues mentioned on the babel github that seem to talk about a similar issue:
https://github.com/babel/babel-loader/issues/195
Question
Why am I getting a vague error saying I have an unhandled js exception?
Files that are relative to the issue:
.babelrc
{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy",
"transform-async-generator-functions",
"transform-object-rest-spread",
"transform-class-properties",
"transform-regenerator"]
}
react-native info
Environment:
OS: macOS High Sierra 10.13.5
Node: 9.5.0
Yarn: 1.6.0
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.1 AI-173.4670197
Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.4.1
react-native: 0.54.4 => 0.54.4
package.json
{
"name": "FluxRN",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"mobx": "^5.0.2",
"mobx-react": "^5.2.3",
"moment": "^2.22.0",
"native-base": "^2.5.2",
"react": "^16.3.0-alpha.1",
"react-native": "0.54.4",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^1.5.9"
},
"devDependencies": {
"babel-jest": "22.4.3",
"babel-plugin-transform-async-generator-functions": "^6.24.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.3",
"react-test-renderer": "^16.3.0-alpha.1"
},
"jest": {
"preset": "react-native"
}
}

To solve this problem, I had to upgrade my react and react-native dependencies to the latest version, which solved the problem.
{
"name": "FluxRN",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"moment": "^2.22.0",
"native-base": "^2.5.2",
"react": "^16.3.1",
"react-native": "0.55.4",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^1.5.9"
},
"devDependencies": {
"babel-jest": "23.0.1",
"babel-preset-react-native": "4.0.0",
"jest": "23.1.0",
"react-test-renderer": "^16.3.1"
},
"jest": {
"preset": "react-native"
}
}

Angular 5: ng build - -prod fails due to clean-css: Cannot read property 'line' of undefined

My app is under Angular 5.2.6.
Things are normal with ng serve, but when running ng build --prod, it takes a while, before failing. The errors seem to have to do with the clean-css actions.
Error trace:
92% chunk asset optimization/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37
if (originalPosition.line === null && line > 1 && selectorFallbacks > 0) {
^
TypeError: Cannot read property 'line' of undefined
at originalPositionFor (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37:23)
at originalMetadata (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/tokenizer/tokenize.js:486:43)
at intoTokens (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/tokenizer/tokenize.js:240:75)
at tokenize (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/tokenizer/tokenize.js:74:10)
at fromStyles (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/read-sources.js:147:12)
at fromString (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/read-sources.js:48:10)
at doReadSources (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/read-sources.js:33:12)
at readSources (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/read-sources.js:24:10)
at /home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/clean.js:99:12
at _combinedTickCallback (internal/process/next_tick.js:95:7)
at process._tickCallback (internal/process/next_tick.js:161:9)
It seems that it fails when cleaning css.
Here is my package.json:
{
"name": "test",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"karma": "ng test",
"test": "jest",
"test:watch": "jest --watch",
"test:ci": "jest --runInBand",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.2.6",
"#angular/common": "^5.2.6",
"#angular/compiler": "^5.2.6",
"#angular/core": "^5.2.6",
"#angular/forms": "^5.2.6",
"#angular/http": "^5.2.6",
"#angular/platform-browser": "^5.2.6",
"#angular/platform-browser-dynamic": "^5.2.6",
"#angular/platform-server": "^5.2.6",
"#angular/router": "^5.2.6",
"angular-2-local-storage": "^1.0.1",
"angular2-drag-scroll": "1.2.6",
"angular2-jwt": "^0.2.3",
"angular2-multiselect-dropdown": "1.3.6",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"file-saver": "^1.3.3",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jest-preset-angular": "^2.0.5",
"json2typescript": "1.0.5",
"lodash": "^4.12.0",
"moment": "^2.18.1",
"ng-http-interceptor": "^3.1.2",
"ng2-smart-table": "^1.1.0",
"ngx-bootstrap": "2.0.2",
"ngx-filesaver": "0.0.2",
"ngx-modialog": "^5.0.0",
"ngx-pagination": "^3.0.1",
"ngx-tooltip": "0.0.9",
"npm": "^5.2.0",
"proxy-polyfill": "^0.1.7",
"rxjs": "^5.5.6",
"sha1": "^1.1.1",
"smoothscroll-polyfill": "^0.3.5",
"web-animations-js": "^2.2.5",
"zone.js": "^0.8.8"
},
"devDependencies": {
"#angular/cli": "1.7.1",
"#angular/compiler-cli": "^5.2.6",
"#types/jasmine": "2.5.38",
"#types/jest": "^20.0.5",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"jest": "^20.0.4",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-jest": "^20.0.7",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "2.4.2"
},
"jest": {
"preset": "jest-preset-angular",
"setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
"transformIgnorePatterns": [
"node_modules/(?!json2typescript|angular2-multiselect-dropdown|ngx-filesaver|ngx-bootstrap|angular2-drag-scroll)"
]
}
}
I've cleaned npm cache, deleted the package-lock.json, re-installed node_modules, I have also downgraded to angular-cli 1.6.8 and 1.6.8 but, with 1.6.x there is another issue which appears, therefore I was told to upgrade to 1.7.x.
But unfortenately this comes worse.
Also it's difficult to beautify manually all my css data, because I have a huge css data.
Suggestions ?

Run your sass/css files to show all space characters. I am pretty sure there is a non-breaking space somewhere between your properties which is causing it to break. something like
{
color:[non-breaking-space]#123456;
}
You can spot these bad characters by installing a VS code plugin called Highlight Bad Chars
https://marketplace.visualstudio.com/items?itemName=wengerk.highlight-bad-chars

TL;DR: Use an editor to find non-breaking spaces and eliminate them.
While it seems clean-css is failing fantastically after #angular/cli 1.6.7, this issue can be resolved for later versions of #angular/cli, regardless.
I got a lead on this issue being caused by non-breaking spaces: https://github.com/jakubpawlowicz/clean-css/issues/1006
I was then able to resolve the issue by opening the src/ folder as a workspace in Notepad++, filtering on *.scss and *.css, and doing a search with Regex on using \xA0 to find non-breaking spaces in the scss/css files; I found one. Once removed, my error went away.
For those that want to know how to accomplish this in Notepad++ in detail:
File > Open Folder as Workspace... ; choose your folder containing your code
In the Folder as Workspace window, right-click the folder and choose "Find in Files"
in the "Find what" window, put \xA0
In the "Filters" window, put *.scss *.css
Under the "Search Mode" field set at the bottom, select "Regular expression"
Click "Find All" and your offending non-breaking space locations should show up in the find window. Double-click on them to go to them and then delete and save.
Profit.

Used js-beautify (https://github.com/beautify-web/js-beautify)
npm -g install js-beautify
Then cd to /src.
Then create .jsbeautifyrc en /src path.
{
"css": {
"allowed_file_extensions": [
"css",
"scss",
"sass",
"less"
],
"end_with_newline": false,
"indent_char": " ",
"indent_size": 4,
"newline_between_rules": true,
"selector_separator": " ",
"selector_separator_newline": false,
"preserve_newlines": false,
"max_preserve_newlines": 1
}
}
And finally apply to all .scss files (or .css if you have them)
In Windows I used:
FORFILES /S /M *.scss /C "cmd /c css-beautify -r -f #file"