title: Babel (gulp-babel) Uncaught ReferenceError: require is not defined
body: <p>I'm using <code>gulp</code>, <code>gulp-babel</code>, which is causing an error.<br>
  I don't know how I can use module (ES6) because, when I try to import another file into this, it shows me this message:  </p>
  
  <blockquote>
    <p>Uncaught ReferenceError: require is not defined  </p>
  </blockquote>
  
  <p>I know the problem is after code has transpiled, because, I tried linking to code that's not transpiled, and it works perfectly.</p>
  
  <p>These are my files.  </p>
  
  <p><strong>app.js</strong> *(Where I want to use import to get another module...) </p>
  
  <p><em>Note: Using <code>require</code> from CommonJS project, also does not work.</em></p>
  
  <pre><code>import a from "./comun.js"; //This doesn't work
  class Player{
      contructor(){...}
  }
  </code></pre>
  
  <p><strong>comun.js</strong> <em>(Where i want to get a const from)</em></p>
  
  <pre><code>export const a = 1;
  </code></pre>
  
  <p><strong>index.html</strong> <em>(Html file) (File transpiled)</em></p>
  
  <pre><code>&lt;script src="./dist/js/app.js" type="module"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And this is my <strong><em>gulpfile.babel.js</em></strong> (It's working perfectly)</p>
  
  <pre><code>const gulp = require ('gulp');
  const babel = require('gulp-babel');
  function transpileToES5() {
      return  gulp.src('./assets/js/*.js')
      .pipe(babel())
      .pipe(gulp.dest('./dist/js/'));
  }
  
  gulp.task('default', function () {
      return gulp.watch(['./assets/js/*.js'], transpileToES5)
  });
  </code></pre>
  
  <p>And finally. This is my <strong><em>.babelrc</em></strong> file (I tried with commonjs, systemjs, amd... Nothing works )</p>
  
  <pre><code>{
      "presets" : ["@babel/env"],
      "plugins": ["transform-es2015-modules-commonjs"]
  }
  </code></pre>
  
  <p>This is the Error:<br>
  <img src="https://i.stack.imgur.com/rh3Hu.png" alt="SHOW CAPTURE OF THE ERROR ON THE BROWSER">  </p>
  
  <p>This is the line causing the error:<br>
  <img src="https://i.stack.imgur.com/g2ava.png" alt="SHOW CAPTURE OF THE WRONG LINE ON THE BROWSER"></p>