build issue with browserify and babelify

[Erik Blankinship]

Bumping my head here trying to get react-robot into a bundle of code I can import into different projects. I normally use a gulp task for this. All of my dependencies work with this gulp task except... react-robot. Suggestions?

in my project package.json:

  "dependencies": {
    "lodash": "^4.17.15",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-robot": "^0.2.0",
    "robot3": "^0.2.4"
  },

in my gulp file:

const packageJson = require('./package.json');
const dependencies = Object.keys( (packageJson && packageJson.dependencies) || {});
const production = false;

gulp.task( 'library', function() {

  const distScriptsPath = `dist/scripts/`;

  const browserifyOptions = {
  };

  const babelifyOptions = {
    presets: ["@babel/preset-env"],
    sourceMaps: !production,
    compact: production
  };

  return browserify( browserifyOptions )
  .require( dependencies )
  .transform( babelify, babelifyOptions )
  .bundle()
  .pipe(source('external.bundled.js'))
  .pipe(gulpif(production, buffer()))
  .pipe(gulpif(production, uglify()))
  .pipe(gulp.dest( distScriptsPath ));
});

results in

Error: 
react-robot:1
import { useMemo, useState } from 'react';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

[Matthew Phillips]

I'm not very familiar with these tools but is it possible that babelify is not transpiling your code inside of node_modules/? react-robot doesn't have a commonjs version like a lot of modules do, so that could be the issue.

[Erik Blankinship]

Yep. This fixes it:

gulp.task( 'library', function() {

  const depsResolved = dependencies.map( function( v, i, a ) {
    return resolve.sync( v, { basedir: __dirname } );
  });

  const distScriptsPath = `${distpath}scripts/`;

  const browserifyOptions = {
    entries: depsResolved,
    debug: production
  };

  const babelifyOptions = {
    presets: ["@babel/preset-env"],
    sourceMaps: !production,
    compact: production
  };

  return browserify( browserifyOptions )
  .transform( babelify, babelifyOptions )
  .bundle()
  .pipe(source('external.bundled.js'))
  .pipe(gulpif(production, buffer()))
  .pipe(gulpif(production, uglify()))
  .pipe(gulp.dest( distScriptsPath ));
});