22 July 2020 · About 1 minute read

Rails and React: Fixing "Module not found" errors for JSX files

Recently, whilst exploring how we can use React with Rails at Plymouth Software, we were coming up against an error trying to run the simple “Hello World” tutorial for the React on Rails gem.

When compiling the assets through bin/webpack-dev-server or bin/rails assets:precompile, we were getting the following error message:

Module not found: Error: Can't resolve '../bundles/HelloWorld/components/HelloWorld' in '/path/to/code/react-on-rails-app/app/javascript/packs'

However, it turns out the message is a little misleading. I discovered this by accident by changing the import line:

# hello-world-bundle.js
- import HelloWorld from '../bundles/HelloWorld/components/HelloWorld'
+ import HelloWorld from '../bundles/HelloWorld/components/HelloWorld.jsx'

Trying to compile the assets again gave a different error:

HelloWorld.jsx: Support for the experimental syntax 'jsx' isn't currently enabled (8:5)

The error seems to be that the JSX (the HTML-in-Javascript template language used by React) could not be compiled.

But JSX should come as part of the React installation, so I tried re-running the webpacker react generator:

$ bin/rails g webpacker:install:react

From the logs, I could see this added babel (amongst other things) to the package.json.

After restarting bin/webpack-dev-server and bin/rails s, the tutorial page worked as expected!

React on Rails Hello World Screenshot

Chris Blunt
Chris Blunt @cblunt
Chris is the founder of Plymouth Software. As well as code and business, he enjoys being a Dad, swimming, and the fine art of drinking tea.