CODEWITHSUNDEEP
reactjstypescriptwebpack
Damian Green
Damian Green

Reputation: 7495

Resolve Typescript file by using folder name

I'm porting my code from ES6 to .TS / .TSX

Given a folder structure like this:

Table/Tables.tsx

Importing from another react component in ES6 I used to be able to just do this:

import Table from '../Table'

i.e. it would be smart enough to resolve the import by folder name. Now that I've switched to Typescript I have to import more verbosely (from another .tsx file);

import Table from '../Table/Table'

I've looked here https://www.typescriptlang.org/docs/handbook/module-resolution.html

I'm using Webpack with React Starter Kit.

Upvotes: 2

Views: 1752

Answers (2)

Damian Green
Damian Green

Reputation: 7495

I actually found the same question, asked a bit differently here

The package.json modification didn't work for me, so I just changed my convention to naming the component Index.tsx in each subfolder.

Upvotes: 2

dark_ruby
dark_ruby

Reputation: 7866

Inside each folder you wan to import, have an index.ts file with all exports of that folder. Then you will be able to import individual components by only specifying folder path

import {table} from ../table/

Upvotes: 3

Related Questions