How to append extension in metro.config.js for Metro Bundler?

Question

I'm trying to bundle markdown files without creating much overhead (i.e. not adding them manually to the asset bundles in Xcode and Android Studio, not using 3rd party dependencies).

My idea was to allow require() to include them by adjusting the metro bundler settings in metro.config.js:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false,
            },
        }),
    },
    resolver: {
        assetExts: [`md`] // < include md
    }
};

Sadly metro bundler replaces the array of given defaults with what's set here.

I don't want to explicitly repeat the default asset extension list which lists about 20+ file extensions, especially since I want to stick to the defaults otherwise. See: https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js.

Appending to the array does not work, too.

Using RN 0.59.3.

Anything I'm missing?

Answer 1

Found the answer on how to include the defaults here: https://stackoverflow.com/a/55118654/844907.

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

// get defaults assetExts array
const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts;

module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false,
            },
        }),
    },
    resolver: {
        assetExts: [
            ...defaultAssetExts, // <- array spreading defaults
            'md'
        ]
    }
};

Answer 2

Other way you could do this is use the same syntax as react-native-svg-transformer

1. Make metro.config.js asynchronous
2. call the getDefaultConfig
3. Pull off the assetExts key

Example

const { getDefaultConfig } = require('metro-config')

module.exports = (async () => {
    const {
        resolver: { assetExts },
    } = await getDefaultConfig()
    return {
        transformer: {
            getTransformOptions: async () => ({
                transform: {
                    experimentalImportSupport: false,
                    inlineRequires: false,
                },
            }),
        },
        resolver: {
            assetExts: [...assetExts, 'md'],
        },
    }
})()