Problem with imports in react, what's wrong?

Question

React

I am doing a project based on one project on github, in general, now I completely repeat the structure.
I'm trying to import some stuff from the components folder
Here's the structure

Each file has something like this

import styled from 'styled-components'

export const Code = styled.pre`
  margin: 10px;
  padding: 10px;
  line-height: 1.4em;
  white-space: pre-wrap;
  font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono',
    'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;

  background-color: #eff0f1;
  overflow: auto;

Inside the components folder, there is an index file that contains this:

export * from './Code'
export * from './Content'
export * from './Message'
export * from './Page'
export * from './Sidebar'
export * from './SidebarItem'

I'm trying to import it all in two ways

First

import { Code, Content, Message, Page, Sidebar } from './components/'

Second

import Code from './components/Code.tsx'
import Content from './components/Content'
import Message from './components/Message'
import Page from './components/Page.tsx'
import Sidebar from './components/Sidebar'

As a result

Module not found: Can't resolve './components/' in '/home/mashincode/Downloads/test/src'

What am I doing wrong and how can I do it? (I tried the extension

Answer 1

What is the resolution of tsx and ts files? Maybe you need to fix it for jsx and js?