CODEWITHSUNDEEP
javascriptreactjsruby-on-railsbabeljsreact-rails
Grimhamr
Grimhamr

Reputation: 41

Ruby on Rails "support for the experimental syntax 'jsx' isn't currently enabled"

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

Upvotes: 2

Views: 356

Answers (1)

Grimhamr
Grimhamr

Reputation: 41

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

bundle install
rails webpacker:install
rails webpacker:install:react
rails generate react:install

Upvotes: 1

Related Questions