johnnyicon

johnnyicon

React components not reloading in Phoenix 1.5 with webpack

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 · GitHub

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

Most Liked

johnnyicon

johnnyicon

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  ]

Where Next?

Popular in Discussions Top

mbenatti
Following https://github.com/tbrand/which_is_the_fastest |> https://raw.githubusercontent.com/tbrand/which_is_the_fastest/master/imgs...
New
restack_oslo
Hello, Please pardon me for any faux paux. I am 46 and this is my first time on a forum of any kind. I wanted to to get answers from tho...
New
und0ck3d
Hello everyone! A few days ago I’ve created a topic here about how people were creating CMSs with Elixir and Phoenix. I’ve been studying...
New
Fl4m3Ph03n1x
Background A few days ago I was listening to The future of Elixir from Elixir Talks, with Dave Thomas (@pragdave ) and Brian Mitchell. I...
New
eteeselink
Hi all, In the last days, two things happened: A blog post titled “They might never tell you it’s broken” made the rounds. It’s about ...
New
thojanssens1
It would be nice to be able to define a redirect from one route to another from the router.ex file. E.g.: redirect "/", UserController, ...
New
Rustixir
Hi everyone, im working on find best language/framework/system for high concurrency, high performance and stable performance after wor...
New

Other popular topics Top

Qqwy
Update: How to use the Blogs & Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 130286 1222
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 54006 488
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New

We're in Beta

About us Mission Statement