TypeError: undefined is not an object (evaluating 'global.bootstrap = {}')

Hello,

I’m using gulp to process my assets for production.

When I process my js files via babel (both v6 and v7) bootstrap throws the following error on the browser:

TypeError: undefined is not an object (evaluating 'global.bootstrap = {}')

When I remove the following code from gulp, then bootstrap works fine again…

.pipe(babel({
    presets: ['@babel/env']
}))

but since I’m bundling the files, I have few files written in ES6, thus I really need babel.

Currently, as a workaround, I have bootstrap placed in a separated file, but I would prefer to have it bundled.

The issue for some reason is here:

https://github.com/twbs/bootstrap/blob/976aad0059a22ec1251646a1b4a9f3454c7aed64/dist/js/bootstrap.bundle.js#L9

I’m not sure why when bootstrap passed via babel the global.bootstrap is undefined.

Thanks!

[panosru]

@Johann-S Thank you for letting me know that pass Bootstrap through babel isn’t a good idea!

I ended up using gulp-if package and now I pass through babel only the scripts from my “allow” list:

.pipe(gulpif(function (file) {
    // Pass through babel:
    return [
        'my-custom-script'
    ].includes(file.stem);
}, babel({
    presets: ['@babel/env']
})))

[joakimriedel]

@panosru just ran into the same issue. In the original Bootstrap code this is sent in the IIFE as the argument for global. After babel compiles the file, this will be replaced with undefined. As to why, I do not have a clue and will try your solution to exclude Bootstrap in my gulp script. Thanks.