Code Monkey home page Code Monkey logo

Comments (11)

longlho avatar longlho commented on June 15, 2024

can u make a codesandbox?

from formatjs.

dkreft-termly avatar dkreft-termly commented on June 15, 2024

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.

cungminh2710 avatar cungminh2710 commented on June 15, 2024

@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.

dkreft-termly avatar dkreft-termly commented on June 15, 2024

@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.

dkreft-termly avatar dkreft-termly commented on June 15, 2024

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).

https://codesandbox.io/p/github/dkreft-termly/react-intl-bug/master?layout=%257B%2522sidebarPanel%2522%253A%2522GIT%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clrpn8w9q00063b6qcvveyjn1%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clrpn8w9q00023b6qa72nu4kz%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clrpn8w9q00043b6qz0l1djjr%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clrpn8w9q00053b6q8l8p15uu%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clrpn8w9q00023b6qa72nu4kz%2522%253A%257B%2522id%2522%253A%2522clrpn8w9q00023b6qa72nu4kz%2522%252C%2522activeTabId%2522%253A%2522clrpnk5nh01ih3b6qgrw4ezs0%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clrpn8w9p00013b6qktanrt49%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252F.gitignore%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252F.codesandbox%252Ftasks.json%2522%252C%2522id%2522%253A%2522clrpnk3dx01gv3b6qhvutb8fg%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522DIFF%2522%252C%2522filepath%2522%253A%2522%252F.codesandbox%252Ftasks.json%2522%252C%2522base%2522%253A%2522HEAD%2522%252C%2522id%2522%253A%2522clrpnk5nh01ih3b6qgrw4ezs0%2522%252C%2522mode%2522%253A%2522temporary%2522%257D%255D%257D%252C%2522clrpn8w9q00053b6q8l8p15uu%2522%253A%257B%2522id%2522%253A%2522clrpn8w9q00053b6q8l8p15uu%2522%252C%2522activeTabId%2522%253A%2522clrpnjye701d53b6qb07adhjo%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clrpnhhx001243b6qph55xnkf%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clrpnjye701d53b6qb07adhjo%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clrpn8w9q00043b6qz0l1djjr%2522%253A%257B%2522id%2522%253A%2522clrpn8w9q00043b6qz0l1djjr%2522%252C%2522activeTabId%2522%253A%2522clrpn8yvd004n3b6qr3j5szjz%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clrpn8w9q00033b6q20vq2nqv%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clrpnfp190013e8hkaanv0iel%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clrpn8yvd004n3b6qr3j5szjz%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522CSB_RUN_OUTSIDE_CONTAINER%253D1%2520devcontainer%2520templates%2520apply%2520--template-id%2520%255C%2522ghcr.io%252Fdevcontainers%252Ftemplates%252Fjavascript-node%255C%2522%2520--template-args%2520%27%257B%257D%27%2520--features%2520%27%255B%255D%27%2522%252C%2522id%2522%253A%2522clrpna2xr008q3b6qs3kk2r5f%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

from formatjs.

dkreft-termly avatar dkreft-termly commented on June 15, 2024

@longlho @cungminh2710 Do you need anything further from me?

from formatjs.

longlho avatar longlho commented on June 15, 2024

Thanks will take a look soon

from formatjs.

longlho avatar longlho commented on June 15, 2024

looks like you can add <script>window.__REACT_INTL_BYPASS_GLOBAL_CONTEXT__ = true</script> to your index.html to disable that behavior

from formatjs.

dkreft-termly avatar dkreft-termly commented on June 15, 2024

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.

dkreft-termly avatar dkreft-termly commented on June 15, 2024

@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.

dkreft-termly avatar dkreft-termly commented on June 15, 2024

@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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.