Azure App Service部署React+Vite+TS应用遇模块导入错误求助

问题场景 #

部署基于React + Vite + TypeScript的前端应用到Azure App Service后，启动时出现ES模块语法错误，具体报错日志如下：

A P P   S E R V I C E   O N   L I N U X
Documentation: http://aka.ms/webapp-linux
NodeJS quickstart: https://aka.ms/node-qs
NodeJS Version : v18.16.0
Note: Any data outside '/home' is not persisted
Starting OpenBSD Secure Shell server: sshd.
Starting periodic command scheduler: cron.
Cound not find build manifest file at '/home/site/wwwroot/oryx-manifest.toml'
Could not find operation ID in manifest. Generating an operation id...
Build Operation ID: 42ccecfd-8536-418a-9db2-5d5949254eb9
Environment Variables for Application Insight's IPA Codeless Configuration exists..
Writing output script to '/opt/startup/startup.sh'
Running #!/bin/sh
# Enter the source directory to make sure the script runs where the user expects
cd "/home/site/wwwroot"
export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
if [ -z "$PORT" ]; then
        export PORT=8080
fi
PATH="$PATH:/home/site/wwwroot" npm run dev
npm info using npm@9.6.4
npm info using node@v18.16.0
> bur-portal-frontend@0.0.0 dev
> vite
npm http fetch GET 200 https://registry.npmjs.org/npm 1456ms (cache updated)
(node:76) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/site/wwwroot/node_modules/.bin/vite:2
import { performance } from 'node:perf_hooks'
^^^^^^
SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47
Node.js v18.16.0
npm notice
npm notice New minor version of npm available! 9.6.4 -> 9.8.1
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.8.1>
npm notice Run `npm install -g npm@9.8.1` to update!
npm notice

本地开发使用Node.js 18.12.1，依赖列表如下：

├── @types/react-dom@18.2.6
├── @types/react@18.2.14
├── @typescript-eslint/eslint-plugin@5.61.0
├── @typescript-eslint/parser@5.61.0
├── @vitejs/plugin-react@4.0.2
├── axios@1.4.0
├── eslint-plugin-react-hooks@4.6.0
├── eslint-plugin-react-refresh@0.4.1
├── eslint@8.44.0
├── powerbi-client@2.22.3
├── react-dom@18.2.0
├── react-hook-form@7.45.1
├── react-hot-toast@2.4.1
├── react-router-dom@6.14.1
├── react@18.2.0
└── typescript@5.1.6

解决方法 #

1. 部署生产构建产物（推荐方案） #

Azure当前执行的是npm run dev开发命令，这是错误的生产环境部署方式。正确流程是：

• 本地执行npm run build，生成dist目录（包含编译后的静态HTML/CSS/JS文件）
• 将dist目录下的所有文件上传到Azure App Service的/home/site/wwwroot目录，不要上传项目源码和node_modules

2. 配置静态文件服务 #

如果上传构建产物后仍无法访问，需配置Azure使用静态文件服务器：

• 安装serve依赖：npm install -D serve
• 在package.json中添加启动命令："start": "serve -s dist"
• 进入Azure App Service的「配置」-「通用设置」，将「启动命令」设置为npm run start

3. 若必须运行Vite开发服务器（不推荐生产环境） #

如果有特殊需求要在Azure上运行Vite开发服务器，需修改项目配置：

• 在package.json根节点添加"type": "module"字段，声明项目使用ES模块规范
• 修改dev命令为："dev": "node --loader vite-node/esm node_modules/vite/bin/vite.js"，确保Node.js正确加载ES模块

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