reactjs index.tsx无法解析React应用程序中的应用程序组件,无法识别.Tsx扩展名

x6yk4ghg  于 2023-01-30  发布在  React
关注(0)|答案(2)|浏览(250)

我刚刚运行了create-react-app,从另一个项目中移动了一些代码和组件,现在我不知道为什么会出现编译失败的错误。应用程序组件完全存在于无法找到它的目的地。我想控制台中有一些提示,但我不知道是什么问题。

import React from "react";
import ReactDOM from "react-dom/client";
import { App } from "./components/App/App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

我在这里添加了一个应用程序组件的图片来显示应用程序组件的位置。你能建议这里有什么问题吗?

在这里你可以看到我的package.json

{
  "name": "flask_react",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.5",
    "@mui/x-date-pickers": "^5.0.15",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/react": "^18.0.27",
    "formik": "^2.2.9",
    "prettier": "^2.8.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.7.0",
    "react-scripts": "5.0.1",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.4",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "start-backend": "cd backend && env/bin/flask run --no-debugger",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "eslint": "eslint ./src/**/*.{ts,tsx}"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/axios": "^0.14.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.64",
    "@types/react": "^18.0.21",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-dom": "^18.0.6",
    "@types/react-icons": "^3.0.0",
    "@types/react-router": "^5.1.19",
    "@types/react-router-dom": "^5.3.3",
    "@typescript-eslint/eslint-plugin": "^5.39.0",
    "@typescript-eslint/parser": "^5.39.0",
    "env-cmd": "^10.1.0",
    "eslint": "^8.24.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.8",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.7.1",
    "typescript": "^4.8.4"
  }
}
lpwwtiir

lpwwtiir1#

import { App } from "./components/App/App";

您正在使用大括号来重构应用程序导入,这将返回undefined。

import App from './components/App/App';

**EDIT:**正如Yuriy在评论中指出的,由于这不是默认的导出,所以我上面所说的并不能解决这个问题。不过我已经想到了一些其他的东西,如果你指定扩展名呢?就像这样

import { App } from "./components/App/App.tsx";
gcuhipw9

gcuhipw92#

根据这错误最可能在这里你是不再包括这.tsx扩展到你的扩展数组.更新你的webpack.config.js文件如下:

module.exports = {
  // ... 
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"]
  },
}

相关问题