2

I am building an app with rails-react. One of my views, search_terms/index, utilizes a react component called SearchTermIndex.js as follows:

<%= react_component("SearchTermIndex", { 
    
    currentUser: current_user,
    admin: User.where(admin: true)
          
          }) %>

When I try to load that page, the console gives me the error support for the experimental syntax 'jsx' isn't currently enabled. I have tried adding a .babelrc file as suggested here, and also tried changing my babel.config.js file from this:

...
return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {...

to this:

...return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
    '@babel/preset-react',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
    '@babel/preset-react',
        {...

I am guessing that the way Rails handles react files and bypasses the regular structure doesn't allow me to effectively make these changes, since the root folder of my application is outside the React environment(I guess?). Should I make the .babelrc file inside the components folder? Or somewhere else?

These also didn't seem to fix my issue, all of them seem to be for react-only apps: Creating a babel.config.js install babel/preset-react, add .babelrc to /src folder

Grimhamr
  • 41
  • 6

1 Answers1

1

Fixed it by running the following(basically reinstalling react-rails):

bundle install
rails webpacker:install
rails webpacker:install:react
rails generate react:install
Grimhamr
  • 41
  • 6
  • After trying to install react-contenteditable into my Ruby on Rails project using both yarn add and npm install, I was having issues with node-sass giving me a node-gyp error, and I found the solution was to upgrade webpacker (I was still running 3.5, and ran the command to upgrade it to 5.0). But then I started running into this issue: https://stackoverflow.com/a/62567777/6374022, and removed .babelrc (because Webpacker removed .babelrc from version 3 to 4). Then ran into this exact babel jsx not enabled issue, and fixed by running your commands. Thanks! – Kody_06 Feb 27 '22 at 22:01