用react import遇到错误Module not found: Can't resolve

Question

请教大家一个问题，用react import遇到Module not found: Can't resolve错误，

import { Header, Body } from 'components/App'

components/App文件夹下有两个文件Header.tsx和Body.tsx，如果不加index.tsx会遇到Module not found: Can't resolve错误，加了index.tsx导出就正常，这个index.tsx必须添加的吗，别人不加能编译成功，请教下是不是需要哪里配置才行，谢谢！！！

Body.tsx

export default function Body({ children }: { children: React.ReactNode }) {
  return <BodyWrapper>{children}</BodyWrapper>
}

Header.tsx

export default function Header({ children }: { children: React.ReactNode }) {
  return <HeaderWrapper>{children}</HeaderWrapper>
}

Answer 1

看下webpack中的resolve.extensions有没有配置省略tsx的扩展名

另外可以看下resolve.mainFiles有没有进行设置，这个就是可以省略的文件名，默认是index

Answer 2

import Header from 'components/App/Header'
这样是可以的

引用components/App 是引用这个文件夹下的index.tsx or index.js or index.jsx