title: React / Sails.js Error: Plugin/Preset files are not allowed to export objects, only functions
body: <p>So I´m trying to set up a React/Sails project and I just set the webpack config but its messing with the pluging/preset error.</p>
  
  <p>The versions are correct (above 7.*). I´ve already read a lot of similar issues but none of them helped me.</p>
  
  <p>ERROR in ./assets/src/index.js
  Module build failed (from ./node_modules/babel-loader/lib/index.js):
  Error: Plugin/Preset files are not allowed to export objects, only functions.</p>
  
  <p>Here is the webpack file:</p>
  
  <pre><code>const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    entry: {
      entry: './assets/src/index.js'
    },
    output: {
      path: __dirname + '/.tmp/public',
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          use: 'babel-loader',
          test: /\.js$/,
          exclude: /node_modules/
        },
        {
          use: ['style-loader', 'css-loader'],
          test: /\.css$/
        }
      ]
    },
  
    plugins: [
      new HtmlWebpackPlugin({
    template: 'assets/src/index.html'
      })
    ]
  };
  </code></pre>
  
  <p>And here is the package.json</p>
  
  <pre><code>{
    "name": "my-desk",
    "private": true,
    "version": "0.0.0",
    "description": "a Sails application",
    "keywords": [],
    "dependencies": {
      "@babel/preset-react": "^7.0.0",
      "@sailshq/connect-redis": "^3.2.1",
      "@sailshq/lodash": "^3.10.3",
      "@sailshq/socket.io-redis": "^5.2.0",
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "sails": "^1.2.3",
      "sails-hook-apianalytics": "^2.0.3",
      "sails-hook-organics": "^0.16.0",
      "sails-hook-orm": "^2.1.1",
      "sails-hook-sockets": "^2.0.0"
    },
    "devDependencies": {
      "@babel/cli": "^7.5.0",
      "@babel/preset-env": "^7.5.4",
      "@babel/core": "^7.5.4",
      "babel-loader": "^8.0.6",
      "babel-preset-react": "^6.24.1",
      "eslint": "5.16.0",
      "grunt": "1.0.4",
      "html-webpack-plugin": "^3.2.0",
      "htmlhint": "0.11.0",
      "lesshint": "6.3.6",
      "npm-run-all": "^4.1.5",
      "rimraf": "^2.6.3",
      "sails-hook-grunt": "^4.0.0",
      "webpack": "^4.35.3",
      "webpack-cli": "^3.3.5",
      "webpack-dev-server": "^3.7.2"
    },
  </code></pre>
  
  <p>The .babelrc file</p>
  
  <pre><code> {
      "presets": ["@babel/preset-env", "react"]
   }
  </code></pre>
  
  <p>The index.js (just in case)</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  const App = () =&gt; {
    return (
      &lt;div&gt;
        Hello World!
      &lt;/div&gt;
    );
  };
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>and the index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial- 
  scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;myDesk&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id='root'&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>