使用AWS Amplify部署网站时遭遇MIME类型错误求助

错误信息 #

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.

Build配置 #

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    # IMPORTANT - Please verify your build commands
    build:
      commands: npm run build
  artifacts:
    baseDirectory: /
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

package.json配置 #

{
  "name": "danise-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vite",
    "build": "vite build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.16",
    "@mui/material": "^5.14.16",
    "@mui/styled-engine-sc": "^6.0.0-alpha.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.16.0",
    "styled-components": "^6.1.0",
    "vite": "^4.4.11"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.2.0",
    "sass": "^1.69.5"
  }
}

项目文件结构 #

project-root
│
├── backend
│   └── (backend files and directories)
│
└── client
    ├── node_modules
    ├── src
    │   └── (source files for the client)
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    └── vite.config.js

已尝试的无效解决方法 #

• 修改baseDirectory，试过'/', '/dist', './client'
• 移除并重新配置artifacts
• 在preBuild命令中添加或移除cd client

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