Solución:
Requisito
// Meh
import config from '../../../../../../../config';
// Awesome!
import config from '@cuteapp/config';
Cómo
- Agregue este paquete de complementos de babel
yarn add --dev babel-plugin-module-resolver
- Mi
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
require.resolve('babel-plugin-module-resolver'),
{
cwd: 'babelrc',
extensions: ['.ts', '.tsx', '.js', '.ios.js', '.android.js'],
alias: {
'@cuteapp': './app'
}
}
],
'jest-hoist'
]
};
- Mi
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es2015", "es2015.promise", "es2016.array.include", "dom"],
"strict": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"@cuteapp/*": ["app/*/index", "app/*"]
},
"noEmit": true,
"resolveJsonModule": true,
"target": "esnext",
"types": ["jest"]
},
"exclude": ["node_modules", "babel.config.js", "metro.config.js"]
}
- Reinicie el IDE.
- Eso es todo.
Resumen:
El paquete npm babel-plugin-module-resolver
es necesario, así como alguna configuración en tsconfig.json
y babel.config.js
Paso a paso:
-
npm install babel-plugin-module-resolver
(oyarn add babel-plugin-module-resolver
) -
tsconfig.json
: Agregar"baseUrl": "."
paracompilerOptions
-
babel.config.js
: Agregue una clave llamadaplugins
con el siguiente valor:
[
[
'module-resolver',
{
extensions: [
'.js',
'.jsx',
'.ts',
'.tsx',
'.android.js',
'.android.tsx',
'.ios.js',
'.ios.tsx'
],
root: ['.']
}
]
]
Configuración completa:
tsconfig.json
:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext",
"baseUrl": "."
},
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}
babel.config.js
:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
extensions: [
'.js',
'.jsx',
'.ts',
'.tsx',
'.android.js',
'.android.tsx',
'.ios.js',
'.ios.tsx'
],
root: ['.']
}
]
]
};
Esto es para un nuevo proyecto limpio creado usando npx react-native init MyTestApp --template typescript
en React Native versión 0.60.5
Para cualquiera que use TypeScript y solo quiera usar la importación con rutas absolutas sin alias.
Suponiendo que todas sus carpetas de código están dentro de src
.
Insertar "baseUrl": "src"
en compilerOptions
objeto dentro tsconfig.json
.
Ahora puede utilizar rutas absolutas en las importaciones.