I am working with React and Ionic: "#ionic/react": "^5.5.0". The app looks fine in a fresh tab:
As soon I hit refresh on the browser the inputs get broken/look different:
Do you know why?
It depends from variables scss on preferred dark mode that usually Ionic put automatically. You can look for "#dark" on your scss files and edit it!
Related
I'm currently implementing the Monaco Editor from Microsoft (https://github.com/microsoft/monaco-editor), with a plugin for yaml validation, autocompletion, etc. . (https://github.com/remcohaszing/monaco-yaml) in our react js APP.
Maybe it is also important to tell you, that our authentication process gets managed via Keycloak.
When I'm running my code in development (React-scripts start) everything is working as expected.
I can create the editor, the schema gets implemented correctly and autocompletion is also working.
BUT as soon as I try to use the editor in PRODUCTION Build it seems that it cant load my workers correctly, following the editor is not working as it should.
I always get these errors in production:
I tried to use monaco-editor-webpack-plugin with React Rewired but it didnt have an positive effect either.
I also tried to use the worker loader to load the workers, but it also didnt help
Any more Ideas how I can fix this ? Has this to do something with CORS ? Because it tries to load files in a url? Or am I missing something ?
Thanks in advance
What I tried: Monaco Webpack Plugin, plain webpack, worker-loader
Expected Behaviour: Monaco Editor with Monaco Yaml working in production build.
Current behaviour: Working fine in development build, cannot load workers in production.
The problem was, that my keycloak (on a different port) rejected to load the working scripts. After handling this problems, the editor is working fine.
Localhost
Gitpage
The bar chart is working fine in localhost but after hosting on gitpage it's not showing properly. What to do?
Repo: https://github.com/mzs21/bar-chart
Live: https://mzs21.github.io/bar-chart/
The JS appears to be working ok and the app is running OK but I think the CSS is missing, so I completely understand your confusion!
You're using Tailwind so I'm going to assume that the Git pages deploy does not trigger the Tailwind build process. As that's done transparently locally you would not be 'hosting' the CSS that you would see.
I know posting links is naughty but as you're new have a read of this blog: https://harrywang.medium.com/introducing-tailpages-tailwind-github-pages-89903c52d3ec
I'm doing a small project using react, where I needed navbar, so I copied the navbar code from flowbite(that uses Tailwind CSS), I've changed all necessary things need to change for react but still it's not working for small devices. The link is given below:
Tailwind Navbar
I think it's your browser issue. If you are using Google Chrome, then change your browser to Firefox. Unfortunately, the JS script file of Flowbite is not working on Google Chrome. Checking that navbar on other browsers may solve the problem.
I have the following bug:
I created a new project using CRA with the typescript template:
npx create-react-app my-project --template typescript
After running yarn start everything works fine. But then when I create some new component files, say a Counter.tsx and I import it into App.tsx, include it in the render/return and then start to make changes to the counter component, nothing shows up anymore on hot reload.
I opened the inspector and the div#root is empty after hot reloading.
Only when I change something in the App.tsx the React code gets inserted again.
So the behaviour is:
Change anything in a child or grandchild etc.. component from App.tsx
Browser shows empty screen with empty div#root
Expected behaviour:
Change anything same as before.
Browser shows the rendered react including the recent change. (with same state etc..)
Same behaviour tested in Firefox and Chrome.
Am I missing something? The console and browser don't give any error.
Thank you!
EDIT/UPDATE:
This actually only seems to be the case when I include the following context provider that initiates a web audio context:
https://gist.github.com/casperleerink/c10e81f89cf83a282be593ce62c3039d
I tried it using a context that doesn't initiate an audio context, and then everything works fine. Not sure what I should change in my code though.
have very simple sample app which build Create React App + Styled-Components to prove this issue. But I have real big application which I am facing this issue which I am going to explain it below.
I would like to pre-render this app with Rendertron for SEO/GoogleBots and etc. But the problem is when I build PRODUCTION version of React App which use Styled-Components . all the style will be missing on static version which Rendertron produced, but from other side if I try the same workflow with dev-server of app , everything looks fine .
So far I know there is different on PROD version and DEV version of my application when I render it with Rendertron . But I am not sure what cause this issue and how I can fix this issue .
I am looking for solution or idea which can help me to solve this issue .
Here is my sample code which I peppered for test .
https://github.com/AJ-7885/test-styled-component-with-rendertron
Here is screen shot from different version of Rendered version by Rendertron base on PROD or DEV version of the same application .
enter image description here
After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.
Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well.
Reference: https://www.styled-components.com/releases#v4.1.0
But the only part I am not sure , how to set disable this Speedy Mode in Create-React-App without Ejecting , Dose any body has any idea ?
You need to render your styles on the server side and inject those styles in your pre-rendered react app. Styled-components explains how to do that here: https://www.styled-components.com/docs/advanced#server-side-rendering
Also, I'd recommend using react-snap for pre-rendering since that is recommended by the Create React App docs. react-snap seems to be more of a React-specific solution that may be easier to implement, especially with styled-components.