I have a Next JS app on a plesk sever. When visiting the URL, an error message displays

/var/www/vhosts/dev.website.com/httpdocs/app/layout.js:1
import Header from "./components/layouts/header/header.component"
^^^^^^
SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1279:20)
    at Module._compile (node:internal/modules/cjs/loader:1331:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
    at Module.load (node:internal/modules/cjs/loader:1205:32)
    at Module._load (node:internal/modules/cjs/loader:1021:12)
    at Module.require (node:internal/modules/cjs/loader:1230:19)
    at Module.require (/usr/share/passenger/helper-scripts/node-loader.js:80:25)
    at require (node:internal/modules/helpers:179:18)
    at loadApplication (/usr/share/passenger/helper-scripts/node-loader.js:243:2)

Node.js v21.7.3

I've tried the following to resolve
- Added "type" : "modules" to package.json. This didn't work as it broke during build process.
- Removed the 'Import Header from...' from layout.js. The next import (e.g. footer) displays within the error message

Here is the package.json I am using

{
  "name": "myheadless",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@vercel/speed-insights": "^1.0.10",
    "next": "^14.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "swr": "^2.2.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.16",
    "eslint": "^8",
    "eslint-config-next": "^14.1.0",
    "postcss": "^8.4.31",
    "sass": "^1.70.0",
    "tailwindcss": "^3.3.5"
  }
}

The node set up in plesk is attached

I've stripped out the import header from layout.js but the error just moves to the next import (e.g footer)
Local set up works with no issues (npm build etc)