I am trying to implement this in a React Electron app. I've tried using the CSS properties as listed above, but it is not working yet. The other solution with the browser window doesn't quite work either as my application is in React with the App wrapped in a Context.Provider. Here is the code I have:
In app.tsx
<ApplicationContext.Provider value={{
...this.state,
}}
>
<div id="app" className={appTheme}>
<header className="title-bar">
{/* more code */}
</header>
</div>
And this in App.scss
.title-bar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
Anyone know if there is a better strategy for solving this in a React Electron app?
llamacorn -webkit-app-region: drag is known to have problems while the developer tools are open. See this GitHub issue for more information including a workaround. https://github.com/electron/electron/issues/3647
Source: https://www.electronjs.org/docs/api/frameless-window
Ok, I'm not sure why I am getting this behavior, but in case this helps others I'll just post what I did to resolve my issue.
I was running Electron 5, I upgraded to the latest version v7 on the project, and globally on my machine. Additionally, the Electron window would launch with a Chrome dev tools window docked to the right of the app. When I closed that, I was able to drag the window. I was able able to undock the dev tools, and that also allowed the window to be draggable.
Related
I created a ReactJS project based on a tutorial useng NextJS. When running locally, the logo image on the top left corner render perfectly. However, in production, after deploying in Netlify or Vercel, The logo on top left corner do not render.
I researched and found that tere is an issue related to NextJS image rendering. However I could not fix it on my onw project.
The logo is located on the component Navbar.jsx
line 55:
<Link>
<Image
src='/../public/assets/navLogo.png'
alt='/'
width={125}
height={50}
/>
</Link>
vercel (production):
https://portfolio-next-js-tiagoc0sta.vercel.app/
git repo:
https://github.com/tiagoc0sta/portfolio-next-js.git
I finally checked your package.json file and realized you're using next v13. It is now using a new next image component with different styling than in previous version. I suggest you check the official documentation on vercel page.
But to test it out, edit your code like this:
<div style={{position:"relative", height:"200px", width:"280px"}}>
<Image src={source} alt="" fill style={{objectFit:"cover"}}/>
</div>
Make sure that the images' parent div is relatively positioned and has some dimensions set.
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'm trying to figure out why the loadeddata/loadedmetadata event is not firing in my application. Actually, sometimes it does fire but it's inconsistent. I suspect there is some kind of race condition going on here but after a lot of trial and error and quite a lot of frustration, I'm out of ideas.
So, the idea is simple. I have an <audio> element and I want to run some logic when it is loaded.
This seems to work when I try it in a non-Nextjs React application. Example here
However, when I run the same thing in my Next.js React application locally I observe the aforementioned behaviour, so I suspect that this could be nextjs specific?
This can be minimally reproduced by:
Running npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
Replacing the existing index.js with:
export default function Home() {
const handleMetadata = () => {
alert("hi")
}
return (
<div className="container">
<main>
<audio
id="audio"
onLoadedData={handleMetadata}
onLoadedMetadata={handleMetadata}
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
/>
</main>
</div>
)
}
Repeatedly refreshing the browser window
you should load the compoent which use audio with no ssr.like this:
import dynamic from 'next/dynamic'
const AudioPlayer = dynamic(import('../components/Home'), {
ssr: false
})
This isn't a direct answer but I wanted to share that #YAN7 answer above solved a similar issue for me. I was developing a component in Storybook that was using GSAP scroll trigger to scrub play a video. It worked perfectly in Storybook, but when I went to import it and use it in the UI/Next Js project, it wouldn't work as expected. Occasionally I managed to get the animation effect to work, but most of the time I couldn't. After a lot of console logging, I realised the only significant difference between the two examples was one was in Next and the other wasn't. Which eventually lead me here. I dynamically imported my component into Next as in YAN7's example and it worked perfectly. Many thanks YAN7! I hope this comment helps other GSAP + Next devs in the future
I had a certain bug that I was unsure how to debug. The bug is that styling that I use for a create-react-app (Typescript) app through material-ui and regular CSS, shows up just fine in development but it shows differently for certain CSS properties when I deploy the app online (I've only tried Heroku and Vercel). The app doesn't show any errors or warnings in the console when I'm developing. I have no idea why it's happening and I've tried the following so far
Read through my code many times being extra careful at every step.
Open the website (development and production) in incognito mode on Chrome 85.0.4183.83 (Linux, 64 bit)
Look through the documentation for material-ui (material-ui.com) and the React docs for any lead on this
Search google for prior such issues
So far, nothing has turned up. Could someone please guide me in the right direction?
The build pack I use on Heroku after deployment is the well known one by mars and available at https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz .
For convenience, I have included my package.json here on pastebin.
Thank you so much for helping out.
============= EDIT =============
I've been experimenting with the code and it seems like the problem lies with how material-ui is compiled during build time. The problems which don't show up in development, show up in production.
For example, the biggest thing I noticed is if you mix custom style prop flags given by the material-ui components and add your own styling with className or style, during build time these latter styles are overridden partially if not completely.
So if I do
import React,
{ useRef } from "react";
import {
Button,
makeStyle,
Theme
} from "#material-ui/core";
/*
Start of functional component using memo
.
.
.
*/
const useClasses = useRef(makeStyle((theme : Theme) => { return {
buttonStyles:
{
backgroundColor: theme.palette.text.hint
}
}}));
const styles = useClasses.current();
<Button
color={"secondary"}
className={styles.buttonStyles}>
button text
</Button>
/*
.
.
.
*/
in development, the button will have the backgroundColor I give it in makeStyles, but in production that property will switch to secondary as given in the color prop which defaults to the value theme.palette.secondary.main.
And sometimes, just even using a component from material-ui without any extra config causes a problem.
I am also using code splitting with lazy and Suspense if that matters.
StackMatch can you please link your github/gitlab repo? I think I might know what the problem is but can't be certain without seeing how your dev environment is configured.
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.