I have added angular-chart.js to my ionic solution, everything works well on emulator as well as device as long as i run with the "-live reload" option enabled, ionic run ios -l -s -c, but as soon as I try to run with it ionic run ios, it just shows a white screen in device and doesn't load at all.
Any clues what could be causing this? I am thinking perhaps its path related? I just cant think of what to do about it.
thanks for the help
I was able to fix this problem by adding the "chartjs":"~1.0.1" line in the bower.json file located at the root of my app.
{
"name": "com.companyname.appname",
"private": "true",
"devDependencies": {
"ionic": "driftyco/ionic-bower#1.0.0-beta.14",
"platform": "~1.3.0",
"chartjs": "~1.0.1"
},
"dependencies": {
"angular-chart.js": "~0.3.14"
}
}
Related
I followed the instructions of this tutorial (https://youtu.be/KFyRLxiRKAc) and rewatched it several times but somehow it won't work for me. After I reopen the folder in the devcontainer and run npm start, the app is loading for several minutes until the browser opens localhost:3000 and presents the app. Now if I'm editing Code of the app, like changing the text of the create-react-app it won't reload at all. To detect changes I would have to restart the container but even that would take several minutes.
How can I solve the issue?
EDIT: I already tried setting CHOKIDAR_USEPOLLING=true and FAST_REFRESH=false but neither of them makes a difference
.devcontainer/.env
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
.devcontainer/devcontainer.json
{
"name": "Node.js",
"build": {
"dockerfile": "Dockerfile",
"args": {
"VARIANT": "16-bullseye"
}
},
"settings": {},
"extensions": [
"dbaeumer.vscode-eslint"
],
"forwardPorts": [
3000
],
"postCreateCommand": "npm install && npm start",
"runArgs": [
"--env-file",
".devcontainer/.env"
]
}
.devcontainer/Dockerfile
ARG VARIANT="16-bullseye"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
You should do little bit of search in this forum. I'm quoting the answer:
Adding a .env file in the base path of the project and inside add
FAST_REFRESH=false.
This disables fast refresh and returns to hot reload.
I learn React JavaScript and now I have this problem
I Fork the notistack library in GitHub then download my fork with Git Desktop so the project are on Windows 10 here D:/git/notistack.
After following npm-link doc it all work ok I can debug run the notistack library typescript project in VScode.
I "npm link" on my notistack library and "npm link notistack" in my ReactJs project all standard procedure and I can debug run the library ok.
I make changes and rebuild notistack library and I see it's working ok.
But when I set up launch.json like this, with the runtimeArgs, that suppose to enable debugging I can't make breakpoints work in the Library.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Edge",
"request": "launch",
"type": "pwa-msedge",
"url": "https://localhost:6545",
"webRoot": "${workspaceFolder}",
"runtimeArgs": [
"--preserve-symlinks"
],
}
]
}
I set breakpoints in the ReactJs project node_module/notistack library but VSCode is setting them as unbound breakpoints.
I suspekt it has something to do with that that notistack library is a Typescript project maybe and I link to a ReactJs project. any idea?
Please advice what I need to check and do?
I looked this up, and saw some possible fixes,
Did you try disabling this setting in VSCode?
"debug.javascript.usePreview": false
Try these properties to your launch.json file
{
"trace": true,
"sourceMaps": true,
"webRoot": "${workspaceFolder}/src",
}
Restarting VSCode or Downgrading the version
Run -> Disable All Breakpoints, then Enable All Breakpoints
None of the solutions I saw for this problem worked for me. I am a windows user ; I precise cause it works without this solution, on linux, for my colleagues.
So I tried to found a configuration that works, the important parameter is outFiles :
"outFiles": [
"${workspaceFolder}/**/*.js",
"**/my-npm-linked-library/**/*.js"
"!**/node_modules/**",
]
The second line of outFiles array is the most important. You can adapt the path to one who match better with the project you work on.
The order of the paths is important, here "!**/node_modules/**" is the last one cause we don't want to add "**/my-npm-linked-library/node_modules/*.js" in our outFiles.
! Important note ! : You must remove "--preserve-symlinks" and "--preserve-symlinks-main" inside runtimeArgs parameter. My understanding about that is limited, but it doesn't work whith these options.
Try adding the --preerve-symlinks-main to the runtimeArgs. It may solve the problem.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Edge",
"request": "launch",
"type": "pwa-msedge",
"url": "https://localhost:6545",
"webRoot": "${workspaceFolder}",
"runtimeArgs": [
"--preserve-symlinks",
"--preserve-symlinks-main"
],
}
]
}
If you wanna read the docs before implementing, here is the link: https://nodejs.org/api/cli.html#cli_preserve_symlinks_main
This can be a difficult question to answer without an example repo to view your setup. For example we don't know if you're trying to debug something for SSR or Client.
First question, are you debugging this module because it's not showing up in your App? If that's the case, and you're using Webpack to compile you may need to try resolve.symlinks: true.
Generally speaking, I try to debug my code via the software I'm using to view the compiled code. For React projects, that's usually a Browser. For stuff like Unit tests, debugging within VSCode is handy. The below suggestions are for debugging via the Browser.
For SSR
Any node_modules should show up in your Sources panel, just as they would on your file system.
Here's an article on setting Chrome up to debug Server code.
Basically, start your Server with the --inspect flag.
In an empty Browser tab go to chrome://inspect
If the Server was started with --inspect, it'll be listening for a debugging session to connect, and you should see your Server listed under the Remote Target section.
Some articles suggest clicking on the item listed under Remote Target, but I just use that as an indicator that my Server is listening. Instead I click on the Open dedicated DevTools for Node. Doing that has the same result, with the benefit of not having to reopen a debugging window if your Server restarts via something like nodemon.
Navigate to the Sources tab, and you can search for a specific source file or module to place a breakpoint in.
For Client
You'll have to ensure that your compiler (Webpack, Rollup, Parcel - whatever you use), has source maps set up correctly. Also, compilers may have default settings to strip out any inlined debugger; statements, so you'll need to look into that and disable that when building for Local.
If your source maps are set up, you should be able to go to the Sources tab (in Chrome's Devtools) and search for the file you want to debug and place some breakpoints.
If source maps aren't set up, you most likely have a giant bundle file with all your node_modules and source files all compiled together (which could be why your breakpoints aren't firing currently).
In this case, you can try adding a debugger; line within your node_modules file, and see if the debugger stops now. Don't forget to reset the node_modules file after this testing step, it was purely for debugging and shouldn't remain of course.
I get following error when deploying app with react-snap to Heroku.
puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory
I applied all the changes, set all the buildpacks.
I even could react the the first deploy without "postbuild": "react-snap" line, it workes.
But then adding lines here, will fail again. What now?
"reactSnap": {
"cacheAjaxRequests": true,
"inlineCss": true,
"http2PushManifest": true,
"puppeteerArgs": ["--no-sandbox", "--disable-setuid-sandbox"]
}
"postbuild": "react-snap"
I struggled with this issue for 4 hours.
Googled a lot of solutions but no one worked for me.
And finally I've got it !!! (Actually, it is now at this very moment)
Heroku log:
> individual-claims#0.1.0 postbuild /tmp/build_3cc3bffa_
> react-snap
✅ crawled 1 out of 1 (/)
Done! I am happy.
Solution:
Go to Heroku Settings -> Buildpacks -> Add buildpack
Add: https://github.com/jontewks/puppeteer-heroku-buildpack.git
IMPORTANT !!! Make sure this is the first one. That's the common fault.
When making React on Heroku you already (I suppose) have
https://github.com/mars/create-react-app-buildpack.git
But react-buildpack should be the second one. Nobody says it.
Redeploy and have fun.
Note: After a lot of struggling I've made some changes to my application (I don't think this is really important, however)
in package.json
"engines": {
"node": ">=14.12.0", // Just to make sure I have the latest and the greatest
"npm": ">=6.14.8"
},
"devDependencies": {
...
"prettier": "^2.1.2", // Just to make sure I have the latest and the greatest
...
}
Heroku stack: heroku-18 . It's the default and you have it unless your app is old.
I don't have these lines:
"cacheAjaxRequests": true,
"inlineCss": true,
"http2PushManifest": true,
I've heard that "inlineCss": true, may cause a problem
My React application is written in Typescript and I debug it using Chrome. After a fresh start of the application everything works fine. I can set breakpoints and the debugger stops at them.
The problems appear when I change source code. Existing breakpoints are moved to a wrong line and when I try to set new breakpoints they cannot be resolved. I have to close Chrome and re-open it to make things work again. My launch config is:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Shell GUI",
"url": "https://localhost:3001",
"webRoot": "${workspaceFolder}/src",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///build/*": "${webRoot}/*"
}
}
]
}
I tried to fix the issue by specifying source map overrides, but that has not improved the situation at all. And if I haven't created a production build yet then there's no build folder at all. To me it looks as if Chrome doesn't get code changes (assuming here that breakpoints are evaluated by Chrome).
What do I have to change to make debugging working correctly, even after source code changes?
Unfortunately this is a known issue with create-react-app at the moment:
There's a link to track the issue here: https://github.com/facebook/create-react-app/issues/6074
Morning,
I downloaded ckeditor with the cakecoded plugin as shown in the github page https://github.com/CakeCoded/CkEditor, but I don't know where to customize it since I don't see a folder named ckeditor inside my application.
From my mac terminal I did this: composer require cakecoded/cakephp. When I call the ckeditor in my view like this: <?= echo $this->Ck->input('Media_content'); ?>,the ckeditor does appear but the image and flash icons are not working properly. So I decided to customize the ckeditor in adding image plugin or ckfinder, but the problem is that I did not get a ckeditor folder after the download was completed, so I don't know where to customize the ckeditor from.
I've tried to manually download ckeditor, first in the webroot/js folder and then in the plugins folder, but none of these manually downloaded ckeditors are being used by my views, and so all the configurations I make are not changing the ckeditor's behavior.
I'm having this in my composer.json:
"autoload": {
"psr-4": {
"App\": "src/",
"CkEditor\": "./plugins/CkEditor/src/"
}
},
{
"name": "cakephp/app",
"description": "CakePHP skeleton app",
"homepage": "https://cakephp.org",
"type": "project",
"license": "MIT",
"require": {
"php": ">=5.6",
"cakecoded/ckeditor": "^1.0",
"cakephp/cakephp": "3.7.",
"cakephp/migrations": "^2.0.0",
"cakephp/plugin-installer": "^1.0",
"mobiledetect/mobiledetectlib": "2."
I'm racking my brain trying to figure out this puzzle for 2 days but without any success. Any help would be appreciated.