Expo 反应原生 web 给出错误导入范围导入

Question

. Answers to this question are eligible for a +100 reputation bounty. Maverick is looking for an .

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.