Babel-plugin-module-resolver: It doesn't resolve paths to files

[alanreidt]

I'm trying to use the plugin for css, graphql file mocks in order to run nodejs on tests.

It seems it should work as it specified in the description:

It also allows you to setup a custom alias for directories, specific files, or even other npm modules.

Nevertheless, what I'm getting is that actual file path is preserved.

My configuration:

require('@babel/register')({
    extensions: ['.ts', '.tsx', '.jsx', '.js'],
    plugins: [
        [
            'module-resolver',
            {
                root: ['./src', 'node_modules'],
                alias: {
                    app: './app',
                    common: './common',
                    src: './src',
                    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|graphql)$':
                        './src/__mocks__/fileMock.ts',
                    '\\.(css|scss)$': './src/__mocks__/styleMock.ts'
                },
            },
        ],
    ],
});

[OnkelTem]

Have you found a solution?

[OnkelTem]

For me it doesn't work in a simplest use case.

module.exports = {
  presets: [['@babel/preset-env'], ['@babel/preset-react'], ['@babel/preset-typescript']],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
      },
    ],
    '@babel/plugin-proposal-class-properties',
  ],
};

This doesn't rewrite paths like common/types relative to ./src.
Any ideas?

[OnkelTem]

Ok, it should be instead:

module.exports = {
  presets: [['@babel/preset-env'], ['@babel/preset-react'], ['@babel/preset-typescript']],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ts', '.tsx'],
      },
    ],
    '@babel/plugin-proposal-class-properties',
  ],
};

Note the extension key which for some strange reason is mandatory.

Kudos to @jb from SpeakJS discord community for the solution.