ReactJS-找不到模块：错误：可以解决＆＃x27; app＆＃x27;

Question

我只是使用create-react-app创建一个React项目，在设置后，我得到了此错误：

Failed to compile.

Module not found: Error: Can't resolve 'App' in 'C:\Development_Projects\international-school-fe\src'
ERROR in ./src/index.tsx 4:0-22
Module not found: Error: Can't resolve 'App' in 'C:\Development_Projects\international-school-fe\src'

webpack compiled with 1 error

这是我的jsconfig.json：

{
  "compilerOptions": {
    "baseUrl": "src",
    "checkJs": true,
    "jsx": "react"
  },
  "include": ["src"]
}

index.tsx < /code>：

import App from "App";
import "common/styles/spacing/margin/index.css";
import "common/styles/spacing/padding/index.css";
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

我想知道我做错了什么，我想设置在src文件夹中导入的路径，这就是为什么我使用jsconfig.json

Answer 1

如果您在项目中使用Typscript，请确保存在tsconfig.json文件。否则，手动或运行此命令来创建此文件：

npx tsc --init

Answer 2

使用TSCONFIG文件使用

NPX TSC -Init

之后，将其添加到允许JSX中的typeScript中。

{
  "compilerOptions": {
    "jsx": "react",
     .....
}

Answer 3

如果您是基于Typescript模板创建应用程序，而Tsconfig文件未创建，则最近出现此错误。
您可以通过以下以下方法来解决：
在index.tsx中，请参阅带有扩展名的导入（如其他帖子中建议），

import App from './App.tsx';

如果您有ReportWebvitals的引用，您仍然可能会出现错误。还使用以下扩展名来修复此问题：

import reportWebVitals from './reportWebVitals.ts';

以上两个更改应解决您的问题。
但是，这种修复方法将需要您在带有扩展的每个导入中引用.tsx文件。
因此，尝试在项目的根文件夹中创建具有标准编译属性的tsconfig.json。它应该解决该问题，您可能每次都不需要带有扩展名的每个.tsx文件。

Answer 4

看来您需要将app的导入作为相对路径。更改

import App from "App";

应该

import App from "./App";

解决问题。至于为什么需要这样做，您需要用点开始导入，以确保Node.js知道您正在尝试导入本地文件。否则，Node.js会认为您正在尝试导入模块。您可以阅读有关导入指数的更多信息在这里。

Answer 5

找不到模块：错误：无法解决'./app'

我遇到了同样的问题，经过长时间的研究，我意识到自己必须包括文件的后缀，我通过添加来解决我的问题.tsx ./应用程序

实例：
具有错误的代码：<代码>从'./app'导入应用程序;

编译已修复：来自'./app.tsx';的导入应用程序

如果解决了您的问题，请尝试一下！