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">
Related
I've a react app, but most of the time when I do changes in the source the browser reloads the new code, but an iframe is being injected into the app over the whole application
I've already reviewed my source code, and of course I'm not doing it by myself, also, I reviewed Chrome extensions that I have installed and basically are just these (Copy All Urls, Google Docs Offline, Redux DevTools, Redux DevTools)
and all libraries that I've installed in package.json files are
{
"name": "react-ui-generator",
"version": "0.0.0",
"private": true,
"dependencies": {
"#aws-amplify/ui-react": "^1.2.6",
"#babel/core": "^7.14.6",
"#date-io/date-fns": "^1.3.13",
"#material-table/core": "~4.3.1",
"#material-table/exporters": "^1.0.12",
"#material-ui/core": "~4.12.3",
"#material-ui/icons": "~4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#material-ui/pickers": "^3.3.10",
"#monsonjeremy/react-leaflet-core": "^1.1.1",
"#react-leaflet/core": "npm:#monsonjeremy/react-leaflet-core",
"#reduxjs/toolkit": "^1.6.0",
"#rjsf/core": "~3.1.0",
"#rjsf/material-ui": "~3.1.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"aws-amplify": "^4.2.0",
"axios": "^0.21.1",
"connected-react-router": "~6.9.1",
"date-fns": "^2.0.0-beta.5",
"formik": "^2.2.9",
"guid": "0.0.12",
"http-proxy-middleware": "^2.0.1",
"immutability-helper": "~3.1.1",
"isomorphic-ws": "^4.0.1",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"material-ui-nested-menu-item": "^1.0.2",
"node-sass": "5.0.0",
"notistack": "^1.0.10",
"placeholder-loading": "^0.5.0",
"react": "^16.14.0",
"react-color": "^2.19.3",
"react-dom": "^16.14.0",
"react-leaflet": "npm:#monsonjeremy/react-leaflet#3.2.1",
"react-leaflet-markercluster": "^3.0.0-rc1",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-simple-oauth2-login": "^0.5.1",
"react-spring": "^9.3.1",
"rxjs": "^7.3.0",
"typescript": "^4.3.5",
"web-vitals": "^1.0.1",
"ws": "^7.5.3",
"yup": "^0.32.9"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"devDependencies": {
"#storybook/addon-actions": "^6.3.12",
"#storybook/addon-essentials": "^6.3.12",
"#storybook/addon-links": "^6.3.12",
"#storybook/node-logger": "^6.3.12",
"#storybook/preset-create-react-app": "^3.2.0",
"#storybook/react": "^6.3.12",
"#types/leaflet": "^1.7.5",
"path": "^0.12.7",
"react-json-editor-ajrm": "^2.5.13",
"storybook": "^6.3.12",
"storybook-addon-material-ui": "^0.9.0-alpha.24",
"storybook-addon-mock": "^1.7.0"
}
}
and I don't think that any to these are injecting this iframe.
What else can I review to fix/remove this unexpected iframe?
Because is really annoying to refresh the page manually each time or remove this iframe manually, because is blocking the entire page from clicks.
TL;DR
Have you checked your console for uncaught errors being emitted outside of your React application? This seems to happen during dev builds when create-react-app's error catching mechanism gets confused.
Longer speculation
I've been seeing this as well. This won't be a complete answer, but might help you find the error on your side.
It appears that this overlay is a create-react-app error catching mechanism gone wrong. In our case, there was an error being thrown by a <script> tag outside of the React application code entirely. It was likely generated and attached to the DOM by the Google Tag Manager SDK:
<script type="text/javascript" id="">fbq("trackCustom","Purchase Successful - Free");</script>
We do fire that particular event, but the implementation details are hidden from our React app. fbk is undefined in our dev environment (related to Facebook tracking) and so it throws a ReferenceError and the overlay you're describing pops up.
As for why create-react-app generates a completely transparent edge-to-edge empty iframe that blocks all clicks I have no idea.
Happened to me on every hot reload, preventing inspection of the DOM in Chrome Devtools. When this happens, also a console error is logged Uncaught ReferenceError: process is not defined.
My fix was to add this dev dependency
"devDependencies": {
"react-error-overlay": "6.0.9"
},
and reinstalling the dependencies.
Reference: https://github.com/facebook/create-react-app/issues/11773#issuecomment-995933869
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'
I'm trying to write some tests with JEST and graphql but am getting the following error no matter what I have in my .test.js files (even when having no code at all in it).
Plugin/Preset files are not allowed to export objects, only
functions. In
/Users/oscarstein/Documents/Projekt/Biljettsystem/ticketgo/system/node_modules/babel-preset-stage-2/lib/index.js
My .babelrc file looks as follows:
{
"presets": ["env", "stage-2"]
}
So the error comes from me using the preset "stage-2" and when i remove it everything works fine with the tests. But since my application is built with stage-2 I was wondering if there is any workaround using both "stage-2" and getting the JEST tests to work?
package.json file
{
"name": "system",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --exec babel-node index.js",
"test": "jest"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"apollo-server": "^2.1.0",
"apollo-server-express": "^2.1.0",
"bcrypt": "^3.0.2",
"body-parser": "^1.18.3",
"cors": "^2.8.5",
"dotenv": "^6.1.0",
"express": "^4.16.4",
"graphql": "^14.0.2",
"jest": "^24.0.0",
"jsonwebtoken": "^8.3.0",
"mysql2": "^1.6.4",
"nodemailer": "^4.6.8",
"nodemon": "^1.18.6",
"pg": "^7.6.0",
"sequelize": "^4.41.1",
"stripe": "^6.22.0"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1"
}
}
Babel 7 has different preset/plugin dependencies from previous versions. The link posted by LoudNoises shows how to update the dependencies. In your case, npm i -D #babel/preset-env #babel/preset-stage-2, and then update your .babelrc:
{
"presets": ["#babel/env", "#babel/stage-2"]
}
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
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"