johnnyicon

johnnyicon

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

First Post! Switch mode

johnnyicon

johnnyicon OP

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  ]
— All posts loaded —

Where Next? Top

Trending in Discussions Top

AstonJ
As the title says, please share what you’ve been up to with Elixir. Whether that’s been learning it, looking into it, making stuff with i...
2977 91898 914
New
AstonJ
The obligatory hello world thread! Who are you and where are you from? :stuck_out_tongue:
4616 55835 594
New
byu
@chrismccord : I just saw the Extract AGENTS.md from Phoenix.new into phx.new generator commit to the phoenix project. My initial shotgu...
New
arcanemachine
I was working on an Ecto migration and I needed a timestamp. So, for the nth time, I looked up the different data types for timestamps, a...
New
juhalehtonen
There has been a thread to discuss the Stack Overflow Developer Survey on this forum every year since 2018, so here’s yet another one for...
New
type1fool
I just stumbled on a newly redesigned elixir-lang.org. :tada: It looks like @Software_Mansion did the work, and I think it is generally a...
New
alexslade
Fly’s CEO posted this recently - Turn And Face The Strange · The Fly Blog It says that Fly is going all-in on sprites, which is a worry ...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
wintermeyer
There are three potential reasons for members of this forum to have a look at https://vutuv.de You are tired or annoyed of LinkedIn. Yo...
New

We're in Beta

About us Mission Statement