syntax error in react file index.js

app/javascript/packs/index.js

import React from ‘react’

import ReactDom from ‘react-dom’ import App from ‘…/components/App’

document.addEventListener(‘DOMContentLoaded’, () => { ReactDom.render( , document.body.appendChild(document.createElement(‘div’)), ) })

I get this error:

SyntaxError: …/packs/index.js: Unexpected token (7:6)

5 | document.addEventListener('DOMContentLoaded', () => {
6 |    ReactDom.render(

That looks like a babel problem, you are not transforming the jsx. Post your babel config file.

Where should that file be located It isn’t in config/webpack I installed react with yarn add react react-dom I never ran webpacker:install react and I’m not using the gem either

It was in node_modules

const { join, resolve } = require(‘path’) const { cache_path: cachePath, source_path: sourcePath, resolved_paths: resolvedPaths } = require(‘…/config’) const { nodeEnv } = require(‘…/env’)

// Process application Javascript code with Babel. // Uses application .babelrc to apply any transformations module.exports = { test: /.(js|jsx|mjs)?(.erb)?$/, include: [sourcePath, …resolvedPaths].map((p) => resolve(p)), exclude: /node_modules/, use: [ { loader: ‘babel-loader’, options: { cacheDirectory: join(cachePath, ‘babel-loader-node-modules’), cacheCompression: nodeEnv === ‘production’, compact: nodeEnv === ‘production’ } } ] }

I installed react using yarn I got it working by installing react with webpacker:install:react since webpacker is what I’m using makes more sense I guess, so also I guess I can remove the yarn react packages that I installed?