Develop Reference

How to debug a "Cannot find module" error in Javascript? MODULE_NOT_FOUND

I have a Typescript project whose tsconfig.json file currently looks like this:
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es2020",
"baseUrl": "src",
"outDir": "dist",
"declaration": false,
"sourceMap": true,
"esModuleInterop": true,
"newLine": "lf",
"forceConsistentCasingInFileNames": true,
"strict": true,
"strictNullChecks": true,
"importsNotUsedAsValues": "error",
"isolatedModules": true,
"skipLibCheck": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noUncheckedIndexedAccess": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"preserveConstEnums": true
},
"include": ["src"]
}
When I build my project with tsc no problems arise. But when I run it with node dist/server/index.js I get errors like Cannot find module 'server/foo/bar' MODULE_NOT_FOUND.
What tools do developers have to try to debug this?
TypeScript could find the module during transpilation, otherwise it would have failed. Why can't JavaScript find it then?
How can I know where it tried to look for the module? Or any other information that could help the developer figure out how to fix this.

It's not usually tools that developers use to resolve issues like this, but knowledge of how their package manager stores and loads packages.
For instance, if you are using yarn and its Plug'n'Play feature (check whether you have a .pnp.cjs file in your project root where your package.json is located) then running:
yarn node dist/server/index.js
will include plug-and-play in node's module loading (refer to the link above for details) and allow packages to be resolved. When typescript code is compiled the tsc compiler must also be run under yarn to allow modules to be resolved, which is implicitly happening if tsc is being run as a script from your package.json.

Cannot import my published TS library from a separate project

I just created my first JavaScript library (ana.js), I used TypeScript and compiled everything from ~/src/ts/index.ts into the dist directory. This are the compiler options of the library:
{
"target": "es2016",
"lib": ["es2017", "dom", "DOM.Iterable"],
"module": "ES6",
"moduleResolution": "node",
"sourceMap": true,
"outDir": "./dist",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitAny": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"declaration": true
}
Then I created a sample project to test that I published correctly the library. I scaffolded a Vite project and installed the ana.js package. Then, I imported the library in the main.ts file:
import { Ana } from 'ana.js'
console.log(Ana)
When running the Vite server, it throws of missing declarations and references. Uncaught ReferenceError: exports is not defined I think this means I built the library using a wrong module, but I'm not really sure. Any help is welcome. Thank you.

extending tsconfig seems to be getting ignored

I have a tsconfig in the root of my app which gets created by create-react-app. With in the src folder of my app, I have a folder called api which is where I have nodejs server side code. The problem I have, is that the tsconfig of create-react-app does not work for what I need in my server side code.
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"noImplicitAny": false,
"downlevelIteration":true,
"baseUrl": "src/",
},
"include": [
"src"
],
"exclude": [
"api"
]
}
The problem is with the "module": "esnext", This option only works for client side code, but wont work for node unless if I have .mjs extension if I understand correctly. In node I need this option set to commonjs. This is causing me to get the following error when running my code
SyntaxError: Cannot use import statement outside a module
So I attempted to create a new tsconfig file inside the api folder which extends the tsconfig of the root of the app. Here is that code.
{
"extends": "../../tsconfig",
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": true,
"sourceMap": false,
"noUnusedLocals": true,
"noImplicitThis": true,
"noImplicitReturns": true,
}
}
It feels like this is getting totally ignored however, because I am still getting the exact same error.
EDIT: I added an option to exclude the api folder in my root tsconfig. Still not working.
Any ideas?

While this does not answer my question directly, I did manage to solve my issue by giving ts-node the exact path of the tsconfig I want it to use when running the server side code. Here is what that looks like.
"start:server": "./node_modules/.bin/ts-node --compiler typescript --project src/api/tsconfig.api.json src/api/index_server.ts"

getting TypeScript errors complaining on actually already transpiled JavaScript output

I'm trying to adapt existing tech stack (node, babel, webpack, react, server-side rendering, react-hot-loader, etc) to TypeScript. I've been able to use tsc with allowJs=true and awsome-typescript-loader and all the ts/txj/js code compiles successfully. There is also nodemon being used for watching and reloading (with output build dir ignored) and here I hit the problem - I'm getting errors like:
ERROR in [at-loader] ./src/universal/components/Page1Container/Page1Container.tsx:3:30
TS2532: Object is possibly 'undefined'.
which are caused by tsc trying to compile already compiled output JS (the line/column number are matching possible tsc problem in output JS) and what's weird is that the error comes from awsome-typescript-loader and shows source tsx file which is not correct. From the logs it looks like there is a webpack bundling when the errors shows up. Also in tsconfig.json the output build dir is excluded. I've got stuck here and not sure where to look for the reason/solution.
tsconfig.json is:
{
"compilerOptions": {
"baseUrl": "./",
"rootDir": "./src",
"outDir": "./build",
"allowJs": true,
"module": "commonjs",
"target": "es5",
"lib": ["es5", "es6", "dom"],
"sourceMap": true,
"inlineSourceMap": false,
"inlineSources": false,
"experimentalDecorators": true,
"noUnusedParameters": true,
"noUnusedLocals": true,
"jsx": "react",
"moduleResolution": "node"
},
"exclude": [
"docs",
"tests",
"tools",
"gulpfile.js",
"node_modules",
"build",
"typings/main",
"typings/main.d.ts"
],
"awesomeTypescriptLoaderOptions": {
"useCache": true,
"useBabel": true
}
}
as for webpack config for each module.rule having awsome-typescript-loader there is build output exclusion (may need to verify whether it works actually).

error TS2688: Cannot find type definition file for '.svn'

I have an angular 2 app under SVN. When i want to start it, using
npm start
I'm getting this error:
error TS2688: Cannot find type definition file for '.svn'.
By making a copy of the app's folder and removing all svn files inside it, the application starts well, but i would like to work on the folder under SVN.
Is there any way to get rid of this error and to make it work in a folder under SVN?
I have tried:
adding a .npmignore file in the app's folder, having this content: ".svn"
specify the exclude in tsconfig.json like this:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [".svn"]
}
to find a "compilerOptions": option
but all in vain :(
Thanks.