We Keep Coding

Node.js 18 JS File Can't Import JS File In Repo

I am using these commands in /server/package.json to build and run my server code:
"start": "npm run compile && node ./dist/index.js",
"dev": "concurrently \"npm tsc --watch\" \"nodemon -q dist/index.js\""
These scripts build my JavaSCript from my TypeScript source just fine. But when node/nodemon runs /server/dist/index.js it errors with this error:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/.../server/dist/graphql/typeDefs' imported from /Users/.../server/dist/index.js
I know the paths are correct: If I Cmd + click on the relative path ie ./graphql/typeDefs on line 9 of server/dist/typeDefs (where the error occurs) in VSCode it opens that file up in a new tab. The corresponding TS file that the JS is generated from: https://github.com/currenthandle/next-apollo/blob/jwt/server/src/index.ts#L10
If I switch the imports to requires then it works...
Can anyone see what is going wrong there? I'm using node.js version v18.12.1
package.json
{
"name": "eth-saturday",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"compile": "tsc",
"start": "npm run compile && node ./dist/index.js",
"dev": "concurrently \"npm tsc --watch\" \"nodemon -q dist/index.js\""
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#apollo/server": "^4.2.2",
"#prisma/client": "^4.7.1",
"graphql": "^16.6.0",
"jsonwebtoken": "^8.5.1",
"next-auth": "^4.18.6",
"zod": "^3.19.1"
},
"devDependencies": {
"#rollup/plugin-typescript": "^10.0.1",
"#types/node": "^18.11.13",
"concurrently": "^7.6.0",
"prisma": "^4.7.1",
"rollup": "^3.7.3",
"typescript": "^4.9.4"
}
}
tsconfig.json
{
"compilerOptions": {
"rootDirs": ["src"],
"outDir": "dist",
"lib": ["es2020"],
"target": "es2020",
"module": "esnext",
"moduleResolution": "node",
"esModuleInterop": true,
"types": ["node"]
}
}

NestJs project does not show the updates with "tsc" command before "npm run start" or "npm run start:dev"

I am new at nestjs.
So for learning purposes i started tutorial. After I update or change my code, I couldn't find any reflections in my results. Please help me with this. I am providing my tsconfig.json file and package.json here.
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "es2017",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./",
"incremental": true,
"skipLibCheck": true,
"strictNullChecks": false,
"noImplicitAny": false,
"strictBindCallApply": false,
"forceConsistentCasingInFileNames": false,
"noFallthroughCasesInSwitch": false
}
}
package.json
{
"name": "chashi",
"version": "0.0.1",
"description": "",
"author": "",
"private": true,
"license": "UNLICENSED",
"scripts": {
"prebuild": "rimraf dist",
"build": "nest build",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "nest start",
"start:dev": "nest start --watch",
"start:debug": "nest start --debug --watch",
"start:prod": "node dist/main",
"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
"test": "jest",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json"
},
"dependencies": {
"#nestjs/common": "^9.0.0",
"#nestjs/core": "^9.0.0",
"#nestjs/platform-express": "^9.0.0",
"#nestjs/typeorm": "^9.0.1",
"mysql2": "^2.3.3",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.2.0",
"typeorm": "^0.3.11"
},
"devDependencies": {
"#nestjs/cli": "^9.0.0",
"#nestjs/schematics": "^9.0.0",
"#nestjs/testing": "^9.0.0",
"#types/express": "^4.17.13",
"#types/jest": "28.1.8",
"#types/node": "^16.0.0",
"#types/supertest": "^2.0.11",
"#typescript-eslint/eslint-plugin": "^5.0.0",
"#typescript-eslint/parser": "^5.0.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "28.1.3",
"prettier": "^2.3.2",
"source-map-support": "^0.5.20",
"supertest": "^6.1.3",
"ts-jest": "28.0.8",
"ts-loader": "^9.2.3",
"ts-node": "^10.0.0",
"tsconfig-paths": "4.1.0",
"typescript": "^4.7.4"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".*\\.spec\\.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"collectCoverageFrom": [
"**/*.(t|j)s"
],
"coverageDirectory": "../coverage",
"testEnvironment": "node"
}
}
I have created this project with "nest new project_name" command. and each time it is seems like nothing works without tsc command. Thanks

NestJs is compatible with both typescript and JavaScript. to use nestJs with vanilla JavaScript (Plain javascript) we need a babel compiler.
https://docs.nestjs.com/first-steps
https://babeljs.io/docs/en/index.html

So after some findings i have managed to get a solution.
At the beginning I used to open a new module, controller and service with commands like "nest generate module user", "nest generate controller user/user--flat", "nest g service user". I learnt from a tutorial from Udemy.
Anyways now i managed to solve this problem by only providing command "nest g resource user". And it worked just fine. Though i don't know what was wrong.
Thank you

Typescript Compiler .js extension problem

package.json
{
"version": "1.0.0",
"description": "",
"dependencies": {
"#types/express": "^4.17.13",
"#types/node": "^18.6.4",
"chalk": "^5.0.1",
"dotenv": "^16.0.1",
"express": "^4.18.1",
"nodemon": "^2.0.19",
"tsc-watch": "^5.0.3",
"typescript": "^4.7.4"
},
"devDependencies": {},
"scripts": {
"start": " nodemon node --es-module-specifier-resolution=node --experimental-modules dist/index.js",
"build": " tsc --watch && npm run start",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"type": "module"
}
tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist",
"moduleResolution": "node",
"importHelpers": true,
"target": "ESNext",
"module": "ES6",
"lib": [
"ES6",
"dom","ESNext"
],
"allowSyntheticDefaultImports": true,
"noUnusedParameters": false
},
"exclude": ["node_modules", "**/node_modules/*"],
}
my ts code
import chalk from "chalk";
import express from "express"
import { getTodo } from './addTodo';
const app = express()
app.listen(4000,()=>{
console.log(chalk.green("server is up on http://localhost:4000"))
},)
app.get("/",getTodo)
so when I compile like that its givin module not found err but when I change
import { getTodo } from './addTodo.js';
like that code every time I need to change to file extension with my hand.
I search on google to fix but they have many result have but never can fix my problem
can you help me thanks from now.

