React TypeScript - Exporting more than one component

Question

Given this folder structure:

├──components/
|  └─Elements/
|    └─Button/
|    └─Input/
|    └─index.ts
|  └─Home/
|    └─home.tsx

I would like to export Button and Input so I can access them from the home component by doing:

home.tsx

import { Button, Input } from '@elements/'

I have tried this:

index.ts (in Elements folder)

export { Button } from './Button/button';
export { Input } from './Input/input';

But it does not work, I get: Cannot find module '@elements/' or its corresponding type declarations. even thou the resolve alias does work.

tsconfig.json

{
  "compilerOptions": {
    "outDir": "../public",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "baseUrl": "./",
    "rootDir": "./",
    "typeRoots": ["./node_modules/@types", "./src/@types"],
    "paths": {
      "@src/*": ["src/*"],
      "@images/*": ["src/images/*"],
      "@styles/*": ["src/styles/*"],
      "@components/*": ["src/components/*"],
      "@elements/*": ["src/components/Elements/*"],
    },
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "importsNotUsedAsValues": "preserve"
  },
  "exclude": ["node_modules", "webpack"]
}

webpack.config.babel.js

...
resolve: {
  alias: [
    '@src': join(rootDir, '/src'),
    '@images': join(rootDir, '/src/images'),
    '@assets': join(rootDir, '/src/assets'),
    '@styles': join(rootDir, '/src/styles'),
    '@components': join(rootDir, '/src/components'),
    '@elements': join(rootDir, '/src/components/Elements')
  ]
  extensions: ['.tsx', '.ts', '.js', '.jsx']
},

Answer 1

I found the solution to be removing the * from the path declaration on tsconfig.json

This

"@elements/*": ["src/components/Elements/"]

Instead of this

"@elements/*": ["src/components/Elements/*"]

And then importing it by using

import { Button, Input } from '@elements/'

or

"@elements": ["src/components/Elements"]

import { Button, Input } from '@elements'