[英]React Native (Typescript) Absolute path unable to resolve module
[英]React native Typescript path alias unable to resolve module
所以基本上,我使用 RN 主页中的命令行使用 Typescript 创建了我的 React Native: npx react-native init MyApp --template react-native-template-typescript
之后,我运行该项目并成功构建。 但是,当我添加路径别名以导入我的文件时,它抛出了一个错误: Unable to resolve module #folder/file from... could not be found within the project or in these directories: node_modules
我已经在谷歌上关注了一些教程和错误解决,但我没有遇到运气。
这是我的.babelrc
文件(我试图将文件从 babel.config.js 更改为 .babelrc,正如一些解析器所说,但它仍然没有用)
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
[
"module-resolver",
{
"root": ["./src"],
"extensions": [
".js",
".jsx",
".ts",
".tsx",
".android.js",
".android.tsx",
".ios.js",
".ios.tsx"
],
"alias": {
"#src/*": [
"./src/*"
],
"#configs/*": [
"./src/config/*"
],
"#actions/*": [
"./src/redux/actions/*"
],
"#reducers/*": [
"./src/redux/reducers/*"
],
"#store/*": [
"./src/redux/store/*"
]
}
}
]
]
}
tsconfig.json
{
"compilerOptions": {
/* Basic Options */
"target": "esnext",
"module": "commonjs",
"lib": [
"ES2017",
"DOM",
"ES2015",
"ES2015.Promise"
],
"allowJs": true,
"jsx": "react-native",
"noEmit": true,
"incremental": true,
"importHelpers": true,
"isolatedModules": true,
"strict": true,
"moduleResolution": "node",
"baseUrl": ".",
"paths": {
"#src/*": [
"src/*"
],
"#configs/*": [
"src/config/*"
],
"#actions/*": [
"src/redux/actions/*"
],
"#reducers/*": [
"src/redux/reducers/*"
],
"#store/*": [
"src/redux/store/*"
]
},
"types": ["jest"],
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": false,
"resolveJsonModule": true
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
我的文件夹和文件结构
├───assets
├───components
├───config
│ constants.ts
│
└───redux
├───actions
│ index.ts
│ stateActions.ts
│
├───reducers
│ index.ts
│ stateReducer.ts
│
└───store
index.ts
真的很期待收到你们的答复。 太感谢了
P/s:如果你不介意的话,请看看我的仓库: https://github.com/NotJackieTruong/rn_test_typescript
要完成这项工作,只需将package.json
文件添加到您要访问的每个目录中,其中包含一个属性name
。 例如:
├───assets
└───components
└───package.json
package.json
内容:
{
"name": "components"
}
然后你可以像这样导入:
import SomeComponent from 'components/SomeComponent';
还有一篇很好的文章描述了它是如何工作的。
将此添加到您的tsconfig.json
"include": ["./src/**/*"]
然后重新启动您的 TypeScript 服务器
Cmd+Shift P
然后选择TypeScript: Restart TS server
tsconfig.json
"baseUrl": ".",
"paths": {
// this is for src directory
"@*": ["src/*"],
"@configs/*": ["src/config/*"
],
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module-resolver",
{
alias: {
"@config": "./src/config",
....
}
}
]
]
};
};
}
在 tsconfig.json 中
{
...
"compilerOptions":{
...
"baseUrl":"."
"paths":{
"@folder": "src/folder" <--assuming app logic is in src/
}
}
}
在 babel.config.js 中
module.exports = {
...
plugins: [
["module-resolver",{
"alias":{
"@folder": "./src/folder",
}
}]
],
};
从模拟器/设备卸载应用程序
重启 metro 服务器yarn start --reset-cache
构建应用yarn run android/ios
对于那些仍然坚持使用所有解决方案的问题的人,您只需确保以下几点:-
npm install --save-dev babel-plugin-module-resolver
要么
yarn add --dev babel-plugin-module-resolver
babel.config.js 或 .babelrc
确保这是在 babel 中开发而不是生产<<<<<<<<<<<<< VIP
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
env: {
development: { // <<< make sure this is development not production
plugins: [
'react-native-paper/babel',
[
'module-resolver',
{
root: ['./src'],
extensions: [
'.js',
'.jsx',
'.ts',
'.tsx',
'.android.js',
'.android.tsx',
'.ios.js',
'.ios.tsx',
],
alias: {
'@hooks': ['./src/hooks'],
'@familyway': ['./src'],
'@assets': ['./src/Assets'],
'@components': ['./src/Components'],
'@constants': ['./src/Constants'],
'@helpers': ['./src/helpers'],
'@onboarding': ['./src/onBoarding'],
'@redux': ['./src/redux'],
'@screens': ['./src/Screens'],
'@lib': ['./src/lib'],
'@containers': ['./src/containers'],
},
},
],
],
},
},
};
现在可以使用 tsconfig.json
{
"compilerOptions": {
"target": "ES2022",
"lib": [
"dom",
"dom.iterable",
"esnext",
"esnext.asynciterable",
"esnext.intl",
"esnext.symbol",
"esnext.array"
],
"allowSyntheticDefaultImports": true,
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"noImplicitAny": true,
// "noImplicitReturns": true,
// "noImplicitThis": true,
"esModuleInterop": true,
"alwaysStrict": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-native",
"incremental": true,
"noEmitOnError": true,
"baseUrl": "./src",
"paths": {
"@hooks/*": ["hooks/*"],
"@components/*": ["Components/*"],
"@assets/*": ["Assets/*"],
"@screens/*": ["Screens/*"],
"@constants/*": ["Constants/*"],
"@helpers/*": ["helpers/*"],
"@onboarding/*": ["OnBoarding/*"],
"@redux/*": ["redux/*"],
"@containers/*": ["containers/*"],
"@lib/*": ["lib/*"]
}
},
"include": [
"next-env.d.ts",
"additional.d.ts",
"src/**/*.ts",
"src/**/*.js",
"src/**/*.tsx",
"./App.tsx",
"./src/**/*",
"src/**/*",
"src/**/*.*"
],
"exclude": ["node_modules"]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.