Comments (2)
When you translate to another language and open any dropdown it crashes
from next.js.
Hi,
This issue happens when you have floating text nodes, and React tries to update them, but unfortunately, Google Translate has removed the node to place a font in its place. The typical solution is to wrap your floating text nodes with a span.
For example:
import { useReducer } from "react";
export default function App() {
const [flag, toggle] = useReducer((x) => !x, true);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={toggle}>toggle text</button>
<br />
{flag && <>{"tomato"}</>}
</div>
);
}
If you translate the site containing that component, and then toggle the flag, it'll crash. The solution is to avoid those floating bits of text, so that React can refer to the wrapping HTML node, like a span:
import { useReducer } from "react";
export default function App() {
const [flag, toggle] = useReducer((x) => !x, true);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={toggle}>toggle text</button>
<br />
{flag && <span>{"tomato"}</span>}
</div>
);
}
Someone recently wrote an article about this, which is also a problem for other frameworks as well: https://martijnhols.nl/gists/everything-about-google-translate-crashing-react
from next.js.
Related Issues (20)
- Next.js Vercel Domain issue
- Pages using searchParams do not cache HOT 4
- Web components styling not work with CSS Modules HOT 1
- Nextjs 15: Importing git modules issue - 'Module not found: Can't resolve 'package-name' HOT 2
- Link Component does not prefetch on network recovery. HOT 1
- FluentUI popover does not work in [email protected], but it does work in [email protected] HOT 1
- FluentUI popover does not work in [email protected], but it does work in [email protected]
- Rendering error on routes that fetch data with `revalidate`
- Stale data after navigation when using internal API and SSR (app router) HOT 8
- Link Component does not prefetch on network recovery. HOT 1
- Link Component does not prefetch on network recovery.
- Cannot add dynamic application/json+oembed using app router
- Middleware: Cannot export config after declaration in export list format
- Nextjs rewrites replaces x-forwarded-host in production HOT 1
- Missing `sass-embedded` peer dependency
- SCSS Url Static Assets Failing to load HOT 4
- Static deployment with nginx web server routes are not loaded when page is refreshed (F5) HOT 1
- Unable to set request headers in middleware.js while returning i18nRouter
- INVALID_IMAGE_OPTIMIZE_REQUEST on Vercel Deployment: While using an internal nextjs api route with slug as src
- Middleware config matcher can't start with '^' HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next.js.