CODEWITHSUNDEEP
reactjssyntax-errorjsxbabeljs
NoobEditor
NoobEditor

Reputation: 15891

Unexpected token when using multiple punctuations

Learning react from a tutorial, I am trying to play around with text and CSS, but whenever i add multiple punctuations (..... / ,,,,,, etc) i am getting error as mentioned below.

There is no clear question i am able to form on this to search SO, any pointers to what is wrong in config / code is helpful! Thanks

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (

         <div>
            <Header/>
            <Footer/>
         </div>
      );
   }
}


class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class Footer extends React.Component{
    render(){
        return(
            {
                // notice - no div inside render, so its not mandatory here bt is in App
            }
            <h2> yoo......this is a damn footerrrrr </h2>
        );
    }
}

export default App;

webpack.config.js

var config = {
   entry: './main.js',
   output: {
      path:'/',
      filename: 'index.js',
   },
   devServer: {
      inline: true,
      port: 8081
   },
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}
module.exports = config;

.babelrc

{
  presets:['es2015','react']
}

console error

webpack: Compiling...
Hash: 6d5c2bbc97798b745cec
Version: webpack 3.8.1
Time: 23ms
 1 asset
  [23] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [59] ./App.jsx 828 bytes {0} [built] [failed] [1 error]
    + 58 hidden modules

ERROR in ./App.jsx
Module build failed: SyntaxError: Unexpected token, expected , (61:20)

  59 |                 // notice - no div inside render, so its not mandatory here bt is in App
  60 |             }
> 61 |             <h2> yoo......this is a damn footerrrrr </h2>
     |                     ^
  62 |         );
  63 |     }
  64 | }

 @ ./main.js 11:11-31
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./main.js
webpack: Failed to compile.

Upvotes: 1

Views: 67

Answers (1)

klugjo
klugjo

Reputation: 20885

You render function needs to return a single element:

render(){
    return(
        <div>Your content here</div>
    );
}

The following is not allowed

render(){
    return(
        <div>Your content here</div>
        <h2>Second element not allowed</h2>
    );
}

Upvotes: 2

Related Questions