title: ReactJS Error: Module Build failed: SyntaxError: Unexpected token '<'
body: <p>My ReactJS code throws an error when I try to compile it. I used ReactJS before but I never ran into this error (see below)</p>
  
  <pre><code>ERROR in ./kapiche/@kapiche_react/teacher/login.jsx
  Module build failed (from ./node_modules/babel-loader/lib/index.js):
  SyntaxError: /mnt/d/src/kapiche/@kapiche_react/teacher/login.jsx: Unexpected token (59.6)
  
    57 |   render() {
    58 |     return (
  &gt; 59 |       &lt;div&gt;
       |       ^
    60 |         Hello world
    61 |       &lt;/div&gt;
    62 |     );
  
          at Parser.raise (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:6420:17)
          at Parser.unexpected (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:7773:16)
          at Parser.parseExprAtom (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8996:20)
          at Parser.parseExprSubscripts (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8556:23)
          at Parser.parseMaybeUnary (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8536:21)
          at Parser.parseExprOps (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8402:23)
          at Parser.parseMaybeConditional (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8375:23)
          at Parser.parseMaybeAssign (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8325:21)
          at Parser.parseParenAndDistinguishExpression (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:9133:28)
          at Parser.parseExprAtom (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8917:21)
          at Parser.parseExprSubscripts (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8556:23)
          at Parser.parseMaybeUnary (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8536:21)
          at Parser.parseExprOps (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8402:23)
          at Parser.parseMaybeConditional (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8375:23)
          at Parser.parseMaybeAssign (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8325:21)
          at Parser.parseExpression (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:8275:23)
          at Parser.parseReturnStatement (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10378:28)
          at Parser.parseStatementContent (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10057:21)
          at Parser.parseStatement (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10009:17)
          at Parser.parseBlockOrModuleBlockBody (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10585:25)
          at Parser.parseBlockBody (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10572:10)
          at Parser.parseBlock (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10556:10)
          at Parser.parseFunctionBody (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:9584:24)
          at Parser.parseFunctionBodyAndFinish (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:9554:10)
          at Parser.parseMethod (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:9508:10)
          at Parser.pushClassMethod (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10987:30)
          at Parser.parseClassMemberWithIsStatic (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10912:12)
          at Parser.parseClassMember (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10851:10)
          at /mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10806:14
          at Parser.withTopicForbiddingContext (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:9884:14)
          at Parser.parseClassBody (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10783:10)
          at Parser.parseClass (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10757:22)
          at Parser.parseStatementContent (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10051:21)
          at Parser.parseStatement (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10009:17)
          at Parser.parseBlockOrModuleBlockBody (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10585:25)
          at Parser.parseBlockBody (/mnt/d/src/kapiche/node_modules/@babel/parser/lib/index.js:10572:10)
  </code></pre>
  
  <p>This is my webpack.config.js where I define my entry and output points.</p>
  
  <pre><code>// create proper string representing path to file
  const path = require('path');
  
  // files to export
  let export_list = [];
  
  // helpful log message for debugging
  console.log('webpack watch starting for the files:\n');
  
  // general files
  const export_dict = {
    'student': ['login'],
    'teacher': ['login']
  };
  
  // loop through all directories and files in export dictionary
  for (let [key, value] of Object.entries(export_dict)) {
    for (let i = 0; i &lt; export_dict[key].length; i++) {
      // helpful log message for debugging
      console.log(`entry:\t/kapiche/@kapiche_react/${key}/${value[i]}.jsx`);
      console.log(`output:\t/kapiche/static/js/${key}/${value[i]}_compiled.js\n`);
      // add object to export list
      export_list.push(
        {
          entry: `./kapiche/@kapiche_react/${key}/${value[i]}.jsx`,
          output: {
            path: path.join(__dirname, `/kapiche/static/js/${key}/`),
            filename:  `${value[i]}_compiled.js`,
          },
          module: {
            rules: [
              {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
              }
            ]
          },
          resolve: {
            extensions: ['*', '.js', '.jsx']
          },
        }
      )
    }
  }
  
  console.log(export_list);
  
  // list of exports
  module.exports = export_list;
  </code></pre>
  
  <p>Here is the ReactJS file I am trying to compile (in jsx)</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class LoginTeacher extends React.Component {
    constructor(props) {
      super(props);
      this.state = { };
    }
  
    componentDidMount() {
  
    }
  
    render() {
      return (
        &lt;div&gt;
          Hello world
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(
    &lt;LoginTeacher/&gt;,
    document.getElementById('login'),
  );
  </code></pre>
  
  <p>And finally, here is my package.json</p>
  
  <pre><code>{
    "name": "kapiche",
    "version": "1.0.0",
    "description": "Promoting classroom communication",
    "main": "webpack.config.js",
    "scripts": {
      "watch": "webpack --watch --mode production",
      "start": "webpack-dev-server --open --hot --mode development",
      "build": "webpack --mode production"
    },
    "repository": {
      "type": "git",
      "url": "git+https://github.com/jbseg/BlueSlide.git"
    },
    "author": "Joshua S, Riley C, Hannah Z, Xiangliang N",
    "license": "MIT",
    "bugs": {
      "url": "https://github.com/jbseg/BlueSlide/issues"
    },
    "homepage": "https://github.com/jbseg/BlueSlide#readme",
    "devDependencies": {
      "@babel/core": "^7.6.4",
      "@babel/preset-env": "^7.6.3",
      "@babel/preset-react": "^7.6.3",
      "babel-loader": "^8.0.6",
      "css-loader": "^3.2.0",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "sass": "^1.23.3",
      "style-loader": "^1.0.0",
      "webpack": "^4.41.2",
      "webpack-cli": "^3.3.10",
      "webpack-dev-server": "^3.9.0"
    },
    "dependencies": {
      "@material-ui/core": "^4.5.2",
      "@material-ui/icons": "^4.5.1",
      "chart.js": "^2.9.2",
      "react": "^16.11.0",
      "react-chartjs-2": "^2.8.0",
      "react-dom": "^16.11.0",
      "react-tabs": "^3.0.0",
      "socket.io": "^2.3.0"
    }
  }
  </code></pre>
  
  <p>Any ideas what might be causing this error?</p>
  
  <p>EDIT: Here is my .babelrc as well</p>
  
  <pre><code>{
      "presets": ["@babel/preset-env", "@babel/preset-react"]
  }
  </code></pre>