syntax error in react file index.js


import React from ‘react’

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

document.addEventListener(‘DOMContentLoaded’, () => {

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(§ => resolve§),
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?