title: React: You may need an appropriate loader to handle this file type
body: <p>I am a newbie when it comes to react and webpack4 and doesn't have much experience with Javascript either.</p>
  
  <p>I get the follwing error when I run <code>npm run dev</code> (see package.json further down):</p>
  
  <pre><code>ERROR in ./project/frontend/src/components/App.js 6:2
  Module parse failed: Unexpected token (6:2)
  You may need an appropriate loader to handle this file type.
  | import Table from "./Table";
  | const App = () =&gt; (
  &gt;   &lt;DataProvider endpoint="api/lead/" render={data =&gt; &lt;Table data={data} /&gt;} /&gt;
  | );
  | const wrapper = document.getElementById("app");
   @ ./project/frontend/src/index.js 1:0-35
  </code></pre>
  
  <p>Package.json looks like this:</p>
  
  <pre><code>{
    "name": "django-drf-react-quickstart",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "dev": "webpack --mode development ./project/frontend/src/index.js --output ./project/frontend/static/frontend/main.js",
      "build": "webpack --mode production ./project/frontend/src/index.js --output ./project/frontend/static/frontend/main.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "@babel/core": "^7.3.3",
      "@babel/preset-env": "^7.3.1",
      "@babel/preset-react": "^7.0.0",
      "babel-loader": "^8.0.5",
      "babel-plugin-transform-class-properties": "^6.24.1",
      "prop-types": "^15.7.2",
      "react": "^16.8.2",
      "react-dom": "^16.8.2",
      "weak-key": "^1.0.1",
      "webpack": "^4.29.4",
      "webpack-cli": "^3.2.3"
    }
  }
  </code></pre>
  
  <p>.babelrc:</p>
  
  <pre><code>{
      "presets": [
          "@babel/preset-env", "@babel/preset-react"
      ],
      "plugins": [
          "transform-class-properties"
      ]
  }
  </code></pre>
  
  <p>I'm following this tutorial:
  <a href="https://www.valentinog.com/blog/tutorial-api-django-rest-react/#Django_REST_with_React_requirements" rel="nofollow noreferrer">https://www.valentinog.com/blog/tutorial-api-django-rest-react/#Django_REST_with_React_requirements</a>.</p>
  
  <p>EDIT:
  My webpack.config.js:</p>
  
  <pre><code>module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        }
      ]
    }
  };
  </code></pre>
  
  <p>App.js:</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import DataProvider from "./DataProvider";
  import Table from "./Table";
  const App = () =&gt; (
    &lt;DataProvider endpoint="api/lead/" render={data =&gt; &lt;Table data={data} /&gt;} /&gt;
  );
  const wrapper = document.getElementById("app");
  wrapper ? ReactDOM.render(&lt;App /&gt;, wrapper) : null;
  </code></pre>
  
  <p>SOLUTION:
  Now it works. I played around with some  @Reema Parakh's suggstions in the comments and got new error, so pressed CRTL-Z until everything was back to normal, and now it works. I don't now why.</p>