CODEWITHSUNDEEP
javascriptreactjsreact-nativebabeljs
Cyberduck
Cyberduck

Reputation: 881

Babel module resolver not working with react-native

My babel module resolver is not working with React-Native (neither does intellij in VScode)

Here, Is my babel config

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          '@assets': './src/assets',
          '@modules': './src/modules',
          '@config': './src/config',
          '@utils': './src/utils',
        },
      },
    ],
  ],
};

And jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
            "@assets": ["./assets"],
            "@modules": ["./modules"],
            "@config": ["./config"],
            "@utils": ["./utils"]
        }
    }
}

I changed import for one of my files and this is the error I get when I executed the build command from Xcode

Error: Error loading assets JSON from Metro. Ensure you've followed all expo-updates installation steps correctly. Unable to resolve module ../../modules/store/components/Filters from src/utils/Router.js:

None of these files exist:

Where I imported the file like this

import Filters from '@modules/store/components/Filters';

Upvotes: 16

Views: 18596

Answers (6)

Moisés Briseño Estrello
Moisés Briseño Estrello

Reputation: 336

You can fix it installing the dev dependencies with:

yarn install --dev 

npm install --dev

I believe than in most of the cases nothing else is needed.

Upvotes: 0

Zara
Zara

Reputation: 1

I had similar issues with babel that I resolved by updating to the node version required by the project and reinstalling everything else: watchman, react-native-cli, node modules and pods.

Upvotes: -1

Dylan Nelly
Dylan Nelly

Reputation: 1

Just add the extensions parameter,

But for the case where the Metro server is enabled, I don't know how to choose between IOS in front or Android in front

{
// http://localhost:8081/foo/bar/baz.bundle?dev=true&platform=ios
extensions: [".js", ".jsx", ".tsx", ".ios.js", ".android.js"],
// http://localhost:8081/foo/bar/baz.bundle?dev=true&platform=android
extensions: [".js", ".jsx", ".tsx", ".android.js", ".ios.js"],
}

Upvotes: 0

Nabeel K
Nabeel K

Reputation: 6128

Try resetting the cache, if above suggested answers don't work

react-native start --reset-cache

This worked for me. For more info see here

Upvotes: 24

rommyarb
rommyarb

Reputation: 479

Change your module-resolver's root to ['./src/']:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src/'], // <-- here ✅
        alias: {
          '@assets': './src/assets',
          '@modules': './src/modules',
          '@config': './src/config',
          '@utils': './src/utils',
        },
      },
    ],
  ],
};

Upvotes: 0

Piotr N.
Piotr N.

Reputation: 55

I had the same problem, I just removed the '@' from my aliases and it seems working fine now.

Here is my babel.config.js

module.exports = function (api) {     ■ File is a CommonJS module; it may be converted to an ES6 module.   
api.cache(true);                                                                                                
return {                                                                                           
  presets: ["babel-preset-expo"],                                                                                                                             
  plugins: [                                                                                                                                                  
    [                                                                                                                                                         
      require.resolve("babel-plugin-module-resolver"),                                                                                                        
      {                                                                                                                                                
        root: ["./src/"],                                                                                                                              
        alias: {                                                                                                                                       
          // define aliases to shorten the import paths                                                                                                
          components: "./src/components",                                                                                                              
          containers: "./src/containers",                                                                                                              
          contexts: "./src/contexts",                                                                                                                  
          interfaces: "./src/interfaces",                                                                                                              
          organizer: "./src/screens/organizer",                                                                                                        
          screens: "./src/screens",                                                                                                                    
        },                                                                                                                                             
        extensions: [".js", ".jsx", ".tsx", ".ios.js", ".android.js"],                                                                                        
      },                                                                                                                                                      
    ],                                                                                                                                                 
  ],                                                                                                                                                   
};

};

Upvotes: 3

Related Questions