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?
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.