reactjsnode.jstypescriptazurekudu

Unable to debug "Cannot use import outside a module" in azure web app (node:process)

I have been banging my head for the better part of two weeks trying to understand why my app fails with "SyntaxError: Cannot use import statement outside a module"

The app is deployed via GitHub workflows to azure, and my azure is running a fairly basic webapp with a basic plan. I have gotten the webapp working before via pipeline fully within azure, but I moved the pipeline to GitHub because it was a bit too unstable.

In my case, the error is coming from node:process, not from within my app. I have type: module set in my package.json, I have looked up every possible solution to this error and tried many things, but for the life of me I cannot reproduce this anywhere else than on azure.

I cannot SSH into azure because the container fails to start. I can reproduce the error in Kudu, but as far as I understand kudu does actually run the web app.

Here are the logs:

2024-12-13T09:43:44.783683029Z    _____                               
2024-12-13T09:43:44.783785035Z   /  _  \ __________ _________   ____  
2024-12-13T09:43:44.783791235Z  /  /_\  \\___   /  |  \_  __ \_/ __ \ 
2024-12-13T09:43:44.783795635Z /    |    \/    /|  |  /|  | \/\  ___/ 
2024-12-13T09:43:44.783799835Z \____|__  /_____ \____/ |__|    \___  >
2024-12-13T09:43:44.783804236Z         \/      \/                  \/ 
2024-12-13T09:43:44.783808136Z A P P   S E R V I C E   O N   L I N U X
2024-12-13T09:43:44.783812036Z 
2024-12-13T09:43:44.783815736Z Documentation: http://aka.ms/webapp-linux
2024-12-13T09:43:44.783819436Z NodeJS quickstart: https://aka.ms/node-qs
2024-12-13T09:43:44.783831037Z NodeJS Version : v18.20.4
2024-12-13T09:43:44.783835237Z Note: Any data outside '/home' is not persisted
2024-12-13T09:43:44.783839137Z 
2024-12-13T09:43:47.987562439Z Starting OpenBSD Secure Shell server: sshd.
2024-12-13T09:43:48.026717967Z WEBSITES_INCLUDE_CLOUD_CERTS is not set to true.
2024-12-13T09:43:48.503316346Z Starting periodic command scheduler: cron.
2024-12-13T09:43:48.688148017Z Could not find build manifest file at '/home/site/wwwroot/oryx-manifest.toml'
2024-12-13T09:43:48.698222439Z Could not find operation ID in manifest. Generating an operation id...
2024-12-13T09:43:48.698247340Z Build Operation ID: 184b065a-852e-400f-bbe3-ba2b61f25a9b
2024-12-13T09:43:49.561858159Z Environment Variables for Application Insight's IPA Codeless Configuration exists..
2024-12-13T09:43:49.572705721Z Writing output script to '/opt/startup/startup.sh'
2024-12-13T09:43:49.663251009Z Running #!/bin/sh
2024-12-13T09:43:49.663277010Z 
2024-12-13T09:43:49.663283111Z # Enter the source directory to make sure the script runs where the user expects
2024-12-13T09:43:49.663288011Z cd "/home/site/wwwroot"
2024-12-13T09:43:49.663292411Z 
2024-12-13T09:43:49.663296612Z export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
2024-12-13T09:43:49.663300912Z if [ -z "$PORT" ]; then
2024-12-13T09:43:49.663305412Z      export PORT=8080
2024-12-13T09:43:49.663310012Z fi
2024-12-13T09:43:49.663320913Z 
2024-12-13T09:43:49.663325213Z PATH="$PATH:/home/site/wwwroot" npx serve -s build -l $PORT
2024-12-13T09:43:59.023516457Z npm info using npm@10.7.0
2024-12-13T09:43:59.041844999Z npm info using node@v18.20.4
2024-12-13T09:44:10.540898428Z (node:106) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
2024-12-13T09:44:10.541832675Z (Use `node --trace-warnings ...` to show where the warning was created)
2024-12-13T09:44:10.573331773Z /home/site/wwwroot/node_modules/.bin/serve:4
2024-12-13T09:44:10.573387676Z import { cwd as getPwd, exit, env as env2, stdout } from "node:process";
2024-12-13T09:44:10.573395377Z ^^^^^^
2024-12-13T09:44:10.573400577Z 
2024-12-13T09:44:10.573405377Z SyntaxError: Cannot use import statement outside a module
2024-12-13T09:44:10.573410077Z     at internalCompileFunction (node:internal/vm:76:18)
2024-12-13T09:44:10.573414978Z     at wrapSafe (node:internal/modules/cjs/loader:1283:20)
2024-12-13T09:44:10.573419678Z     at Module._compile (node:internal/modules/cjs/loader:1328:27)
2024-12-13T09:44:10.573424478Z     at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
2024-12-13T09:44:10.573429078Z     at Module.load (node:internal/modules/cjs/loader:1203:32)
2024-12-13T09:44:10.573433678Z     at Module._load (node:internal/modules/cjs/loader:1019:12)
2024-12-13T09:44:10.573438479Z     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12)
2024-12-13T09:44:10.573443079Z     at node:internal/main/run_main_module:28:492024-12-13T09:43:44.783683029Z    _____                               
2024-12-13T09:43:44.783785035Z   /  _  \ __________ _________   ____  
2024-12-13T09:43:44.783791235Z  /  /_\  \\___   /  |  \_  __ \_/ __ \ 
2024-12-13T09:43:44.783795635Z /    |    \/    /|  |  /|  | \/\  ___/ 
2024-12-13T09:43:44.783799835Z \____|__  /_____ \____/ |__|    \___  >
2024-12-13T09:43:44.783804236Z         \/      \/                  \/ 
2024-12-13T09:43:44.783808136Z A P P   S E R V I C E   O N   L I N U X
2024-12-13T09:43:44.783812036Z 
2024-12-13T09:43:44.783815736Z Documentation: http://aka.ms/webapp-linux
2024-12-13T09:43:44.783819436Z NodeJS quickstart: https://aka.ms/node-qs
2024-12-13T09:43:44.783831037Z NodeJS Version : v18.20.4
2024-12-13T09:43:44.783835237Z Note: Any data outside '/home' is not persisted
2024-12-13T09:43:44.783839137Z 
2024-12-13T09:43:47.987562439Z Starting OpenBSD Secure Shell server: sshd.
2024-12-13T09:43:48.026717967Z WEBSITES_INCLUDE_CLOUD_CERTS is not set to true.
2024-12-13T09:43:48.503316346Z Starting periodic command scheduler: cron.
2024-12-13T09:43:48.688148017Z Could not find build manifest file at '/home/site/wwwroot/oryx-manifest.toml'
2024-12-13T09:43:48.698222439Z Could not find operation ID in manifest. Generating an operation id...
2024-12-13T09:43:48.698247340Z Build Operation ID: 184b065a-852e-400f-bbe3-ba2b61f25a9b
2024-12-13T09:43:49.561858159Z Environment Variables for Application Insight's IPA Codeless Configuration exists..
2024-12-13T09:43:49.572705721Z Writing output script to '/opt/startup/startup.sh'
2024-12-13T09:43:49.663251009Z Running #!/bin/sh
2024-12-13T09:43:49.663277010Z 
2024-12-13T09:43:49.663283111Z # Enter the source directory to make sure the script runs where the user expects
2024-12-13T09:43:49.663288011Z cd "/home/site/wwwroot"
2024-12-13T09:43:49.663292411Z 
2024-12-13T09:43:49.663296612Z export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
2024-12-13T09:43:49.663300912Z if [ -z "$PORT" ]; then
2024-12-13T09:43:49.663305412Z      export PORT=8080
2024-12-13T09:43:49.663310012Z fi
2024-12-13T09:43:49.663320913Z 
2024-12-13T09:43:49.663325213Z PATH="$PATH:/home/site/wwwroot" npx serve -s build -l $PORT
2024-12-13T09:43:59.023516457Z npm info using npm@10.7.0
2024-12-13T09:43:59.041844999Z npm info using node@v18.20.4
2024-12-13T09:44:10.540898428Z (node:106) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
2024-12-13T09:44:10.541832675Z (Use `node --trace-warnings ...` to show where the warning was created)
2024-12-13T09:44:10.573331773Z /home/site/wwwroot/node_modules/.bin/serve:4
2024-12-13T09:44:10.573387676Z import { cwd as getPwd, exit, env as env2, stdout } from "node:process";
2024-12-13T09:44:10.573395377Z ^^^^^^
2024-12-13T09:44:10.573400577Z 
2024-12-13T09:44:10.573405377Z SyntaxError: Cannot use import statement outside a module
2024-12-13T09:44:10.573410077Z     at internalCompileFunction (node:internal/vm:76:18)
2024-12-13T09:44:10.573414978Z     at wrapSafe (node:internal/modules/cjs/loader:1283:20)
2024-12-13T09:44:10.573419678Z     at Module._compile (node:internal/modules/cjs/loader:1328:27)
2024-12-13T09:44:10.573424478Z     at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
2024-12-13T09:44:10.573429078Z     at Module.load (node:internal/modules/cjs/loader:1203:32)
2024-12-13T09:44:10.573433678Z     at Module._load (node:internal/modules/cjs/loader:1019:12)
2024-12-13T09:44:10.573438479Z     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12)
2024-12-13T09:44:10.573443079Z     at node:internal/main/run_main_module:28:49

Here is my package.json:

{
  "name": "kulmasohva_3",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-transform-private-property-in-object": "^7.25.9",
    "@babel/preset-react": "^7.25.9",
    "@babel/preset-typescript": "^7.26.0",
    "@emotion/react": "^11.13.0",
    "@emotion/styled": "^11.13.0",
    "@eslint/js": "^9.15.0",
    "@jest/types": "^29.6.3",
    "@mdi/js": "^7.4.47",
    "@mdi/react": "^1.6.1",
    "@mui/icons-material": "^5.16.5",
    "@mui/material": "^5.16.5",
    "@mui/x-date-pickers": "^7.12.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^16.1.0",
    "@types/js-cookie": "^3.0.6",
    "@types/lscache": "^1.3.4",
    "@types/node": "^16.18.59",
    "@types/react": "^18.2.29",
    "@types/react-dom": "^18.2.13",
    "@types/react-lazyload": "^3.2.3",
    "@types/react-router-dom": "^5.3.3",
    "@types/uuid": "^10.0.0",
    "axios": "^1.6.0",
    "babel-jest": "^29.7.0",
    "bootstrap": "^5.3.2",
    "browser-image-compression": "^2.0.2",
    "dayjs": "^1.11.12",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-react": "^7.37.2",
    "formik": "^2.4.5",
    "globals": "^15.12.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "js-cookie": "^3.0.5",
    "lscache": "^1.3.2",
    "material-icons": "^1.13.12",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-intl": "^6.6.8",
    "react-lazyload": "^3.2.1",
    "react-router-dom": "^6.18.0",
    "react-scripts": "5.0.1",
    "react-toastify": "^10.0.5",
    "serve": "^14.2.4",
    "ts-node": "^10.9.2",
    "typescript": "^4.9.5",
    "uuid": "^10.0.0",
    "web-vitals": "^2.1.4",
    "yup": "^1.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "serve": "serve -s build -p 3000",
    "build": "react-scripts build",
    "test": "NODE_ENV=test jest --watchAll=false"
  },
  "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"
    ]
  },
  "overrides": {
    "eslint": "8.51.0"
  }
}

