CODEWITHSUNDEEP
androidiostypescriptreact-nativeexpo
Jasper Blues
Jasper Blues

Reputation: 28776

Metro bundler errors when using module-resolver

I've created a project using expo typescript template. Running on iOS and Android. No web.

I then set up path alias in tsconfig.json as follows: 

"paths": {
  "@models/*": ["./src/models/*"],
  "@navigation/*": ["./src/navigation/*"],
  "@services/*": ["./src/services/*"],
  "@components/*": ["./tsx/components/*"],
  "@screens/*": ["./tsx/screens/*"],
  "@assets/*": ["./assets/*"]
}

Correspondingly, I configured babel.config.js as follows: 

plugins: [
        [
            'module-resolver',
            {
                root: ['./'],
                alias: {
                    '@models': path.resolve(path.dirname('.'), 'src/models'),
                    '@navigation': path.resolve(path.dirname('.'), 'src/navigation'),
                    '@services': path.resolve(path.dirname('.'), 'src/services'),
                    '@screens': path.resolve(path.dirname('.'), 'tsx/screens'),
                    '@components': path.resolve(path.dirname('.'), 'tsx/components'),
                    '@assets': path.resolve(path.dirname('.'), 'assets'),
                }
            }
        ]
    ]

The above configuration works. App is bundled and runs fine. However the following non-critical errors are emitted during bundle: 

transform[stderr]: Could not resolve "/Users/jblues/mobbiz/LOSMobileApp/src/navigation/AppNavigator" in file /Users/jblues/LOSMobileApp/tsx/App.tsx.
transform[stderr]: Could not resolve "/Users/jblues/LOSMobileApp/tsx/components/BottomTabNavigator" in file /Users/jblues/LOSMobileApp/src/navigation/AppNavigator.ts.
transform[stderr]: Could not resolve "/Users/jblues/mobbiz/LOSMobileApp/tsx/screens/Login" in file /Users/jblues/LOSMobileApp/src/navigation/AppNavigator.ts.

. . and so on. Is there something that I can add to my config to prevent these errors?

Upvotes: 5

Views: 3073

Answers (1)

Nishant Patel
Nishant Patel

Reputation: 1406

You are missing the extensions configuration, for example: 

extensions: ['.js', '.ts', '.ios.js', '.ios.ts', '.android.js', '.android.ts', '.json'],

This is a babel.config.js file which i have and it works without error. It might be useful for your reference.

const MODULE_RESOLVER = [
  'module-resolver',
  {
    extensions: ['.js', '.ios.js', '.android.js', '.json'],
    alias: {
      '@Components': './App/Components',
      '@Navigation': './App/Navigation',
      '@Constants': './App/Constants',
      '@Features': './App/Features',
      '@Services': './App/Services',
      '@Fixtures': './App/Fixtures',
      '@Themes': './App/Themes',
      '@Config': './App/Config',
      '@Sagas': './App/Sagas',
      '@Redux': './App/Redux',
      '@Types': './App/Types',
      '@I18n': './App/I18n',
      '@Lib': './App/Lib',
    },
  },
];
module.exports = {
  plugins: [MODULE_RESOLVER],
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: ['ignite-ignore-reactotron', MODULE_RESOLVER],
    },
  },
};

Upvotes: 9

Related Questions