Babelify imports in a reactJS application does not replace let declarations to var

Question

I built a small ReactJS application that runs in the browser, i am having issues with older browser versions (especially on iOS devices), the application is built with node and browserify/babelify

I have the following gulpfile setup:

gulp.task('build', function () { return browserify({entries: './src/app.jsx', extensions: ['.jsx'], debug: true}) .transform(babelify) .bundle() .pipe(source('app.js')) .pipe(buffer()) .pipe(minify()) .pipe(gulp.dest('public/layout/lib')) })

with the following config:

{ "presets": ["env"], "plugins": ["transform-react-jsx"], }

one of my react components imports a module like so:

import ethereum_address from 'ethereum-address'

the code works but for some reason the bablified bundle still has use strict and some let declarations that come from that specific module.

is there anything i can do to force the babelify to actually replace those declarations as needed so this code will work on older browsers?

Answer 1

After digging around and seeing what Elin Gersin found i now understand the problem.

it seems that when transforming it is required to specify the global property so the transformer knows to run on all imports and not just the react components.

the resulting gulp task looks like this:

gulp.task('build', ['sass'], function () { return browserify({entries: './src/app.jsx', debug: true}) .transform(babelify, { global: true, only: /^(?:.*\/node_modules\/ethereum-address\/|(?!.*\/node_modules\/)).*$/ }) .bundle() .pipe(source('app.js')) .pipe(buffer()) .pipe(minify()) .pipe(gulp.dest('public/layout/lib')) })