How can I get gulp-bro to import files ending with .jsx?

Question

I'm trying to transpile jsx using gulp and gulp-bro, and I'm nearly there except it fails to import components unless I add .jsx to the end of the import. Like this:

import Viewer from './components/viewer/Viewer';

Fails with Error: Cannot find module './components/viewer/Viewer'

While:

import Viewer from './components/viewer/Viewer.jsx';

Works fine!

Of course the tree of imports is a lot more involved than this, so I'd rather avoid renaming everything to .js or explicitly specifying .jsx if I can avoid it.

Here's the relevant section of my gulpfile. It's ignoring the extensions setting.

gulp.task('viewer', function () {
  gulp.src('./app/js/app.jsx')
    .pipe(bro({
        transform: [
          babelify.configure({
            presets: ['env', 'react'],
          })
        ],
        extensions: ['js', 'jsx'],
        debug: true,
    }))
    .pipe(rename('app.js'))
    .pipe(gulp.dest(paths.js))
});

It looks like the extensions must include the "." as in '.js', '.jsx' — Mark, Nov 07 '17 at 13:57
Argh. Yes, that was it, can't believe I missed that... Thanks! Feel free to add it as an answer and I'll accept ;) — Björn Kristinsson, Nov 07 '17 at 14:12

score 0 · Accepted Answer · answered Nov 07 '17 at 17:46

Gulp-bro passes its options to browserify. While browserify's documentation on the extension's option is not great, I did see How to specify browserify extensions in package.json? and Grunt-Browserify extensions flag not working where the the extensions option must include the "."s like

extensions: ['.js', '.jsx'],

How can I get gulp-bro to import files ending with .jsx?

1 Answers1