Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using gulp-babel gives Uncaught ReferenceError: require is not defined

Tags:

gulp

reactjs

I am using the following gulp.js file

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('bundle', bundle);

function bundle () {
     gulp.src('./src/*.jsx')
    .pipe(babel())
    .pipe(gulp.dest('./dist'));
}

gulp.task('build', ['bundle']);

Before transpile "main.jsx" content

import React from 'react';

After Transpile, "js" files generated in the dist folder, has require('')

var _react = require('react');

while requesting for the page index.html

 <body>

    <div id="app" ></div>
    <script src="main.js"></script>

</body>

Uncaught ReferenceError: require is not defined is shown in the console.

I know there is something wrong in the build task, but i am unable to figure out.

like image 465
deepak Avatar asked Jun 23 '16 18:06

deepak


1 Answers

In the browser, you can not use require API, so you need to somehow bundle your code, you have few options:

  • Browserify
  • Webpack
  • Rollup

These module bundlers allow you to specify an 'entry' point and then bundle all the required modules together in a single file.

Similar questions that answer this problem: Gulp + babelify + browserify issue

like image 144
weisk Avatar answered Nov 09 '22 04:11

weisk