title: Babel Webpack Error: You may need an appropriate loader to handle this file type
body: <p>I am trying to lazy load some React components like so:</p>
  
  <p>node: <code>v10.15.2</code></p>
  
  <pre class="lang-js prettyprint-override"><code>const Library = React.lazy(() =&gt; import('./components/Library'))`
  </code></pre>
  
  <p>My error:</p>
  
  <pre><code>Module parse failed: Unexpected token (51:9)
  You may need an appropriate loader to handle this file type.
  |
  | var Library = React.lazy(function () {
  &gt;   return import('./components/Library');
  | });
  </code></pre>
  
  <p>Webpack Config:</p>
  
  <pre><code>{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      options: {
        presets: ['@babel/env', '@babel/react', '@babel/preset-flow'],
        plugins: [
          '@babel/plugin-transform-runtime',
          '@babel/syntax-dynamic-import',
          '@babel/plugin-proposal-class-properties',
          '@babel/plugin-syntax-throw-expressions',
        ],
      },
      loader: 'babel-loader?cacheDirectory',
    },
  },
  </code></pre>
  
  <p><code>package.json</code></p>
  
  <pre><code>"dependencies": {
      "@babel/runtime": "^7.1.2",
      "axios": "^0.18.0",
      "babel-cli": "^6.26.0",
      "css-modulesify": "^0.28.0",
      "hls.js": "^0.8.9",
      "moment": "^2.20.1",
      "moment-duration-format": "^2.2.1",
      "prop-types": "^15.6.1",
      "qs": "^6.5.1",
      "react": "^16.8.3",
      "react-collapsible": "^2.6.0",
      "react-dom": "^16.8.3",
      "react-fontawesome": "^1.6.1",
      "react-loadable": "^5.3.1",
      "react-scrollspy": "^3.3.5",
      "react-select": "^1.2.1",
      "react-share": "^2.2.0",
      "react-sticky": "^6.0.1",
      "react-stripe-checkout": "^2.6.3",
      "react-stripe-elements": "^2.0.1",
      "react-transition-group": "^2.3.1",
      "redux": "^3.7.2",
      "smooth-scroll": "^12.1.5",
      "video-react": "^0.9.4"
    },
    "devDependencies": {
      "@babel/core": "^7.1.2",
      "@babel/plugin-proposal-class-properties": "^7.3.4",
      "@babel/plugin-syntax-dynamic-import": "^7.2.0",
      "@babel/plugin-syntax-throw-expressions": "^7.0.0",
      "@babel/plugin-transform-runtime": "^7.1.0",
      "@babel/preset-env": "^7.1.0",
      "@babel/preset-flow": "^7.0.0",
      "@babel/preset-react": "^7.0.0",
      "babel-eslint": "^10.0.1",
      "babel-loader": "^8.0.4",
      "browser-sync": "^2.23.6",
      "browser-sync-webpack-plugin": "^2.0.7",
      "css-loader": "^0.28.10",
      "eslint": "^4.17.0",
      "eslint-config-airbnb": "^16.1.0",
      "eslint-plugin-flowtype": "^2.44.0",
      "eslint-plugin-import": "^2.8.0",
      "eslint-plugin-jsx-a11y": "^6.0.3",
      "eslint-plugin-react": "^7.6.1",
      "flow-bin": "^0.68.0",
      "lodash.assign": "^4.2.0",
      "node-sass": "^4.7.2",
      "sass-loader": "^6.0.7",
      "style-loader": "^0.20.3",
      "stylus": "^0.54.5",
      "uglifyjs-webpack-plugin": "^1.2.2",
      "webpack": "^4.1.1",
      "webpack-bundle-analyzer": "^2.11.1",
      "webpack-cli": "^3.1.2"
  </code></pre>
  
  <p>Is there anything blatantly obvious I'm doing wrong here?</p>