React 无法解析 .tsx 文件

Question

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

我做的唯一与平常不同的是文件结构。由于我的文件夹中有多个frontend共享依赖项的反应项目，因此我将 移动到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

组件文件如下所示：

- 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;

我是否需要弹出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并且一切正常。