React 无法解析 .tsx 文件

Question

我使用 npx create-react-app app-name --template typescript 创建了一个新的 react 项目，它运行良好，直到我导入了另一个 .tsx 文件。现在，当我尝试导入另一个 .tsx 文件时，它给了我一个错误：Module not found: Error: Can't resolve './components/component' in '/Users/benbaldwin/Desktop/project/frontend/teacher/src'

我做的唯一与平常不同的是文件结构。由于我在 frontend 文件夹中有多个共享依赖项的 react 项目，因此我移动了 node_modules 以覆盖所有这些子目录。我的文件结构如下所示：

- frontend
  - node_modules
  - project-1
      - public
      - src
        index.tsx
        react-app-env.d.ts
        - components
          component.tsx
  - project-2
  package.json
  tsconfig.json

组件文件如下所示：

import React from 'react';

const Component: React.FC = () => {
    return <div>hello</div>;
};

export default Component;

索引文件如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import Component from './components/component';
import './index.css';

ReactDOM.render(
    <React.StrictMode>
        <Component />
    </React.StrictMode>,
    document.querySelector('#root')
);

我需要退出 create-react-app 并写出我自己的 webpack 配置还是有更好的方法来解决这个问题？

完整的源代码在我的 GitHub 上：https://github.com/baldwin-dev-co/mountaineer

Answer 1

我刚刚也遇到了这个问题，有一个全新的 React 项目。

暂时将react-scripts 从版本5.0.0 降级到4.0.3 为我解决了这个问题，因为在调用npm install 和npm run start 这添加了缺少的tsconfig.json 文件-这是问题的实际原因。

之后我可以安全地返回5.0.0，一切正常。