add type module to switch to ESM, fix import issues

Author: vyue013

.gitignore

@@ -10,4 +10,5 @@ ca.crt/
 ca.key/
 coverage/
 certs/
-.DS_Store
+.DS_Store
+dist/

package.json

@@ -1,6 +1,7 @@
 {
   "name": "dbspy",
   "version": "8.0.0",
+  "type": "module",
   "description": "The open source dev tool to logically model and build MySQL and PostgreSQL databases",
   "main": "server/server.ts",
   "engines": {
@@ -21,7 +22,7 @@
     "cert:linux": "rm -rf .cert && mkdir -p .cert && cd .cert && mkcert create-ca && mkcert create-cert --key key.pem --cert cert.pem",
     "e2e": "cypress open --project ./tests"
   },
-  "author": "Minh Chang, David Jones, Darius Okafor, John Ruiz, Parwinder Singh",
+  "author": "Vicky Yue, Reva Venkataraman, Yihe Liu, Roshumba Llewellyn, Emma Vargas",
   "license": "MIT",
   "dependencies": {
     "@tippyjs/react": "^4.2.6",

server/logger/index.ts

@@ -1,9 +1,15 @@
 /**
  * Creates colored alert via log.info()
  **/
-import pino from 'pino';
+import pinoModule from 'pino';
 import dayjs from 'dayjs';
 
+// TS thinks pink is not a function anymore - can't import pino from 'pino'
+// with "type": "module" & "moduleResolution": "NodeNext", TS expects CommonJS modules to be imported differently
+// Pino is published as CmmonJS (cjs) not ESM
+// Need to do a "default" import manually in this case
+const pino = pinoModule.default;
+
 const transport = pino.transport({
   target: 'pino-pretty',
   options: { colorize: true },

server/models/userModel.ts

@@ -1,6 +1,6 @@
 import mysql from 'mysql2';
 import fs from 'fs';
-import log from '../logger';
+import log from '../logger/index.js';
 import path from 'path';
 
 import dotenv from 'dotenv';

server/routes/index.ts

@@ -1,21 +1,21 @@
 import express, { Express, Request, Response, NextFunction } from 'express';
-import { getAccesToken, getUserInfo } from '../controllers/oauth.controller';
-import { setJwtToken, getCurrentUser } from '../controllers/sessionController';
+import { getAccesToken, getUserInfo } from '../controllers/oauth.controller.js';
+import { setJwtToken, getCurrentUser } from '../controllers/sessionController.js';
 import {
   retrieveSchema,
   saveSchema,
   userRegistration,
   verifyUser,
-} from '../controllers/user.controller';
-import { postgresRouter } from './postgres.router';
-import { microsoftRouter } from './microsoft.router';
-import { oracleRouter } from './oracle.router';
-import { mysqlRouter } from './mysql.router';
-import { sqliteRouter } from './sqlite.router';
-import { saveRouter } from './save.router';
+} from '../controllers/user.controller.js';
+import { postgresRouter } from './postgres.router.js';
+import { microsoftRouter } from './microsoft.router.js';
+import { oracleRouter } from './oracle.router.js';
+import { mysqlRouter } from './mysql.router.js';
+import { sqliteRouter } from './sqlite.router.js';
+import { saveRouter } from './save.router.js';
 import { config } from 'dotenv';
-import log from '../logger/index';
-import type { DefaultErr } from '../../src/Types';
+import log from '../logger/index.js';
+import type { DefaultErr } from '../../src/Types.js';
 import session from 'express-session';
 import path from 'path';
 

server/server.ts

@@ -1,7 +1,7 @@
 import { config } from 'dotenv';
 import express, { Express } from 'express';
-import log from './logger/index';
-import routes from './routes';
+import log from './logger/index.js';
+import routes from './routes/index.js';
 import path from 'path';
 import cors from 'cors';
 import session from 'express-session';

src/pages/Signup.tsx

@@ -1,8 +1,8 @@
 // React & React Router Modules
 import axios from 'axios';
 import React, { useState } from 'react';
-import useCredentialsStore from '../store/credentialsStore';
-import { handleOAuthLogin } from '../utils/getGoogleUrl';
+import useCredentialsStore from '../store/credentialsStore.js';
+import { handleOAuthLogin } from '../utils/getGoogleUrl.js';
 import googleImg from '../../src/assets/GoogleImage.png';
 import gitHubImage from '../../src/assets/GithubImage.png';
 import { NavLink, useNavigate } from 'react-router-dom';

vite.config.ts

@@ -4,6 +4,7 @@ import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 
 dns.setDefaultResultOrder('verbatim');
+
 export default defineConfig({
   server: {
     port: 8080,