I am new to angular but currently trying to setup an angular project. I executed yo angular and after initial steps I ended up at place where its asking following question:
? Overwrite package.json? (ynaxdH)
y) overwrite
n) do not overwrite
a) overwrite this and all others
x) abort
d) show the differences between the old and the new
h) Help, list all options
Answer:
I am not sure what option to really use. This is a brand new project. So I choose the option d to get an understanding of the difference.
? Overwrite package.json? show the differences between the old and the new
removed added
{
"name": "client",
"private": true,
"devDependencies": {
"autoprefixer-core": "^5.2.1",
"grunt": "^0.4.5",
"grunt-angular-templates": "^0.5.7",
"grunt-concurrent": "^1.0.0",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-connect": "^0.9.0",
"grunt-contrib-copy": "^0.7.0",
"grunt-contrib-cssmin": "^1.0.2",
"grunt-contrib-htmlmin": "^0.4.0",
"grunt-contrib-imagemin": "^1.0.0",
"grunt-contrib-jshint": "^0.11.0",
"grunt-contrib-uglify": "^0.7.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-filerev": "^2.1.2",
"grunt-google-cdn": "^0.4.3",
"grunt-jscs": "^1.8.0",
"grunt-newer": "^1.1.0",
"grunt-ng-annotate": "^0.9.2",
"grunt-postcss": "^0.5.5",
"grunt-svgmin": "^2.0.0",
"grunt-usemin": "^3.0.0",
"grunt-wiredep": "^2.0.0",
"jit-grunt": "^0.9.1",
"time-grunt": "^1.0.0",
"jshint-stylish": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"test": "karma start test/karma.conf.js"
}
}
basically following showed up as added:
},
"scripts": {
"test": "karma start test/karma.conf.js"
}
I'm guessing what you did was run the generator without having installed all the necessary dependencies and so it created the package.json but exited halfway through.
There's really no harm in overwriting the package.json if you're starting a brand new project and haven't installed any dependencies yet.
The snippet of code that the generator is trying to install is actually a really handy feature of npm.
},
"scripts": {
"test": "karma start test/karma.conf.js"
}
"test" is a script that you can execute from the command line to run its associated task: "karma start test/karma.conf.js". This task will execute unit tests and tell you that your app is working as expected. You can read more about karma here: https://github.com/karma-runner/karma
You may also choose to write your own scripts, in which case you can put them next to this one, though I imagine you'll mostly be using grunt to run all of your tasks.
},
"scripts": {
"test": "karma start test/karma.conf.js",
"fun-script": "echo 'Hello world!"
}
I hope that helped :)
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
PLEASE HELP!!I have search the entire project which DOES NOT use Pricker at all but when I run npx react-native run-android it throws out :
ERROR Invariant Violation: Picker has been removed from React Native.
It can now be installed and imported from
'#react-native-picker/picker' instead of 'react-native'. See
https://github.com/react-native-picker/picker ERROR Invariant
Violation: Module AppRegistry is not a registered callable module
(calling runApplication). A frequent cause of the error is that the
application entry file path is incorrect. This can also happen when
the JS bundle is corrupt or there is an early initialization error
when loading React Native.
Same problem faced by this guy at the below link...No answer available... Please help...Thank you in advance
Invariant Violation: Picker has been removed from React Native
I have #react-native-picker/picker installed
This is my package.json
"name": "MYAPP",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"build-android": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.android.js --bundle-output iOS/main.jsbundle --platform 'android' --assets-dest ./ --dev false --reset-cache",
"test": "jest",
"test:watch": "npm run test -- --watch",
"postinstall": "npx jetify",
"extractLangs": "react-gettext-parser --output messages.pot 'src/**/*.js'"
},
"dependencies": {
"#react-native-community/cli": "^6.3.1",
"#react-native-community/masked-view": "0.1.11",
"#react-native-picker/picker": "^2.2.1",
"axios": "0.24.0",
"base-64": "1.0.0",
"date-fns": "2.27.0",
"gettext.js": "git+https://github.com/freiserg/gettext.js.git",
"lodash": "4.17.21",
"react": "17.0.2",
"react-native": "0.66.3",
"react-native-device-info": "8.4.8",
"react-native-eject": "0.1.2",
"react-native-extended-stylesheet": "0.12.0",
"react-native-firebase": "^5.6.0",
"react-native-gesture-handler": "^2.1.0",
"react-native-keyboard-aware-scroll-view": "0.9.5",
"react-native-navigation": "7.24.2",
"react-native-safe-area-context": "^3.3.2",
"react-native-splash-screen": "3.3.0",
"react-native-swipeout": "2.3.6",
"react-native-swiper": "1.6.0",
"react-native-vector-icons": "9.0.0",
"react-navigation-stack": "^2.10.4",
"react-redux": "7.2.6",
"redux": "4.1.2",
"redux-logger": "3.0.6",
"redux-persist": "6.0.0",
"redux-thunk": "2.4.1",
"shitty-qs": "1.0.1",
"tcomb-form-native": "0.6.20"
},
"devDependencies": {
"babel-eslint": "10.0.1",
"babel-jest": "27.4.5",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",
"eslint": "8.4.1",
"eslint-config-airbnb": "19.0.2",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.27.1",
"jest": "27.4.5",
"jetifier": "2.0.0",
"metro-react-native-babel-preset": "^0.66.2",
"nock": "13.2.1",
"react-gettext-parser": "1.16.0",
"react-native-mock": "0.3.1",
"react-test-renderer": "17.0.2",
"redux-mock-store": "1.5.4"
},
"jest": {
"preset": "react-native",
"verbose": true,
"setupFiles": [
"<rootDir>/__tests__/mocks/global.js"
],
"testMatch": [
"**/__tests__/**/*.spec.js?(x)"
Install #react-native-picker/picker
Upgrade "native-base": "2.15.2"
Officially picker has been removed from react-native. You can use the community edition. #react-native-community/picker
Delete node modules folder then run yarn install at the terminal in your projects directory.
Then try to run the app again.
I am not sure this will help but since it says This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native. it might be worth trying.
In my case, tcomb-form-native caused this error because it has not been updated for years. I hope this PR will be merged soon.
https://github.com/gcanti/tcomb-form-native/pull/605
1.Install patch-package into your project,
Install #react-native-picker/picker into your project,
go to node_modules\react-native\index.js
replace all
invariant(
false,
'DatePickerAndroid has been removed from React Native. ' +
"It can now be installed and imported from '#react-native-
community/datetimepicker' instead of 'react-native'. " +
'See https://github.com/react-native-
datetimepicker/datetimepicker',
);
or
invariant(
false,
........ DatePicker ..........
);
to
return require('#react-native-picker/picker')
run npx patch-package react-native
rebuild your app and it will be work
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"
Here's the offending line of code:
import Channel from '!json-loader!yaml-loader!../../../../config/channel.yml'
As you can see, I'm using !s to bypass the normal import loader logic so I can import the parsed YAML file as a local variable at compile-time.
This works perfectly in development (with webpack-dev-server) but fails in production:
Module not found: Error: Can't resolve 'yaml-loader' in '/var/www/www.avfacts.org/releases/20180205125420/app/frontend/views/Episodes'
# /var/www/www.avfacts.org/shared/node_modules/babel-loader/lib!/var/www/www.avfacts.org/shared/node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/frontend/views/Episodes/Form.vue 87:0-78
# ./app/frontend/views/Episodes/Form.vue
# /var/www/www.avfacts.org/shared/node_modules/babel-loader/lib!/var/www/www.avfacts.org/shared/node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/frontend/views/Episodes/Edit.vue
# ./app/frontend/views/Episodes/Edit.vue
# ./app/frontend/routes.js
# ./app/frontend/packs/application.js
Here's my package.json file:
{
"name": "avfacts",
"private": true,
"dependencies": {
"#panter/vue-i18next": "^0.9.1",
"#rails/webpacker": "^3.2.1",
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"babel-preset-minify": "^0.2.0",
"i18next": "^10.3.0",
"lodash": "^4.17.4",
"luxon": "^0.4.0",
"marked": "^0.3.12",
"moment": "^2.20.1",
"moment-duration-format": "^2.2.1",
"normalize.css": "^7.0.0",
"numeral": "^2.0.6",
"precss": "^3.1.0",
"simplemde": "^1.11.2",
"vue": "^2.5.13",
"vue-datetime": "^1.0.0-beta.2",
"vue-loader": "^13.7.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13",
"vuex": "^3.0.1",
"weekstart": "^1.0.0"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"webpack-dev-server": "^2.11.1",
"yaml-loader": "^0.5.0"
}
}
(and yes, I did try moving yaml-loaders from devDependencies to dependencies even though that shouldn't work, and it did indeed not work)
Have you added loader in your webpack.config.js .
// webpack.config.js
module: {
loaders: [
{
test: /\.yaml$/,
include: path.resolve('data'),
loader: 'yaml',
},
],
}
As its been mentioned in https://www.npmjs.com/package/yaml-loader
EDIT: Nope, that wasn't it. I replaced yaml-loader with yaml-js-loader and called it a day. Still not sure what the problem was.
This problem was seemingly fixed by disabling require 'capistrano/rails/assets in my Capfile, thus disabling the normal Rails Sprockets asset compilation (this task also runs yarn install, but apparently in a different environment or something?).
Now only the capistrano/yarn tasks run, which perform the Webpack asset compilation successfully.