title: React Unexpected token < - babel loader
body: <p>Hi i have problem with <strong>babel-loader</strong> it write me </p>
  
  <p>ERROR in ./src/js/pages/Admin/views/Pages/Register/Register.js
  Module build failed (from ./node_modules/babel-loader/lib/index.js):
  SyntaxError: C:\Projekty\eshop_frontend_template\src\js\pages\Admin\views\Pages\Register\Register.js: Unexpected token (7:6)</p>
  
  <pre><code>&gt;  5 |   render() {
     6 |     return (
  &gt;  7 |       &lt;div className="app flex-row align-items-center"&gt;
       |       ^
     8 |         &lt;Container&gt;
     9 |           &lt;Row className="justify-content-center"&gt;
    10 |             &lt;Col md="6"&gt;
  at Parser.raise (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:3939:15)
  at Parser.unexpected (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5248:16)
  at Parser.parseExprAtom (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:6328:20)
  at Parser.parseExprSubscripts (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5924:21)
  at Parser.parseMaybeUnary (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5903:21)
  at Parser.parseExprOps (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5812:21)
  at Parser.parseMaybeConditional (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5784:21)
  at Parser.parseMaybeAssign (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5731:21)
  at Parser.parseParenAndDistinguishExpression (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:6474:28)
  at Parser.parseExprAtom (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:6284:21)
   @ ./src/js/pages/Admin/views/Pages/index.js 37:39-60
   @ ./src/js/pages/Admin/Admin.js
   @ ./src/index.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js
  
  
     5 |   render() {
     6 |     return (
  &gt;  7 |       &lt;div className="app flex-row align-items-center"&gt;
       |       ^
     8 |         &lt;Container&gt;
    10 |             &lt;Col md="6"&gt;
  </code></pre>
  
  <p>my webpack.config.js</p>
  
  <pre><code>    module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  use: {
                  loader: 'babel-loader',
                  options: {
                      plugins: ['@babel/proposal-class-properties']
                  }
              }
          },
          { test: /\.css$/, loader: "style-loader!css-loader" },
          { test: /\.json$/, loader: "json-loader" },
          { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?        limit=100000' },
          {
              test: /\.scss$/,
              use: [
                  "style-loader", // creates style nodes from JS strings
                  "css-loader", // translates CSS into CommonJS
                  "sass-loader" // compiles Sass to CSS, using Node Sass by default
              ]
          }
      ]
  },
  resolve: {
      extensions: ['*', '.js', '.jsx']
  },
  plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new HtmlWebpackPlugin({
          template: './dist/index.html'
      })
  ],
  </code></pre>
  
  <p>my package.json#babel</p>
  
  <pre><code>"babel": {
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": "commonjs",
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
    },
  </code></pre>
  
  <p>my dependencies</p>
  
  <pre><code>"devDependencies": {
  "@babel/core": "^7.1.0",
  "@babel/preset-env": "^7.1.0",
  "@babel/preset-react": "^7.0.0",
  "babel-loader": "^8.0.2",
  "css-loader": "^1.0.0",
  "react-hot-loader": "^4.3.11",
  "style-loader": "^0.23.0",
  "webpack": "^4.20.1",
  "webpack-cli": "^3.1.1",
  "webpack-dev-server": "^3.1.9"
    },
    "dependencies": {
  "@babel/plugin-proposal-class-properties": "^7.1.0",
  "@babel/plugin-proposal-decorators": "^7.1.0",
  "@babel/polyfill": "^7.0.0",
  "@coreui/coreui": "^2.0.9",
  "@coreui/react": "^2.0.5",
  "axios": "^0.18.0",
  "css-loader": "^1.0.0",
  "file-loader": "^2.0.0",
  "flag-icon-css": "^3.2.0",
  "font-awesome": "^4.7.0",
  "html-webpack-plugin": "^3.2.0",
  "json-loader": "^0.5.7",
  "node-sass": "^4.9.3",
  "react": "^16.5.2",
  "react-dom": "^16.5.2",
  "react-localize-redux": "^3.4.0",
  "react-redux": "^5.0.7",
  "react-router-dom": "^4.3.1",
  "redux": "^4.0.0",
  "redux-localstorage-simple": "^2.1.4",
  "redux-logger": "^3.0.6",
  "redux-promise-middleware": "^5.1.1",
  "redux-thunk": "^2.3.0",
  "sass-loader": "^7.1.0",
  "simple-line-icons": "^2.4.1",
  "style-loader": "^0.23.0",
  "universal-cookie": "^3.0.4"
    }
  </code></pre>
  
  <p>I tried some helps on forums but nothing helped. Can you say me please what i have wrong?</p>
  
  <p>I am using Babel 7 </p>
  
  <p>Thank you :)</p>