fugee_ohu
(fugee ohu)
January 13, 2020, 4:20pm
1
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.
fugee_ohu
(fugee ohu)
January 13, 2020, 8:42pm
3
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
fugee_ohu
(fugee ohu)
January 13, 2020, 10:00pm
4
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’
}
}
]
}
fugee_ohu
(fugee ohu)
January 13, 2020, 10:45pm
5
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?