文章/答案/技术大牛

发布

问React无法解析.tsx文件
EN

Stack Overflow用户

提问于 2021-12-17 18:23:14

回答 2查看 5.9K关注 0票数 9

我使用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并写出我自己的web配置，还是有更好的方法来解决这个问题？

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

create-react-app

reactjs

typescript

webpack

回答 2

Stack Overflow用户

发布于 2022-01-10 19:40:06

我也遇到了这个问题，一个全新的反应项目。

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

在此之后，我可以安全地回到5.0.0，一切都很好。

票数 10

Stack Overflow用户

发布于 2022-05-27 06:20:38

我也遇到过这个问题，使用react-scripts 5.0.1将一个项目升级到类型记录。

为了诊断正在发生的事情，由于搜索问题的次数很少，我设置了2个新项目。

第一，是npx create-react-app myapp非标模板项目；

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Change

让它按预期运行和安装

编译，

运行一个文件到tsx，不管是哪一个，任何更改都有相同的结果--

No tsconfig.json生成(如文档中所述)，生成失败与错误

第二，运行npx create-react-app myappts --template typescript类型标模板项目；

让它按照预期的方式运行和安装
生成的

意见；

将生成的tsconfig.json从类型记录模板项目(myappts)复制到非类型记录模板项目(myapp)没有解决问题。这些错误与svg导入等Cannot find module './logo.svg' or its corresponding type declarations.有关。

另外，将类型记录-模板项目(myappts) react-app-env.d.ts复制到非类型记录-模板项目(myapp)，可以构建该项目。

作为另一种选择，在非类型记录模板项目(myapp)中降级到react-scripts@4，然后将一个文件更改为tsx并运行一个构建将生成两个所需的文件。随后对react-scripts的升级将继续生成成功的构建。

在这个问题上有一个错误；

https://github.com/facebook/create-react-app/issues/10951

进一步的联系；

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70397360

复制

相似问题

问React无法解析.tsx文件
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React无法解析.tsx文件EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React无法解析.tsx文件
EN