I’m trying to create a website in nodejs, I download a template and start to modify the static part, now I need to add the dynamic part.

I have a postgree database (genezio) and I need to display some data from it in my website.

I installed all necessary modules and dependencies, when I try to import the module “pg” I receive that msg (SEE SCREENSHOT), but the module is there, I run npm list pg… and it’s there, but some how my code cannot “see it”. it’s not clear to me what I can do.

I already reinstall the modules, clear the cache…

First time I’m working with nodejs, so don’t know my way around it yet.

This is my package.json

{
    "name": "sharktraders",
    "version": "1.0.0",
    "private": true,
    "author": "House of Sharks",
    "license": "See license in https://www.houseofsharks.org/license",
    "description": "Shark Traders system reports for investors",
    "homepage": "https://sharktraders.org",
    "bugs": {
        "url": "https://github.com/houseofsharks"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/houseofsharks"
    },
    "dependencies": {
        "@emotion/cache": "11.4.0",
        "@emotion/react": "^11.9.3",
        "@emotion/styled": "^11.9.3",
        "@genezio/types": "^1.0.19",
        "@mui/icons-material": "5.1.1",
        "@mui/material": "^5.9.2",
        "@mui/styled-engine": "5.1.1",
        "@mui/styles": "^5.2.0",
        "@types/pg": "^8.11.10",
        "ajv": "^8.17.1",
        "apexcharts": "^3.30.0",
        "browserify-zlib": "^0.2.0",
        "buffer": "^6.0.3",
        "chroma-js": "2.1.2",
        "crypto": "^1.0.1",
        "fs": "^0.0.1-security",
        "http": "^0.0.1-security",
        "install": "^0.13.0",
        "net": "^1.0.2",
        "path": "^0.12.7",
        "prop-types": "15.7.2",
        "querystring": "^0.2.1",
        "react": "^18.2.0",
        "react-apexcharts": "^1.3.9",
        "react-countup": "5.2.0",
        "react-device-detect": "^2.2.3",
        "react-dom": "^18.2.0",
        "react-flatpickr": "3.10.7",
        "react-github-btn": "1.2.1",
        "react-icons": "^4.3.1",
        "react-router-dom": "5.2.0",
        "stream": "^0.0.3",
        "stylis": "4.0.10",
        "stylis-plugin-rtl": "2.1.0",
        "url": "^0.11.4",
        "uuid": "8.3.2",
        "web-vitals": "1.0.1"
    },
    "devDependencies": {
        "@testing-library/jest-dom": "5.11.4",
        "@testing-library/react": "11.1.0",
        "@testing-library/user-event": "12.1.10",
        "cross-env": "^7.0.3",
        "eslint": "^7.11.0",
        "react-scripts": "5.0.1",
        "webpack-node-externals": "^3.0.0"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "cross-env PUBLIC_URL=/ react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
    },
    "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"
        ]
    }
}

This is my jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "*": [
        "src/*"
      ]
    }
  }
}

And this is my index.js (where I’m trying to connect with DB) PATH = src/layouts/results

// DB
const pg = require("pg")
const { Pool } = pg

function Dashboard() {
  const { gradients } = colors;
  const { cardContent } = gradients;

  return (
    <DashboardLayout>
      ...
    </DashboardLayout>
  );
}

export default Dashboard;

The code works fine if I remove

// DB
const pg = require("pg")
const { Pool } = pg