Ionic Serve doesn't work properly? - javascript

Ionic server doesn't work properly
why doesn't it display it properly? Is it Ionics fault or my browser (Google Chrome)

It is a problem with the actual #ionic/app-scripts version.
You need to downgrade your app-scripts version like so: npm install #ionic/app-scripts#1.3.7 --save-dev
See here: GitHub Issue

Related

React Storybook blank page when run

I am trying to load the demo storybook stories.
I created a react app using create-react-app and run npm start. It starts on port: 3000.
Then when I run npm run storybook, it opens a browser on port:6006. But displays a blank page only.
What helped me was to run
rm yarn.lock
yarn install
after installing storybook into my project
Apparently react has upgraded to version 17.0.0, but storybook hasn't made the switch yet.
If you take version 16.14.0 of react it should work.
https://www.youtube.com/watch?v=fjb_QcQhRrs
If you wanna stay on react version 17 then you could upgrade storybook to prelease by doing
npx sb#next upgrade --prerelease
for additional information please refer GitHub issue #12408
Try to clear your browser cache. It resolved my issue.
npm ci saved the day for me and fixed the issue
My problem was because I updated #storybook/preset-create-react-app too and it seems I shouldn't have.
When #storybook/preset-create-react-app was reverted back to initial version 3.2.0 in my case, and #storybook/react updated to latest ^6.5.4 - everything was fine.

issue while adding react-dropzone to react-16.13.1 project

I want to add https://www.npmjs.com/package/react-dropzone to a React project written in TypeScript. And I am using the Yarn package manager.
So I hit the command yarn add #types/react-dropzone, which actually installs another deprecated package https://www.npmjs.com/package/#types/react-dropzone.
Currently in my package.json ->
"#types/react-dropzone": "^5.1.0"
I found something is wrong when I saw it working in Firefox but not in Chrome.
How can I install the actual package(https://www.npmjs.com/package/react-dropzone)?
As npm site says, you dont need #types/react-dropzone because the original package now contains everything needed.

how to migrate from ionic3 to ionic2 and also from ionic2 back to ionic3

I want to know how to exchange between ionic 3 and 2 or 2 to 3 with keep same project
im use WINDOWS. in the first time, I install
npm install -g ionic Cordova
and for starting a new project i insert like following docs in ionicframework.com :
ionic start [myproject] blank
and
cd [myproject]
ionic serve
i don't know what the version ionic was installed? is the latest version by default or what?
because of this article here :
https://www.joshmorony.com/using-http-to-fetch-remote-data-from-a-server-in-ionic-2/
tell should install v2 in the first time and then we want to move to 3 !!
and I want to know how can moving between the version 2>>3 or 3>>2 without any crash.
and I'm afraid if I'm using v3 by default and give something wrong while coding
plizzz someone explain carefully my issue
what you can do is to use a node version manager or nvm for short, which would let you handle different versions of node. By having different versions of node you can have ionic 3 on node X.X version and ionic 2 in a different one.
since you are using windows you can use this one.
You can type in your console 'ionic info' and then you will see all info from your project.
Sample output, from my environment:
global packages:
#ionic/cli-utils : 1.4.0
Cordova CLI : 6.3.1
Ionic CLI : 3.4.0
local packages:
#ionic/app-scripts : 1.3.7
#ionic/cli-plugin-cordova : 1.4.0
#ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms : android 6.1.2 browser 4.1.0
Ionic Framework : ionic-angular 3.5.0
System:
Node : v7.4.0
OS : Linux 4.4
Xcode : not installed
ios-deploy : not installed
ios-sim : not installed
npm : 5.0.3
You have to pay attention that there are differences between what is installed globally and what is local.
Globally you should have ionic-cli, which is the command line tool used to manage Ionics' project (either 1, 2, or 3).
The version of the framework you are using is the Ionic Framework, installed locally, and managed by npm (via package.json, the package is called 'ionic-framework').
So, do change dependencies, you should only change the package.json from your project.
You must pay attention, too, that each ionic-framework version has its own dependencies versions, specially from #angular (example: ionic-framework v2 uses angular2, ionic-framework v3 uses angular4).

Cordova for iOS loads white page with Gap://ready iframe

After updating to Cordova iOS v3.8.0 (included with the latest Cordova 5.1 release), I noticed that my application would start up with a white screen. I also did not receive the usual javascript console output. I wasn't sure why until I looked at the DOM tree. There was only one iFrame, and it was a 'gap://ready' iframe. I did a little searching and it appears that at least one bug somewhat related to this has appeared before.
This may help provide more clues to diagnose this problem.
https://issues.apache.org/jira/browse/CB-8002.
I attempted to update to version 3.9.0 as well, but no luck. Still the same error.
hello if you have to load cordova earlier version then i also help you
1. Try this for windows
npm uninstall -g cordova
2. Try this for MAC
sudo npm uninstall -g cordova
And You Can Also Added Cordova Previous Versions Like This
3. Install Cordova Previous Versions As bellow command.
Cordova is installed using the Node Package Manager (npm). Type the following in the command window to install:
npm install -g cordova#3.6.3-0.2.13
4. Install Cordova LATEST VERSION Then Fire As bellow command.
npm install cordova without the -g
Enjoy ...!!!
In situations like that I've found its easiest to try
cordova platforms rm ios
Then
cordova platform add ios
You can replace iOS with different os name
If that doesn't work you might try making a test app with all the same plugins.

Cordova 3.3 "device" Plugin not working on an iOS build

Installed the plugin using the direction. None of the device properties work in the index.js. When used they all hang up the device.
installed cordova.
did a build for ios then
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
the in the index.js after deviceready have an alert for device.name or device.uuid or any-other device property will not work
Hi "git" is also a node module. you should install plugin like this.
npm install -g git
This will install git in you node source location as a module.
Restart the machine.
Install phonegap plugin:
C:\Users\user1\yourprojectname>cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
You will get response as:
Fetching plugin from "https://git-wip-us.apache.org/repos/asf/cordova-plugin-cam
era.git"...
Starting installation of "org.apache.cordova.camera" for android
Preparing android project
org.apache.cordova.camera installed on android.
Hope this will be very helpful. If any issue reply.

Categories

Resources