syntax error in react file index.js

[fugee ohu]

app/javascript/packs/index.js

import React from 'react'

import ReactDom from 'react-dom'
import App from '../components/App'

document.addEventListener('DOMContentLoaded', () => {
   ReactDom.render(
      <App/>,
      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(
>  7 |       <App/>,
       |       ^

[Jake Niemiec]

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

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com.

[fugee ohu]

On Monday, January 13, 2020 at 1:04:46 PM UTC-5, jake wrote:

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

On Mon, Jan 13, 2020 at 10:20 AM fugee ohu <fuge...@gmail.com> wrote:

app/javascript/packs/index.js

import React from 'react'

import ReactDom from 'react-dom'
import App from '../components/App'

document.addEventListener('DOMContentLoaded', () => {
   ReactDom.render(
      <App/>,
      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(
>  7 |       <App/>,
       |       ^

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.

To unsubscribe from this group and stop receiving emails from it, send an email to rubyonra...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com.

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]

On Monday, January 13, 2020 at 1:04:46 PM UTC-5, jake wrote:

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

On Mon, Jan 13, 2020 at 10:20 AM fugee ohu <fuge...@gmail.com> wrote:

app/javascript/packs/index.js

import React from 'react'

import ReactDom from 'react-dom'
import App from '../components/App'

document.addEventListener('DOMContentLoaded', () => {
   ReactDom.render(
      <App/>,
      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(
>  7 |       <App/>,
       |       ^

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.

To unsubscribe from this group and stop receiving emails from it, send an email to rubyonra...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com.

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]

On Monday, January 13, 2020 at 1:04:46 PM UTC-5, jake wrote:

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

On Mon, Jan 13, 2020 at 10:20 AM fugee ohu <fuge...@gmail.com> wrote:

app/javascript/packs/index.js

import React from 'react'

import ReactDom from 'react-dom'
import App from '../components/App'

document.addEventListener('DOMContentLoaded', () => {
   ReactDom.render(
      <App/>,
      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(
>  7 |       <App/>,
       |       ^

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.

To unsubscribe from this group and stop receiving emails from it, send an email to rubyonra...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com.

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?