Cannot find module 'react' error when using next-auth in nodejs - node.js

Works fine in my local environment but when i try to deploy my server getting
Error: Cannot find module 'react'
on /project/src/node_modules/next-auth/react/index.js
it seems like next-auth using React for some parts.
my ts config:
{
"compilerOptions": {
"target": "es2022",
"lib": ["ES2022"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "ES2022",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"exclude": ["node_modules"],
"ts-node": {
"esm": true,
"experimentalSpecifierResolution": "node"
}
}
my package.json:
I've used ts-node --esm for build command

Related

Typescript stopped working with absolute paths

I'm maintain a fork of a repo, during my last update I applied changes however now typescript will not recognize absolute pathing.
I've made no changes to my tsconfig.json:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"alwaysStrict": true,
"baseUrl": "src",
"downlevelIteration": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"jsx": "react-jsx",
"lib": ["dom", "dom.iterable", "esnext"],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": false,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
"strictNullChecks": true,
"target": "es5",
"types": ["jest", "node"],
"useUnknownInCatchVariables": false
},
"exclude": ["node_modules", "cypress"],
"include": ["src/**/*"]
}
However now the compiler doesn't recognize paths that looks like so:
import { useIsDarkMode } from 'state/user/hooks'
Something went wrong with the node_modules, after I deleted them and called
yarn clean cache
yarn
Then everything started to work again

How to use tsconfig-paths with ts-node

How do you setup paths with typescript to run with ts-node? And later compile paths to absolute paths when compiling?
I have following very minimal structure:
koki.ts:
export const calculate = (a: number, b: number) => {
return a + b;
};
index.ts:
import { calculate } from "#koki/koki";
const result = calculate(1, 2);
console.log(result);
tsconfig.json:
{
"ts-node": {
"transpileOnly": true,
"require": ["tsconfig-paths/register"]
},
"compilerOptions": {
"target": "es2017",
"module": "commonjs",
"lib": ["dom", "es6", "es2017", "esnext.asynciterable"],
"skipLibCheck": true,
"sourceMap": true,
"outDir": "./dist",
"moduleResolution": "node",
"removeComments": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"resolveJsonModule": true,
"baseUrl": ".",
"paths": {
"#/*": ["*"],
"#koki/*": ["koki/*"]
}
},
"exclude": ["node_modules"],
"include": ["./src/**/*.ts"]
}
I am getting:
ts-node src/index.ts
Error: Cannot find module '#koki/koki'
Require stack:
- /home/pwnage/Documents/github/test-node/src/index.ts
In my case, I added the -r option to ts-node scripts
package.json
"scripts": {
"start": "ts-node -r tsconfig-paths/register src/index.ts",
}
ts-node works well in these codes
import { env } from "#/config/env";

Issues compiling nodejs code with ts-node (Cannot use import statement outside a module)

When attempting to compile typescript code with NodeJS using the following command:
npx ts-node src/server.ts
I receive the following error:
SyntaxError: Cannot use import statement outside a module
I followed the instructions suggested by the error:
Warning: To load an ES module, set "type": "module" in the
package.json or use the .mjs extension.
But upon following these, I still had no luck and another error was thrown instead.
Here is the content of my server.ts file.
import App from './app';
const app = new App();
app.listen(3080);
tsconfig.json contents:
{
"compileOnSave": false,
"compilerOptions": {
"target": "ES2017",
"lib": ["es2017"],
"typeRoots": ["node_modules/#types"],
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"pretty": true,
"sourceMap": true,
"declaration": true,
"outDir": "./dist",
"allowJs": true,
"noEmit": false,
"esModuleInterop": true,
"resolveJsonModule": true,
"importHelpers": true,
"baseUrl": "src",
"skipLibCheck": true,
"paths": {
"#/*": ["*"],
}
},
"include": ["src/**/*.ts", "src/**/*.json", ".env"],
"exclude": ["node_modules"]
}
I'm not really sure what is causing this but would greatly appreciate some wisdom on the issue.
Ideally i'd like to load the app via the server.ts file, while maintaining TypeScript contents.
You may need "moduleResolution": "node" in the compilerOptions for ts to recognize these types of imports.

Top level await gives error in build but works on dev

My code works when ran npm run dev but when I build it it gives this error. According to the docs I need target set to ES2017 or higher in tsconfig.json but I am using ESNEXT which I believe is compatible
error
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": false,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": ["./src"]
}
Because I was using vite in the question, vite.config.ts is what I should have been looking to edit instead of tsconfig.json
here is the fix to it
vite.config.ts
export default defineConfig({
build: {
minify: 'esbuild',
target: "esnext"
}
})

How can CommonJS and ES6 modules be included in the same repo?

I have a NestJS/Typescript backend where I am trying to use two different third-party services that use different importing formats. The two are below:
PDFTron uses: const { PDFNet } = require('#pdftron/pdfnet-node');
Prisma uses: import { PrismaClient } from '#prisma/client'
I have asked PDFTron support to see if an module import style similar to Prisma works for their service, but they have told me it doesn't. So, how can I use both third parties if PDFTron doesn't work in Typescript files?
For reference, my tsconfig file contains the below:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"baseUrl": "./",
"allowJs": true,
"skipLibCheck": false,
"strict": false,
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"tsBuildInfoFile": ".tsbuildinfo"
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

Resources