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"]
}
Related
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
I've installed #types/node
In an index.ts files, the default node modules are of type any
const fs = require('fs');
fs is any.
{
"ts-node": {
"cwd": "/Users/georgenorris/Code/take-homes/simple-chat",
"projectSearchDir": "/Users/georgenorris/Code/take-homes/simple-chat"
},
"compilerOptions": {
"typeRoots": ["./node_modules/#types"],
"lib": ["es2021"],
"module": "commonjs",
"target": "es2021",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"types": ["node"],
"sourceMap": true,
"inlineSourceMap": false,
"inlineSources": true,
"declaration": false,
"noEmit": false,
"outDir": "./.ts-node"
}
}
Is my tsconfig file
Why don't the types show up?
require('modulename') is considered a dynamic import by typescript. So doesn't think it can reliably know what types to import.
In typescript you want to use the import keyword.
import fs from 'fs'
See Playground
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.
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"
}
})
I have aliases in my client app, and I 'm trying to do the same on the backend with typescript. I wrote:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": ["es6"],
"allowJs": true,
"outDir": "build",
"rootDir": "src",
"strict": true,
"noImplicitAny": false,
"skipLibCheck": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"paths": {
"mails/*": ["src/mails/*"],
"models/*": ["src/models/*"],
"routers/*": ["src/routers/*"],
"routes/*": ["src/routes/*"],
"utils/*": ["src/utils/*"]
},
"exclude": ["node_modules"]
}
}
But then when importing a file such as: import authRouter from "routers/auth" , Typescript claims that:
Cannot find module 'routers/auth' or its corresponding type declarations.
How to allow aliases path in a node/express server?