i find solution problem was
package.json
"start": " nodemon node --es-module-specifier-resolution=node --experimental-modules dist/index.js"
nodemon already starting node prompt.
so we need to delete node
"start": " nodemon --es-module-specifier-resolution=node --experimental-modules dist/index.js"

React/TypeScript testing failed. "Consider using the "jsdom" test environment."

I have a very simple React/TypeScript application, and I'm trying to learn how to implement testing. I'm using React Testing Library and Jest. It's a very simple product page, and I just want to test that the words "Welcome to our product page" have rendered.
When I run the test, I get this error message: The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string. Consider using the "jsdom" test environment. ReferenceError: document is not defined.
I went through all the solutions in similar questions on Stack Overflow, but nothing is working. I tried adding
/**
* #jest-environment jsdom
*/
to the top of the test file, but that just produces a different error message: ReferenceError: global is not defined.
I'd appreciate any help. Below is my code:
ProductPage.test.tsx
import React from "react";
import { render, screen } from "#testing-library/react";
import ProductPage from "../ProductPage";
describe("<ProductPage />", () => {
test("should display the product page", () => {
render(<ProductPage />);
expect(
screen.getByText(/Welcome to our product page/)
).toBeInTheDocument();
});
});
jest.config.js
module.exports = {
roots: ["<rootDir>/src"],
transform: {
"^.+\\.tsx?$": "ts-jest",
"^.+\\.svg$": "<rootDir>/svgTransform.js",
"^.+\\.css$": "<rootDir>/cssTransform.js"
},
setupFilesAfterEnv: [
"#testing-library/jest-dom/extend-expect"
],
testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]
};
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
package.json
{
"name": "product-page",
"version": "0.1.0",
"private": true,
"dependencies": {
"#apollo/client": "^3.4.17",
"#babel/core": "^7.16.0",
"#babel/preset-env": "^7.16.4",
"#babel/preset-typescript": "^7.16.0",
"#emotion/react": "^11.6.0",
"#emotion/styled": "^11.6.0",
"#mui/material": "^5.1.1",
"#mui/system": "^5.1.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^27.0.2",
"#types/node": "^16.11.7",
"#types/react": "^17.0.35",
"#types/react-dom": "^17.0.11",
"babel-jest": "^27.3.1",
"graphql": "^16.0.1",
"jest": "^27.3.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"ts-jest": "^27.0.7",
"typescript": "^4.4.4",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"test:watch": "jest --watch",
"eject": "react-scripts eject"
},
"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"
]
},
"devDependencies": {
"ts-node": "^10.4.0"
}
}

In order to use jsdom you need to add
testEnvironment: 'jsdom',
to your jest.config.js
Edit: You might need to add it as a dependency also.

Add testEnvironment: 'jsdom' to jest.config.js. This resolved the jsdom error.
Add jest-environment-jsdom as a dev dependency (adding jsdom did not help for whatever reason). This resolved the global error.

Same version of node but different module versions

I have 2 typescript / node projects, both using the same version of node. However when I use import * as Crypto from 'crypto'; in each project, they point to two different versions of the crypto module:
I'm quite new to node and javascript / typescript and struggling to trying to understand why, hoping someone can enlighten me. My question is: why does import * as Crypto from 'crypto'; resolve to two different versions of crypto even though the projects are setup to use the same versions (I think!)? What determines which version of a built-in module is used? And how can I resolve this so both use the same?
Here's my setup:
===Project 1===
node -v
v14.15.2
npm -v
6.14.9
package.json
{
"name": "functions",
"scripts": {
"lint": "eslint \"src/**/*\"",
"build": "tsc",
"serve": "npm run build && firebase emulators:start --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "12"
},
"main": "lib/index.js",
"dependencies": {
"#google-cloud/firestore": "^4.8.0",
"#sentry/node": "^5.29.2",
"#sentry/tracing": "^5.29.2",
"axios": "^0.21.1",
"bad-words": "^3.0.4",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.8.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "^2.22.0",
"firebase-functions-test": "^0.2.0",
"typescript": "^3.8.0"
},
"private": true
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": true,
"outDir": "lib",
"sourceMap": true,
"strict": true,
"target": "es2017"
},
"compileOnSave": true,
"include": [
"src"
]
}
===Project 2===
node -v
v14.15.2
npm -v
6.14.9
package.json
{
"name": "user-approval",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"lint": "eslint \"src/**/*\"",
"build": "tsc",
"start": "node index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"engines": {
"node": "12"
},
"license": "ISC",
"dependencies": {
"#sentry/node": "^5.29.2",
"#sentry/tracing": "^5.29.2",
"#slack/bolt": "^2.5.0",
"#slack/web-api": "^5.14.0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.8.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "^2.22.0",
"typescript": "^3.8.0"
},
"private": true
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": true,
"sourceMap": true,
"strict": true,
"target": "es2017"
},
"compileOnSave": true,
}

I suspect the projects have different versions of the #types/node package installed. If you run
npm update #types/node
in each project, it should update each of them to the latest.
I was confused at first because #types/node didn't appear in your package.json files, but it doesn't even if you install it unless you add --save-dev. Even though npm install defaults to --save normally, apparently not for #types packages — which makes sense, they're just a dev dependency, not a runtime dependency.
I'd probably add them as a dev dependency by doing:
npm install #types/node --save-dev