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

Showing Posts 1 to 1

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

cblavier
Hey there, It’s been more than a year since we started using LiveView as our main UI library and building a whole library of UI componen...
New
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
budgie
A little off-topic, but I feel like people here have a good head on their shoulders. I used to be quite good at making software. Was luc...
New
achempion
I’ve been using Emacs as my main code editor for more than a two years. It’s a custom build version although I’ve tried doom emacs and sp...
New
axelson
Hi there! :wave: @frigidcode and I (but mostly him) have been running an Elixir Book club, we’re almost done with Designing Elixir Syste...
New
budgie
I love Elixir. It’s one of 2 programming languages I’ve ever fallen in love with. But I don’t use it anymore. Serverless was the promis...
New

Other Trending Topics Top

GenericJam
Edit: 2026 May 15 - This post is archived. Mob is alive!! Main docs: mob v0.7.11 — Documentation A bit of explanation for the slightly c...
New
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
garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
mcass19
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
New
georgeguimaraes
Just published claude-code-elixir, a plugin marketplace for Claude Code with Elixir support. These are the plugins I’ve been using for my...
New
Dmk
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews