Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


Same error i faced.



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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(