Comments (11)
can u make a codesandbox?
from formatjs.
can u make a codesandbox?
Hi, @longlho.
My employer was gracious enough to allow me to take the better portion of my day just to give you two Git repos that you can use to reproduce the error in a minimalistic manner, and I'd rather not have to lose another day of productivity trying to figure out how to reproduce this all in CodeSandbox. Why do you feel that what I've given you is insufficient to work with?
from formatjs.
@dkreft-termly Downloading files randomly aren't safe from the security point of view; hence he recommended codesandbox or a git repo.
Onto the issue, after a quick search, this could just be on the preact side, or the bundling side. Note that preact
isn't exactly react
which react-intl
fully supports
from formatjs.
@cungminh2710 Then download and unpack them in a Docker container. :-)
I honestly don't even know how to go about reproducing this in the context of a CodeSandbox, and I really cannot afford to spend the time to figure it out right now.
What I can tell you, however, is that the actual setup is rather trivial...you simply set up a React component in both a Preact project and in a straight React project:
import { IntlProvider } from 'react-intl'
export function App() {
return (
<IntlProvider locale={ navigator.language }>
Hello, world
</IntlProvider>
)
}
You then build the React-based widget:
"build:widget": "npm run build && npm run parcel build src/index.js --no-source-maps -d widget",
Take the output file and inject that into the Preact site using a <script>
tag:
<!doctype html>
<html lang="en">
<head>
<title>react-intl 6.3.0 bug test</title>
</head>
<body>
<div id="app">
<div id="widget-root"></div>
</div>
<script type="module" src="/src/main.jsx"></script>
<script
type="text/javascript"
src="/react-widget.js"
></script>
</body>
</html>
The core problem here, as I pointed out in the description, is the (perhaps naive) use of a global variable (window.__REACT_INTL_CONTEXT__
) to act as a cache for ReactIntl. I say "naive" because it assumes that the context that is returned by React.createContext()
is going to be compatible for all applications/widgets running on the page. I'm sure you can appreciate the dangers involved in using a global cache in an environment where you don't have ultimate control over the versions of third-party libraries that are in use on a page.
from formatjs.
Below is a CodeSandbox to repro the problem. I basically just took the repo that I'd originally gzipped and attached to this ticket and imported it into CodeSandbox, made a tweak and it was done.
Right now, it's set up to use [email protected]
(the error case).
from formatjs.
@longlho @cungminh2710 Do you need anything further from me?
from formatjs.
Thanks will take a look soon
from formatjs.
looks like you can add <script>window.__REACT_INTL_BYPASS_GLOBAL_CONTEXT__ = true</script>
to your index.html
to disable that behavior
from formatjs.
For posterity's sake, #4125 addresses this issue.
When I get a chance, I'll add this and see if it works for my situation.
from formatjs.
@longlho I'm a bit perplexed by how this issue was handled. I described the situation in detail, and even pointed you directly to the PR that introduced this issue. Your response, in the end, was to simply mention the addition of another global variable which was introduced in a PR that I had to go look up myself. Why did you have my jump through all of the extra hoops to set up a code sandbox when all the information you needed to point me to the solution was right at your fingertips the whole time?
from formatjs.
@longlho By the way, I don't see any mention of this in the react-intl
documentation. Am I missing something?
from formatjs.
Related Issues (20)
- [docs] Rich Text Formatting example doesn't work HOT 2
- Polyfill.io has been sold to a weird Chinese company and should no longer be recommended HOT 1
- chore: update tzdata to 2024a
- INVALID_TAG when parsing regular HTML tag with attribute HOT 1
- Can't catch error HOT 1
- Feature request: allow units greater than `day` in `FormattedRelativeTime` with `updateIntervalInSeconds` to be picked HOT 2
- It's incredibly slow on lower end Android devices HOT 2
- Intl.Segmenter: isWordLike does not match Node.js and browsers HOT 5
- @formatjs/intl-locale/polyfill-force TypeError: Error uninitialized locale at Locale2.getWeekInfo HOT 7
- .formatMessage is not working when provided messages has object with `type: 1` HOT 8
- Extract does not work on vue template since vue 3.4.0 HOT 1
- eslint-plugin-formatjs doesn't check `this.intl.formatMessage(...)` usages HOT 1
- `LocaleMatcher` doesn't work on propietary tags HOT 2
- Node 20.12.1 x Jest; shouldPolyfill results in RangeError. Incorrect locale information provided HOT 1
- eslint-plugin-formatjs and eslint v9 support HOT 5
- Website - search is broken
- @formatjs/intl-localematcher documentation is wrong... incorrect order HOT 1
- @formatjs/swc-plugin-experimental incompatible with latest SWC core version HOT 5
- cli-lib's `extract` function ignores `throws` setting for errors in `processFile`
- intl-localematcher: Incorrect locale information provided with '*' HOT 4
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 formatjs.