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

Frederik Winkelsdorf picture Frederik Winkelsdorf · Apr 3, 2019 · Viewed 7.1k times · Source

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

Frederik Winkelsdorf picture Frederik Winkelsdorf · Apr 3, 2019

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'
        ]
    }
};