React+Docker环境下@mui/x-data-grid导入失败问题求助

[vite] Internal server error: Failed to resolve import "@mui/x-data-grid" from "src/components/formSubmit.tsx". Does the file exist?

已确认Docker镜像的node_modules中存在该依赖，且Docker脚本配置无误，但每次执行yarn add安装依赖并使用时，仍出现上述错误。怀疑是不是node_modules出了问题？

项目结构 #

--Myapp
|--frontend
   -node_modules
   -package.json
   -index.html
   - public
   - src
       - App.tsx
       - index.tsx
       - components
          - formsubmit.tsx
   - tsconfig.json
   - vite.config.js
   - vite-env.d.ts
|--compose
   |--local
      |--react
      |--django
|--djangobackend

Docker-compose配置 #

version: '3'

volumes:
  myapp_local_postgres_data: {}
  myapp_local_postgres_data_backups: {}

services:
  django:
    build:
      context: .
      dockerfile: ./compose/local/django/Dockerfile
    image: myapp_local_django
    container_name: myapp_local_django
    depends_on:
      - postgres
    volumes:
      - .:/app:z
    env_file:
      - ./.envs/.local/.django
      - ./.envs/.local/.postgres
    ports:
      - '28000:8000'
    command: /start

  react:
    build:
      context: .
      dockerfile: ./compose/local/react/Dockerfile
    image: myapp_react
    container_name: myapp_react
    depends_on:
      - postgres
      - django
    volumes:
      - ./frontend:/app
      - /app/node_modules/
    ports:
      - 28001:3000
    environment:
      - NODE_ENV=development
    command: yarn start

前端Dockerfile #

ARG BUILD_ENVIRONMENT=local

FROM node:lts-bookworm-slim
WORKDIR /app
COPY ./frontend/package.json .
#COPY ./frontend/yarn.lock .

COPY ./frontend/src .
COPY ./frontend/public .
COPY ./frontend/vite.config.ts .
COPY ./frontend/vite-env.d.ts .
COPY ./frontend/tsconfig.json .
COPY ./frontend/index.html .

RUN yarn


EXPOSE 3000
CMD yarn dev

tsconfig.json #

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["vite/client"],
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

vite.config.js #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteTsconfigPaths from 'vite-tsconfig-paths'
import { resolve, dirname } from "node:path";


export default defineConfig({
    // depending on your application, base can also be "/"
    base: '',
    plugins: [react(), viteTsconfigPaths(), ],
    server: {
        // this ensures that the browser opens upon server start
        open: false,
        // this sets a default port to 3000
        port: 3000,
        host: true,
        strictPort: true,
        watch: {
            usePolling: true,
        },
        fs: {
            cachedChecks: false
        },
    },

package.json #

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.15.10",
    "@mui/lab": "^5.0.0-alpha.165",
    "@mui/material": "^5.15.10",
    "@mui/system": "^5.15.9",
    "@mui/x-data-grid": "^6.19.4",
    "@testing-library/dom": "^9.3.4",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@tinymce/tinymce-react": "^4.3.2",
    "@types/jest": "^29.5.12",
    "@types/node": "^20.11.19",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
    "axios": "^1.6.7",
    "jodit": "^4.0.6",
    "jodit-react-ts": "^0.9.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^3.9.10",
    "vite": "^5.1.3",
    "vite-tsconfig-paths": "^4.3.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "vite",
    "build": "tsc & vite build",
    "preview": "vite preview"
  },
  "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"
    ]
  }
}

导入代码 #

import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';

内容的提问来源于stack exchange，提问作者Jordan