嘿,伙计们,所以我很难在react native中设置绝对路径,我使用了babel-plugin-module-resolver,并将tsconfig.json
和'babel.config.js'设置为慢下来,VS代码没有给出任何关于路径的错误,但Metro服务器抛出这样的错误
BUNDLE ./index.js
error: Error: Unable to resolve module @pages/pokemons/pokemons from D:\Work And Stydy Of IT\ReactNative\RTKTS\src\App.tsx: @pages/pokemons/pokemons could not be found within the project or in these directories:
node_modules
> 1 | import Pokemons from '@pages/pokemons/pokemons';
| ^
2 | import React from 'react';
3 |
4 | function App(): JSX.Element {
at ModuleResolver.resolveDependency (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
at DependencyGraph.resolveDependency (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\node-haste\DependencyGraph.js:277:43)
at Object.resolve (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\lib\transformHelpers.js:169:21)
at Graph._resolveDependencies (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:473:35)
at Graph._processModule (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:261:38)
at async Graph._addDependency (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:372:20)
at async Promise.all (index 2)
at async Graph._processModule (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:322:5)
at async Graph._traverseDependenciesForSingleFile (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:249:5)
at async Promise.all (index 0)
//tsconfig.json
{
"extends": "@tsconfig/react-native/tsconfig.json",
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@app": [
"app/index"
],
"@app/*": [
"app/*"
],
"@services": [
"services/index"
],
"@services/*": [
"services/*"
],
"@pages": [
"pages/index"
],
"@pages/*": [
"pages/*"
],
}
},
"include": [
"src/**/*",
]
}
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
alias: {
'@app': ['app/index'],
'@app/*': ['app/*'],
'@services': ['services/index'],
'@services/*': ['services/*'],
'@pages': ['pages/index'],
'@pages/*': ['pages/*'],
underscore: 'lodash',
},
},
],
],
};
到目前为止我尝试的步骤:
1.删除node_modules
和yarn.lock
文件并重新安装软件包。
- yarn start --reset-cache
1.删除安装在模拟器中的旧APK。
1.再次安装一切。
在发布这篇文章之前,我尝试了很多在谷歌上可以找到的答案,之后,我发布了
1条答案
按热度按时间5ktev3wc1#
我认为TypeScript配置文件和
babel.config.js
文件不需要index
路由名,在我的例子中,两个配置都像下面的例子:这些配置对我很有效。