syntax error in react file index.js

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

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/>,
       |       ^

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com.
Reply | Threaded
Open this post in threaded view
|

Re: syntax error in react file index.js

Jake Niemiec
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 <[hidden email]> 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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com.

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/CALn2xuDx5aTMi81wf%3DfxU9iRD6sT0v4i9zQsJXos7FsT7OmVJQ%40mail.gmail.com.
Reply | Threaded
Open this post in threaded view
|

Re: syntax error in react file index.js

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 <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="mD4YoG8HCQAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">fuge...@...> 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 <a href="javascript:" target="_blank" gdf-obfuscated-mailto="mD4YoG8HCQAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">rubyonra...@googlegroups.com.
To view this discussion on the web visit <a href="https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com?utm_medium=email&amp;utm_source=footer" target="_blank" rel="nofollow" onmousedown="this.href=&#39;https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com?utm_medium\x3demail\x26utm_source\x3dfooter&#39;;return true;" onclick="this.href=&#39;https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com?utm_medium\x3demail\x26utm_source\x3dfooter&#39;;return true;">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

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/99e2b00a-19e4-4c33-8f17-f680052b0b6d%40googlegroups.com.
Reply | Threaded
Open this post in threaded view
|

Re: syntax error in react file index.js

fugee ohu
In reply to this post by Jake Niemiec


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 <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="mD4YoG8HCQAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">fuge...@...> 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 <a href="javascript:" target="_blank" gdf-obfuscated-mailto="mD4YoG8HCQAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">rubyonra...@googlegroups.com.
To view this discussion on the web visit <a href="https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com?utm_medium=email&amp;utm_source=footer" target="_blank" rel="nofollow" onmousedown="this.href=&#39;https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com?utm_medium\x3demail\x26utm_source\x3dfooter&#39;;return true;" onclick="this.href=&#39;https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com?utm_medium\x3demail\x26utm_source\x3dfooter&#39;;return true;">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'
      }
    }
  ]
}

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/0ee3e797-0119-4826-82d9-0e20bb20a6d2%40googlegroups.com.
Reply | Threaded
Open this post in threaded view
|

Re: syntax error in react file index.js

fugee ohu
In reply to this post by Jake Niemiec


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 <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="mD4YoG8HCQAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">fuge...@...> 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 <a href="javascript:" target="_blank" gdf-obfuscated-mailto="mD4YoG8HCQAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">rubyonra...@googlegroups.com.
To view this discussion on the web visit <a href="https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com?utm_medium=email&amp;utm_source=footer" target="_blank" rel="nofollow" onmousedown="this.href=&#39;https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com?utm_medium\x3demail\x26utm_source\x3dfooter&#39;;return true;" onclick="this.href=&#39;https://groups.google.com/d/msgid/rubyonrails-talk/24a278c2-d548-424c-adc2-730b687240bb%40googlegroups.com?utm_medium\x3demail\x26utm_source\x3dfooter&#39;;return true;">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?

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/08f14316-ac33-41dc-a9ec-4984a6e13912%40googlegroups.com.