title: ReactJS: unexpected token '<'
body: <p>Hello I tried to search in other questions but none of mentioned solutions I tried did not work for me.</p>
  
  <p>When using command:</p>
  
  <blockquote>
    <p>npm start </p>
  </blockquote>
  
  <p>I have an error: </p>
  
  <blockquote>
    <p>ERROR in ./src/index.js
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    SyntaxError: D:/Kodilla/Projekty/webpack-to-do-app/src/index.js: Unexpected > token (6:4)
    <code>
     5 | ReactDOM.render(
     6 |     &lt;App /&gt;,
       |     ^
     7 |     document.getElementById('app')
     8 | );</code></p>
  </blockquote>
  
  <p>Defined command in package.json:</p>
  
  <pre><code>"scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "webpack"
    },
  </code></pre>
  
  <p>index.js file:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './containers/App';
  
  ReactDOM.render(
      &lt;App /&gt;,
      document.getElementById('app')
  );
  </code></pre>
  
  <p>App.js file:</p>
  
  <pre><code>import React from 'react';
  import uuid from 'uuid';
  import style from './App.css';
  
  class App extends React.Component {
      constructor(props){
          super(props);
          this.state = {
              data: []
          };
      }
      addTodo(val){
          const todo = {
              text: val,
              id: uuid.v4(),
          };
          const data = [...this.state.data, todo];
          this.setState({data});
      }
      removeTodo(id) {
          const remainder = this.state.data.filter(todo =&gt; todo.id !== id);
          this.setState({data: remainder});
      }
      render() {
          return (
              &lt;div className={style.TodoApp}&gt;
                  Tutaj pojawią się komponenty naszej aplikacji.
              &lt;/div&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>webpack.config.js file:</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
      entry: './src/index.js',
          output: {
          path: path.resolve(__dirname, 'build'),
          filename: 'app.bundle.js'
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  loader: "babel-loader"
              },
              {
                  test: /\.css$/,
                  use: [
                      { loader: 'style-loader'},
                      {
                          loader: 'css-loader',
                          options: {
                              modules: true
                          }
                      }
                  ]
              }
          ]
      }
  };
  </code></pre>
  
  <p>.babelrc file:</p>
  
  <pre><code>{
      "presets": [
          ["env", "react"]
      ]
  }
  </code></pre>
  
  <p><a href="https://github.com/galdranorn/webpack-to-do-app/tree/loaders" rel="noreferrer">Link to repository</a></p>
  
  <p><strong>Edit:</strong> 
  I tried the solution from post you suggest I duplicate but copied 1:1 did not work for me. I changed my webpack config to:</p>
  
  <pre><code>module: {
      loaders: [...
        {
        test: /\.(js|jsx)?$/,
          loader: 'babel-loader',
          query: {
             presets: ['es2015', 'react']
          }
      }]
    },
  </code></pre>
  
  <p>and problem still occurrs. I think I may be doing something wrong in other place than in mentioned example.</p>
  
  <p><strong>Edit 2:</strong></p>
  
  <ol>
  <li>I use babel-core@6.26.3 and babel-loader@7.1.5 because these are requirement of the project. </li>
  <li>React and react-dom dependencies installed. </li>
  <li>Presets: react. env, es2015, stage-0 installed by
  
  <blockquote>
    <p>npm install babel-preset-... --save-dev. </p>
  </blockquote></li>
  <li>First suggested .babelrc config done:
  
  <blockquote>
    <p>"presets": ["react", "es2015", "stage-0"]</p>
  </blockquote></li>
  <li>Error occurrs: 
  
  <blockquote>
    <p>Couldn't find preset "@babel/preset-env" relative to directory
    "...webpack-to-do-app\node_modules\css-loader"</p>
  </blockquote></li>
  </ol>
  
  <p>What am I still doing wrong?</p>
  
  <p><strong>Problem was solved.</strong> </p>
  
  <p>Things that helped:
  1. Update presets from babel-env, babel-react to @babel/preset-env and @babel/preset-react. @babel-core was installed but babel-core stayed on place. Final set:</p>
  
  <pre><code>"devDependencies": {
      "@babel/core": "^7.2.2",
      "@babel/preset-env": "^7.2.3",
      "@babel/preset-react": "^7.0.0",
      "babel": "^6.23.0",
      "babel-core": "^6.26.3",
      "babel-loader": "^8.0.4",
      "css-loader": "^2.1.0",
      "react": "^16.7.0",
      "react-dom": "^16.7.0",
      "style-loader": "^0.23.1",
      "webpack": "^4.28.2",
      "webpack-cli": "^3.1.2"
    },
  </code></pre>
  
  <p>2. Uninstall and install babel-loader which caused problem with requiring wrong version of babel itself.
  @Alireza your suggestion was partially right. Thanks for helping.</p>