React out of sync

[JustinCann]

Steps to reproduce

Run rails server and start your application. Make a change to a jsx / tsx file, and save the file.

Expected behavior

The application compiles the javascript, reloads in the browser and shows the changes.

Actual behavior

The application appears to compile the javascript, reloads in the browser and does not show the changes. It appears as though React is out of sync with the rest of the application. After stopping and starting the server the changes appear.

System configuration

Webpacker version: 4.0 React-Rails version: 2.5 React_UJS version: 2.5.0 Rails version: 6.0.0.rc2 Ruby version: 2.6.0

---

In development, when making a large amount of javascript changes the application stops refreshing. It's almost as if the react changes are out of sync. React hangs intermittently after saving a jsx / tsx file.

[BookOfGreg]

I could not replicate on Rails 5.2.4.1, or on Rails 6.0.2.1. Can you make an example project to show what you mean?

Made a small test repo here: https://github.com/BookOfGreg/1049-test If I run Rails s, change the helloworld.js, and refresh the page (cmd+r) webpacker compiles and serves the JS as expected.

[JustinCann]

The project is using typescript. It happens intermittently, especially if there was an error in the code base when webpacker attempts to compile.

[zrod]

I believe I might be experiencing the same issue, I'm also using typescript. Here's how it happens on my setup:

1. Create a TSX component

import * as React from 'react';

export default function Test(): JSX.Element {
  return (
    <>
      Hello from TSX!!
    </>
  );
}

2. Create a JSX component

import React from 'react';

export default function Testo() {
  return (
    <>
      Hi from JSX
    </>
  );
}

3. Load both on your main component

import React from 'react';
import Test from './Test';
import Testo from './Testo';

export default function App() {
  return (
    <>
      <Test />
      <Testo />
    </>
  );
}

Load page, you should see the content from components 1 and 2. Make changes to the TSX one, reload, changes are not visible but you get a warning/error in the console: react-dom.development.js:536 Warning: Text content did not match. Server: "Hello from TSX!!" Client: "Hello from TSX!"

Now, modify the JSX, reload, modifications made to both components are now visible and console should be error free.

I have spent many hours trying to identify what's going on. Seems to be related to some caching or tsx compilation / loader.

I'll continue digging, I might setup a repo to reproduce the issue.

[zrod]

Ok, I feel stupid... I should pay more attention to the documentation.

@JustinCann This is what fixed the issue for me:

config/application.rb (added "tsx" and "ts")

# ...
config.react.server_renderer_extensions = ["jsx", "js", "tsx", "ts"]

Ref.: https://github.com/reactjs/react-rails#configuration

I think it'd be helpful to add a note about that for TS users. Maybe under this section? https://github.com/reactjs/react-rails#typescript-support

[alkesh26]

Closing the issue based on the above solution.