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