Gatsby: Modifying js babel loader

[baseten]

I'd like to modify the JS babel loader, so that I can tweak the excludes / includes and run the loader against some of my node_modules - I'm using some ES6 modules which allow this and will allow me to import only required parts of a library instead of whole bundled files.

I understand how to use modifyWebpackConfig in order to do this, but ideally I'd like to use Gatsby's own babelConfig generator rather than having to reproduce this. The trouble is this relies on the program variable which doesn't seem to be accessible within gatsby-node.js. Is this possible currently? Or would it be better to add some kind of configuration to allow tweaking of the include + exclude of the babel-loader?

[baseten]

On looking further into this, I can provide the necessary program properties manually. This seems to be nearly what I'm after, but the exclude seems to be ignored, am I doing anything obviously wrong? That debugger is never hit at all.

const generateBabelConfig = require( 'gatsby/dist/utils/babel-config' );

...

exports.modifyWebpackConfig = ( { config, stage } ) => {
    const program = {
        directory: __dirname,
        browserslist: [ '> 1%', 'last 2 versions', 'IE >= 9' ]
    };

    generateBabelConfig( program, stage )
        .then( babelConfig => {
            config
                .removeLoader( 'js' )
                .loader( 'js', {
                    test: /\.jsx?$/,
                    exclude: ( modulePath ) => {
                        debugger;

                        return /node_modules/.test( modulePath ) &&
                            !/node_modules\/(swiper|dom7)/.test( modulePath );
                    },
                    loader: 'babel',
                    query: babelConfig
                } );
        } );
};

[baseten]

Forgot to return the promise! This is working now, hopefully someone else will find it useful:

const generateBabelConfig = require( 'gatsby/dist/utils/babel-config' );

...

exports.modifyWebpackConfig = ( { config, stage } ) => {
    const program = {
        directory: __dirname,
        browserslist: [ '> 1%', 'last 2 versions', 'IE >= 9' ]
    };

    return generateBabelConfig( program, stage )
        .then( babelConfig => {
            config
                .removeLoader( 'js' )
                .loader( 'js', {
                    test: /\.jsx?$/,
                    exclude: ( modulePath ) => {
                        return /node_modules/.test( modulePath ) &&
                            !/node_modules\/(swiper|dom7)/.test( modulePath );
                    },
                    loader: 'babel',
                    query: babelConfig
                } );
        } );
};

[calcsam]

Glad you figured it out! This looks like a great example -- could you add it to the docs?

https://www.gatsbyjs.org/docs/add-custom-webpack-config/

[jquense]

you can edit the parts of the babel loader directly without needing to generate an entire new query here

[bytheway875]

@jquense Due to a bug introducd in gatsby 1.9.162, you actually cannot override the exclude on the js loader to load anything from node_modules because it merges your custom excludes to an array that excludes all of node_modules. Can confirm that this implementation works to resolve this issue, but it is kind of nasty.