CODEWITHSUNDEEP
javascriptgulpbabeljsbrowserifyes6-modules
Lucas Penney
Lucas Penney

Reputation: 2674

Babel 7 not transpiling dependencies in node_modules: 'import' and 'export' may appear only with 'sourceType: module'

I'm trying to use the @iconify-icons package in my project, however it uses es6 modules and my babel configuration refuses to transform them so that browserify can work with it properly. Here's how I'm building with browserify + babel:

const babelConfig = {
    presets: [
        ["@babel/preset-env"],
        ["@babel/preset-react"],
    ],
    ignore: [],
};

gulp.task('browserify', (done) => {
    return gulp.src('./resources/reactapp/app.js')
        .pipe(bro({
            transform: [
                babelify.configure(babelConfig),
            ]
        }))
});

However when I try to import modules in this case from @iconify-icons, I get the following error from browserify:

/node_modules/@iconify-icons/mdi-light/upload.js:6
export default data;
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Which to me says Babel is not properly transforming the file before it sends it to browserify (which can only handle es5 syntax). The suggested solution for babel 6 is to use global: true in babel config, but the option doesn't exist in babel 7. My guess is babel is ignoring node_modules, even though I've set ignore to an empty list.

Upvotes: 1

Views: 537

Answers (1)

Lucas Penney
Lucas Penney

Reputation: 2674

In case some poor soul also finds themselves here: global is a property passed as a transform property.

gulp.task('browserify', (done) => {
    return gulp.src('./resources/reactapp/app.js')
        .pipe(bro({
            transform: [
                [babelify.configure(babelConfig), {global:true}]
            ]
        }))
});

Upvotes: 2

Related Questions