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/rails assets:precompile, we were getting the following error message:
However, it turns out the message is a little misleading. I discovered this by accident by changing the import line:
- 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)
But JSX should come as part of the React installation, so I tried re-running the webpacker react generator:
$ bin/rails webpacker:install:react
From the logs, I could see this added
babel (amongst other things) to the
bin/rails s, the tutorial page worked as expected!