0

I am relatively new to web development and I am, for the first tiem, trying to server-less deploy a React application. I am going for digital ocean's droplets but after having transferred my application's root directory to the droplet (5.15.0-76-generic 22.04 Ubuntu x86_64 GNU/Linux) and tried running the npm install command to install dependencies there were 67 vulnerabilities which just are not there in the project when ran in my laptop (5.19.0-45-generic 22.04.1 Ubuntu x86_64 GNU/Linux), furthermore, there is an error when trying to run either npm run dev or npm run build:

(node:24295) 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)
/vhome/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

All I have installed inside the droplet has been nvm, npm, node, vite-create and nginx. Both versions of npm and node in my droplet match the ones in my device.

This is what my package.json looks like:

{
  "name": "ttto",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "create-vite": "^4.3.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.8.0",
    "react-router-dom": "^6.10.0",
    "typed.js": "^2.0.15"
  },
  "devDependencies": {
    "@storybook/addon-docs": "^7.0.18",
    "@storybook/addon-essentials": "^7.0.18",
    "@storybook/addon-interactions": "^7.0.18",
    "@storybook/addon-knobs": "^7.0.2",
    "@storybook/addon-links": "^7.0.18",
    "@storybook/blocks": "^7.0.18",
    "@storybook/react": "^7.0.18",
    "@storybook/react-vite": "^7.0.18",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "babel-preset-react-app": "^10.0.1",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "eslint-plugin-storybook": "^0.6.12",
    "prop-types": "^15.8.1",
    "storybook": "^7.0.18",
    "vite": "^4.3.2",
    "vite": "^4.3.2",
    "vite-plugin-compression": "^0.5.1"
  }
}

Thanks for any help or guidance! As I said I'm quite new to this and still learning.

I tried updating the linux version, different npm and node versions, npm audit fix & npm audit fix --force,rebooting the droplet.

Storytellerr
  • 642
  • 3
  • 18
Augusto Perdomo F
  • 1
  • 2

1 Answers1

0

set "type" field in your ./package.json to "module":

{
 // ...
 "type": "module"
 // ...
}
Majid
  • 21
  • 3
  • The type was already set to module in the package.json file... – Augusto Perdomo F Jul 02 '23 at 09:59
  • Explicitly name files with the .mjs extension. All other files, such as .js will be interpreted as CommonJS, which is the default if type is not defined in package.json. https://stackoverflow.com/questions/58384179/syntaxerror-cannot-use-import-statement-outside-a-module – Majid Jul 02 '23 at 13:16