I have a new TypeScript project, and I'm working on adding aliases. I had set up bable.config.js and tsconfig.json, and everything was working; however, in order to resolve an issue with react-native-svg-transformer, I had to add a metro.config.js file. After the addition of this file, my aliases are throwing a type error. The project builds and runs, but I'd like to resolve the errors.
bable.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
'module-resolver',
{
root: ['.'],
extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
alias: {
'@assets': './assets/*',
'@components': './src/components/*',
'@screens': './src/screens/*',
'@navigation': './src/navigation/*',
'@constants': './src/constants/*',
},
},
],
]
};
};
tsconfig.json
{
"extends": "expo/tsconfig.base",
"include": [
"src/components",
"src/custom.d.ts"
],
"compilerOptions": {
"strict": true,
"baseUrl": "./",
"rootDir": ".",
"paths": {
"*": ["./src/*"],
"@assets/*": ["./assets"],
"@components/*": ["./src/components"],
"@screens/*": ["./src/screens"],
"@navigation/*": ["./src/navigation"],
"@constants/*": ["./src/constants"],
}
}
}
and metro.config.js
const { getDefaultConfig: getDefaultExpoConfig } = require("@expo/metro-config")
metroConfig = (() => {
const config = getDefaultExpoConfig(__dirname)
const { transformer, resolver } = config
config.transformer = {
...transformer,
babelTransformerPath: require.resolve("react-native-svg-transformer"),
}
config.resolver = {
...resolver,
assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...resolver.sourceExts, "svg"],
}
return config
})()
module.exports = metroConfig
I also have a git repository for the project here working out of the feature/adding-navigation branch