We had a react component that refused to work in FireFox.
« Back to overview
We a beautiful React component and it was beautiful, and worked perfectly in our development environment.
When it was time to deploy, the production build refused to work on Firefox. It worked perfectly in Safari, Chrome etc.
The console said it tried to connect to a socket which resulted in a 'this operation is not secure' error. That error caused the whole component to halt.
At first we thought it was a problem in socket.io (the component connected to a websocket server for chat functionality).
Finally we discovered the problem was solved by disabling Reactotron in the production build.
Reactotron is an excellent tool for debugging and monitoring Redux in React. It allows you to view dispatched actions and subscribe to state changes. You can even dispatch actions while your app or component is running!
Reactotron however tries to connect to a websocket on localhost to accomplish this. While Safari and Chrome allow this on a production server (i.e. on your actual domain, a domain name other than localhost), Firefox designates this operation as insecure and throws an exception. Hence, React refuses to run.
For production builds, we disabled the 'connect' call in our Reactotron initialisation code.