title: What is the difference between export function and module.exports?
body: <p>I have a Javascript file <code>utils.js</code> which contains some utility functions. Here is an example:</p>
  
  <pre><code>export function RemoveHTML(Str) {
      return Str.replace(/&lt;[^&gt;]*(?:&gt;|$)/gi,'');
  }
  </code></pre>
  
  <p>I can use these functions by importing the <code>utils.js</code> file like such:</p>
  
  <pre><code>import {RemoveHTML} from '../js/utils.js';
  </code></pre>
  
  <p>I also have a <code>model.js</code> file for some data queries like this (pseudo-code for brevity):</p>
  
  <pre><code>async function getStuff() {
      await DBConnection.connect();
      return results
  }
  
  module.exports = {
    getStuff
  }
  </code></pre>
  
  <p>For 'consistency' I thought I'd change <code>model.js</code> to just this:</p>
  
  <pre><code>export async function getStuff() {
      await DBConnection.connect();
      return results
  }
  </code></pre>
  
  <p>If I do that then I get an app crash error stating:</p>
  
  <blockquote>
    <p>SyntaxError: Unexpected token 'export'</p>
  </blockquote>
  
  <p>What is the difference between exporting a function using <code>export function()</code> and <code>module.exports</code>?</p>
  
  <p>UPDATE:</p>
  
  <p>I am using <code>Babel</code> in <code>Webpack</code> like below so why would I get an error?:</p>
  
  <pre><code>{
        test: /\.js$/,
          include: [ srcPath ],
        exclude: ['/node_modules/'],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-env"]  //Preset used for env setup
          }
        }
      },
  </code></pre>