React components not reloading in Phoenix 1.5 with webpack

Phoenix Forum Chat / Discussions
, ,
1

Hi all,

It seems that hot reloading of React components is not working in Phoenix 1.5 with webpack. I created this sample app to illustrate the problem I’m experiencing: GitHub - johnnyicon/phx15-react-babel-tailwindcss-postcss: Example app

Changes to ./assets/js/react/App.js are not being automatically reloaded. Refreshing the page does not reflect the change either. I have to restart the Phoenix server in order for the changes to show.

I can edit other files, like template files (*.html.eex) and they reload fine. The interesting thing, however, is even when the other files reload, the React component still doesn’t update.

Any ideas how to get hot reloading working with React components?

PS. loosely followed this tutorial to set up React in a Phoenix 1.5 project: https://betterprogramming.pub/using-react-17-with-phoenix-1-5-1b445526c739

2

Simple solution. Thanks to the help of @nicodemus on the Discord channel. This break in the expected behavior of the development framework is due to the upgrade to Webpack 1.5. In order to get hot reloading again, you need to add the --watch flag to the watchers entry in dev.exs. The flags changed from v1.4 to 1.5.

Here’s an example (lines 11 and 12):

 1 config :nexus, App.Endpoint,
 2  http: [port: 4000],
 3  debug_errors: true,
 4  code_reloader: true,
 5  check_origin: false,
 6  watchers: [
 7    node: [
 8      "node_modules/webpack/bin/webpack.js",
 9      "--mode",
10      "development",
11      "--watch",  # ADD THIS
12      "--watch-options-stdin", # THIS FLAG ALSO CHANGED IN 1.5
13      cd: Path.expand("../assets", __DIR__)
14    ]
15  ]
1 Like