React Tailwind typescript deploy error
Hello When I deploy the project Azure Webapp it occurs error:
(node:102) 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 wrapSafe (node:internal/modules/cjs/loader:1281:20) at Module._compile (node:internal/modules/cjs/loader:1321:27) at Module._extensions..js (node:internal/modules/cjs/loader:1416:10) at Module.load (node:internal/modules/cjs/loader:1208:32) at Module._load (node:internal/modules/cjs/loader:1024:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12) at node:internal/main/run_main_module:28:49
package.json:
{ "name": "metronic-tailwind-react", "private": true, "version": "9.1.2", "type": "module", "scripts": { "dev": "vite", "build": "tsc && vite build", "lint": "eslint src --fix", "preview": "vite preview" },
tsconfig:
{ "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true,
"baseUrl": "./",
/* Path alias */
"paths": {
"@/*": ["./src/*"]
},
"allowSyntheticDefaultImports": true
}, "include": ["./src"], "references": [{ "path": "./tsconfig.node.json" }] }
node js version: 20
Replies (4)
Hi
Verify that Azure is running the correct Node.js version (20.x) as specified. Please use the "node -v" command in the Azure App Service SSH.
Are there any additional error logs?
Thanks
Thanks for your response.
It doesn't work.
please check again:
viteconfig:
import { fileURLToPath, URL } from 'node:url';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import tailwindcss from 'tailwindcss';
export default defineConfig({
plugins: [react()],
css: {
postcss: {
plugins: [tailwindcss()]
}
},
base: '/',
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
chunkSizeWarningLimit: 3000
}
});
tsconfig:
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true,
"baseUrl": "./",
/* Path alias */
"paths": {
"@/*": ["./src/*"]
},
"allowSyntheticDefaultImports": true
},
"include": ["./src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node:
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.*", "scripts/**/*", "node_modules/**/*"]
}
package.json:
{
"name": "metronic-tailwind-react",
"private": true,
"version": "9.1.2",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint src --fix",
"preview": "vite preview"
},
"engines": {
"node": "20.x"
},
"dependencies": {
"@azure/msal-browser": "^3.11.0",
"@auth0/auth0-spa-js": "^2.1.3",
"@emotion/cache": "^11.13.1",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@faker-js/faker": "^9.1.0",
"@firebase/app": "^0.10.15",
"@firebase/auth": "^1.8.0",
"@firebase/firestore": "^4.7.4",
"@formatjs/intl-pluralrules": "^5.3.4",
"@formatjs/intl-relativetimeformat": "^11.4.4",
"@mui/base": "5.0.0-beta.40",
"@mui/material": "^6.1.6",
"@mui/utils": "^6.1.6",
"@radix-ui/react-avatar": "^1.1.1",
"@radix-ui/react-checkbox": "^1.1.2",
"@radix-ui/react-collapsible": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-scroll-area": "^1.2.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slider": "^1.2.1",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.3",
"@tanstack/react-query": "^5.59.20",
"@tanstack/react-table": "^8.20.5",
"apexcharts": "3.52.0",
"axios": "^1.7.7",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"cmdk": "^1.0.4",
"date-fns": "^3.0.0",
"formik": "^2.4.6",
"leaflet": "^1.9.4",
"lucide-react": "^0.456.0",
"mini-svg-data-uri": "^1.4.4",
"next-themes": "^0.4.3",
"notistack": "^3.0.1",
"postcss-preset-env": "^10.1.0",
"qs": "^6.13.0",
"react": "^18.3.1",
"react-apexcharts": "1.4.1",
"react-day-picker": "^8.10.1",
"react-dom": "^18.3.1",
"react-helmet": "^6.1.0",
"react-helmet-async": "^2.0.5",
"react-inlinesvg": "^4.1.4",
"react-intl": "^6.8.7",
"react-leaflet": "^4.2.1",
"react-query": "^3.39.3",
"react-router": "^6.28.0",
"react-router-dom": "^6.28.0",
"sonner": "^1.7.0",
"styled-components": "^6.1.13",
"stylis": "^4.3.4",
"stylis-plugin-rtl": "^2.1.1",
"tailwind-merge": "^2.5.4",
"tailwindcss-animate": "^1.0.7",
"vite-plugin-windicss": "^1.9.3",
"yup": "^1.4.0"
},
"devDependencies": {
"@eslint/js": "^9.14.0",
"@types/leaflet": "^1.9.14",
"@types/node": "^22.9.0",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@types/react-helmet": "^6.1.11",
"@types/styled-components": "^5.1.34",
"@types/stylis": "^4.2.6",
"@typescript-eslint/eslint-plugin": "^8.14.0",
"@typescript-eslint/parser": "^8.14.0",
"@vitejs/plugin-react": "^4.3.3",
"autoprefixer": "^10.4.20",
"eslint": "^9.13.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react-hooks": "^5.1.0-rc-fb9a90fa48-20240614",
"eslint-plugin-react-refresh": "^0.4.14",
"postcss": "^8.4.49",
"prettier": "^3.3.3",
"tailwindcss": "^3.4.14",
"typescript": "^5.6.3",
"typescript-eslint": "^8.14.0",
"vite": "^5.4.11"
}
}
Hi
The error seems indicates a mismatch in how the Node.js runtime is interpreting the project files.
Can you try these?
In your Azure Web App uses Node.js 20 explicitly. Add an engines field in your package.json:
"engines": {
"node": "20.x"
}Add a tsconfig.node.json, If not already present.
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.*", "scripts/**/*", "node_modules/**/*"]
}please provide additional details like your vite.config.js content or the exact Azure deployment method you're using.
Thanks
