I have a problem with import my component when it's in ./src/components/CustomButton/index.tsx
and when im using defined paths in tsconfig. Then my import looks likeimport CustomButton from '@components/CustomButton'
But when i save it not in index.tsx and without using directory but just in /components/CustomButton.tsx and thenimport CutomButton from '../components/CustomButton.tsx'
everything works fine.
How to make first version work properly?
Import error: enter image description here
CustomButton index.tsx
import {Button} from 'native-base';const CustomButton = ({ children, dark, onPress, isDisabled, bold, isLoading, mt,}: any) => (<Button _text={{ color: `${dark ? 'white' : 'black'}`, fontWeight: `${bold ? 'bold' : 'normal'}`, fontSize: 16, }} bg={dark ? 'muted.20' : 'muted.10'} colorScheme="muted" onPress={onPress} isDisabled={isDisabled} isLoading={isLoading} style={{borderRadius: 10}} p="4" mt={mt}> {children}</Button>);export default CustomButton;
tsconfig
{"extends": "@tsconfig/react-native/tsconfig.json","compilerOptions": {"target": "esnext","module": "commonjs","moduleResolution": "node","outDir": "dist","sourceMap": false,"jsx": "react-native","allowJs": true,"noUnusedLocals": true,"noUnusedParameters": true,"noImplicitReturns": true,"noFallthroughCasesInSwitch": true,"declaration": true,"noEmit": true,"isolatedModules": true,"strict": true,"allowSyntheticDefaultImports": true,"esModuleInterop": true,"skipLibCheck": true,"resolveJsonModule": true,"experimentalDecorators": true,"forceConsistentCasingInFileNames": true,"baseUrl": "./src","paths": {"@*": ["/*"],"@api/*": ["/apiActions/*"],"@components/*": ["/components/*" ],"@context/*": ["/Context/*" ],"@interfaces/*": ["/Interfaces/*" ],"@utils/*": ["/utils/*" ] } },"exclude": ["node_modules","babel.config.js","metro.config.js", ]}
How to make first version work properly? I've search a lot here and in other pages but i didn't find the answer