Problem when importing from another folder in React Typescript

Question

I have the following folder structure

I want to import both MessageList.tsx and MessageSent.tsx inside my Chat.tsx

// Chat.tsx
import React from 'react'
import {MessageList, MessageSent} from "./components/"

type Props = {}

const Chat= (props: Props) =\> {
return (
<div\>Chat</div>
)
}

export default Chat`


// MessageSent.tsx
import React from 'react'

type Props = {}

const MessageList = (props: Props) => {
  return (
    <div>MessageList</div>
  )
}

export default MessageList

MessageList.tsx is similar to MessageSent,tsx, only the name of the components is different

However, when I try to do the import of these two components {MessageList, MessageSent} I get the following error:

** Cannot find module './components/' or its corresponding type declarations.**

Why is that?

Tried different paths besides "./components/", even with full path.

You need index.ts with exports from both MessageList.tsx and MessageSent.tsx file in the components folder — Art Bauer
– Art Bauer, Commented Nov 22, 2022 at 16:25

DanH · Accepted Answer · 2022-11-22 16:31:47Z

2

You can either import the components one by one

import MessageSent from "./components/MessageSent"
import MessageList from "./components/MessageList"

or create an index directory file (index.ts)

import MessageSent from './MessageSent'
import MessageList from './MessageList'
export { MessageSent, MessageList }

answered Nov 22, 2022 at 16:31

DanH

658 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheCulprit Over a year ago

Thank you! This seems to be working. I believe the only solution so I don't have to create an index.ts file inside the components folder is to import them one by one. Why is this index.ts file required and you simply can't import them directly?

nouvist Over a year ago

@SpamSpasmodium Import keyword will look for explicit specified file or index file in a folder. So, the code you write will look for components/index.ts, but since you doesn't have that file, that doesn't work.

Art Bauer · Accepted Answer · 2022-11-22 16:30:04Z

1

To be able to import from components you need index.ts file in components folder.

// index.ts
export * from './MessageList';
export * from './MessageSent';

answered Nov 22, 2022 at 16:30

Art Bauer

4892 silver badges5 bronze badges

Comments

Moussa Bistami · Accepted Answer · 2022-11-22 16:30:12Z

1

Add a new file named index.ts inside your components folder
Then write this in the index.ts

export * from './MessageList.tsx';
export * from './MessageSent.tsx';

answered Nov 22, 2022 at 16:30

Moussa Bistami

1,1078 silver badges17 bronze badges

Collectives™ on Stack Overflow

Problem when importing from another folder in React Typescript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related