tsconfig:

{
  "compilerOptions": {
    "target": "ES6",
    "lib": [
      "dom",
      "dom.iterable",
      "ESNext"
    ],
    "types": [
      "node"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "ESNext",
    "moduleResolution":"node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
    "wwwroot/js/**/*.ts",
    "wwwroot/js/**/*.tsx"
  ]
}

I am not sure what else I can do at this point, any suggestions here are greatly appreciated.

Solution

  • The issue occurs with the serve package in a project. To resolve this error, use ES modules (by adding "type": "module" in package.json).

    error

    Refer to this guide for deploying a React app.

    Follow the steps below to resolve this issue:

    Create a server.js file at the root of your project with the following code:

    import express from  "express";
...
import path from  "path";
import { fileURLToPath } from  "url";
const  __filename = fileURLToPath(import.meta.url);
const  __dirname = path.dirname(__filename);
const  app = express();
const  PORT = process.env.PORT || 8080;
app.use(express.static(path.join(__dirname, "build")));
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "build", "index.html"));

});
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});

    Build the React app using npm run build. Then, install and use serve for a quick setup:

    npm install -g serve
serve -s build

    Update the package.json:

    "scripts": {
  "start": "node server.js",
  "build": "react-scripts build"
}

    Add an .engines field in your package.json

    "engines": {
  "node": "18.x"
}

    Ensure that "type": "module" is present in your package.json, and that all your JavaScript files using import/export have .js or .mjs extensions.

    Change the index.js file:

    import App from  './App.js';
import reportWebVitals from  './reportWebVitals.js';

    Then deploy your app to the azure web.

    Output: Kudo