search

pmndrs / react-spring

✌️ A spring physics based React animation library
http://www.react-spring.dev/
MIT License
28.05k stars 1.19k forks source link

[bug]: createInterpolate deprecation warning results in app crash with IE11 #2202

Closed mattilajoonas closed 1 year ago

mattilajoonas commented 1 year ago

Which react-spring target are you using?

What version of react-spring are you using?

9.7.3

What's Wrong?

deprecateInterpolate and deprecateDirectCall functions warnings results in an app crash with IE11 when navigation is done with a redirect. Direct navigation works correctly. I've pinpointed the failing function call, with the help of a colleague, to this callbacks function call in the once function.

image

The above image shows that the deprecation notification is never logged to the console but instead errors with Invalid calling object. Replacing the func(...args); function call in line 15 with just console.warn(...args); fixes the issue and lets the app load normally.

We've implemented the changes mentioned in useSpring and interpolate deprecation notifications as a fix. I've also created a patch for the react-spring dependency in our repo as a short term solution, to make sure that the deprecated function calls don't break for us in the future. Our patch isn't necessarily suitable to be a long term solution but I'd love to create a pr for one if/when I get some debugging help.

I'm creating this issue because this does not seem intentional and could potentially break in the future if/when something else gets deprecated. I'm also interested to find out what the root cause is.

To Reproduce

  1. Bootstrap with npx create-react-app ie-deprecation-repro --template typescript
  2. Add react-spring/web and react-app-polyfill to the project
  3. add IE to development browserlist with "ie >= 11"
  4. Create a component with interpolate (important for the deprecation notification)
  5. Open IE 11 in Browserstack
  6. Navigate first to localhost:3000 and after bing is done loading to http://localhost:3001.
  7. Should result in an Invalid calling object error. Directly navigating to http://localhost:3001 works correctly.

Expected Behaviour

IE 11 should load the app correctly even when navigating via redirects.

Link to repo

https://github.com/mattilajoonas/react-spring-ie11-repro

mattilajoonas commented 1 year ago

My colleague had some time to debug this. Looks it isn't a bug in react-spring: IE has console object defined only when devtools are open. What IE will do to all console method calls, is replace them with __BROWSERTOOLS_CONSOLE_SAFEFUNC usage, which is found in window object within IE. This will ensure that the methods defined in the console object, are not called when devtools are closed, which would result in immediate failure.

react-spring stores a method of console to a variable in the global execution context of the file, and later on calls it (yes, it's this simple). The method stored will be the host provided native console method, and not the __BROWSERTOOLS_CONSOLE_SAFEFUNC function.

I'll close the issue as won't fix.