Expo react native web gives error import scoped imports

Question

I have a project which is react-native-web, and the expo is configured on it. The stating script has scoped imports @. I see that metro.config.js has aliases for those imports for which expo web is complaining, here is metro.config.js :

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

const path = require("path")
const extraNodeModules = {
  "@modules": path.resolve(__dirname, "modules"),
  "@screens": path.resolve(__dirname, "screens"),
  "@options": path.resolve(__dirname, "options")
}
const watchFolders = [
  path.resolve(__dirname, "modules"),
  path.resolve(__dirname, "screens"),
  path.resolve(__dirname, "options")
]
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  },
  resolver: {
    extraNodeModules: new Proxy(extraNodeModules, {
      get: (target, name) =>
        //redirects dependencies referenced from extraNodeModules to local node_modules
        name in target
          ? target[name]
          : path.join(process.cwd(), "node_modules", name)
    })
  },
  watchFolders,
  resetCache: true
}

I did some research and I modified my babel.config.js to this:

module.exports = {
  presets: ['babel-preset-expo', 'module:metro-react-native-babel-preset'],
  plugins: [
    ["module:react-native-dotenv", {
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": false,
      "allowUndefined": true
    },
    ],
    "import-glob",
    [
      'module-resolver',
      {
        alias: {
          'modules': './modules',
        },
      }
    ]
  ]
};

I know that the above babel is only for modules, it is just for example. I am getting this on running expo start then w for web:

./App.js:13
Module not found: Can't resolve '@modules'
  11 | 
  12 | import { screens } from "@screens";
> 13 | import { hooks, slices, navigators, initialRoute } from "@modules";
  14 | import { connectors } from "@store";
  15 | 
  16 | const Stack = createStackNavigator()
./App.js:18
Module not found: Can't resolve '@options'
  16 | const Stack = createStackNavigator()
  17 | 
> 18 | import { GlobalOptionsContext, OptionsContext, getOptions } from "@options"
  19 | 
  20 | const getNavigation = (modules, screens, initialRoute) => {
  21 |   const Navigation = () => {
./App.js:12
Module not found: Can't resolve '@screens'
  10 | } from "@reduxjs/toolkit"
  11 | 
> 12 | import { screens } from "@screens";
  13 | import { hooks, slices, navigators, initialRoute } from "@modules";
  14 | import { connectors } from "@store";
  15 | 
./App.js:14
Module not found: Can't resolve '@store'
  12 | import { screens } from "@screens";
  13 | import { hooks, slices, navigators, initialRoute } from "@modules";
> 14 | import { connectors } from "@store";
  15 | 
  16 | const Stack = createStackNavigator()

Any clues as to how could I make this work?

Answer 1

Actually, you have implemented the absolute-path configs with some mistakes:

• metro bundler configuration is not related to the absolute-path feature, remove whatever you added to the metro.config.js file

• if you are using TypeScript you must modify tsconfig.json:

  {
    "compilerOptions": {
      "baseUrl": "./app" /* Base directory to resolve non-absolute module names. */,
      "paths": {
        "@screens": ["./screens"]
      }
    },
  

• inside babel.config.json you added the config wrongly, maybe you forgot to add the @ and the root key in the config file, follow below example:

  module.exports = {
    plugins: [
      [
        'module-resolver',
        {
          root: ['./app'],
          alias: {
            '@screens': './app/screens',
          },
          extensions: [
            '.ios.ts',
            '.ios.tsx',
            '.android.ts',
            '.android.tsx',
            '.ts',
            '.tsx',
            '.js',
            '.jsx',
            '.json',
          ],
        },
      ],
    ],
  };
  

Hint: please consider, my application root directory is app. all TypeScript/JavaScript codes are in the app folder.