Can't run my Node.js Typescript project TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /app/src/App.ts

node.js Problem Overview

When I try to start my app on Heroku I got the following stack trace. It is just a basic ts.app like you see with ts-node and nodemon. If you need any more Infos just tell me that because it's my first post. I am really interested in what the answer is going to be.

2020-05-30T00:03:12.201106+00:00 heroku[web.1]: Starting process with command `npm start`
2020-05-30T00:03:14.405285+00:00 app[web.1]: 
2020-05-30T00:03:14.405303+00:00 app[web.1]: > [email protected] start /app
2020-05-30T00:03:14.405303+00:00 app[web.1]: > ts-node src/App.ts
2020-05-30T00:03:14.405304+00:00 app[web.1]: 
2020-05-30T00:03:14.833655+00:00 app[web.1]: (node:23) ExperimentalWarning: The ESM module loader is experimental.
2020-05-30T00:03:14.839311+00:00 app[web.1]: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /app/src/App.ts
2020-05-30T00:03:14.839312+00:00 app[web.1]:     at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:65:15)
2020-05-30T00:03:14.839314+00:00 app[web.1]:     at Loader.getFormat (internal/modules/esm/loader.js:113:42)
2020-05-30T00:03:14.839315+00:00 app[web.1]:     at Loader.getModuleJob (internal/modules/esm/loader.js:244:31)
2020-05-30T00:03:14.839315+00:00 app[web.1]:     at processTicksAndRejections (internal/process/task_queues.js:97:5)
2020-05-30T00:03:14.839316+00:00 app[web.1]:     at Loader.import (internal/modules/esm/loader.js:178:17)
2020-05-30T00:03:14.847801+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2020-05-30T00:03:14.847998+00:00 app[web.1]: npm ERR! errno 1
2020-05-30T00:03:14.848957+00:00 app[web.1]: npm ERR! discordtoornamentmanager@1.0.0 start: `ts-node src/App.ts`
2020-05-30T00:03:14.849050+00:00 app[web.1]: npm ERR! Exit status 1
2020-05-30T00:03:14.849172+00:00 app[web.1]: npm ERR! 
2020-05-30T00:03:14.849254+00:00 app[web.1]: npm ERR! Failed at the discordtoornamentmanager@1.0.0 start script.
2020-05-30T00:03:14.849337+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-05-30T00:03:14.854859+00:00 app[web.1]: 
2020-05-30T00:03:14.854998+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-05-30T00:03:14.855069+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2020-05-30T00_03_14_850Z-debug.log
2020-05-30T00:03:14.907689+00:00 heroku[web.1]: Process exited with status 1
2020-05-30T00:03:14.943718+00:00 heroku[web.1]: State changed from starting to crashed

This is my package.json

{
   "name": "discordtoornamentmanager",
   "version": "1.0.0",
   "description": "",
   "main": "dist/app.js",
   "type": "module",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "nodemon -x ts-node src/App.ts",
      "start": "ts-node src/App.ts"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
      "@types/node": "^14.0.5",
      "axios": "^0.19.2",
      "discord.js": "^12.2.0",
      "pg": "^8.2.1",
      "reflect-metadata": "^0.1.10",
      "typeorm": "0.2.25",
      "typescript": "^3.9.3",
      "nodemon": "^2.0.4",
      "ts-node": "8.10.1"

   }
}

And this is my tsconfig

{
   "compilerOptions": {
      "lib": [
         "es6"
      ],
      "target": "es6",
      "module": "commonjs",
      "moduleResolution": "node",
      "outDir": "dist",
      "resolveJsonModule": true,
      "emitDecoratorMetadata": true,
      "esModuleInterop": true,
      "experimentalDecorators": true,
      "sourceMap": true
   },
   "include": ["src/**/*.ts"],
   "exclude": ["node_modules", "**/*.spec.ts"]
}

node.js Solutions

Solution 1 - node.js

Remove "type": "module" from package.json

https://github.com/TypeStrong/ts-node/issues/935

If you don't want to remove "type": "module" (for example if you're using import statements in your .ts which allows the inference of types from modules), then you can use the following option in tsconfig.json:

{
  "compilerOptions": {
    "esModuleInterop": true,
  }
}

And then you can start the server with the config using ts-node.

Install:

npm install -g ts-node

Run:

ts-node my_server.ts

Solution 2 - node.js

use

node --loader ts-node/esm ./my-script.ts

instead of

ts-node ./my-script.ts

Solution 3 - node.js

Removing "type": "module" from package.json and adding:

  "compilerOptions": {
    "module": "CommonJS"
  },

In tsconfig.json fixed this for me.

Solution 4 - node.js

MARCH 2022

USING: Node 16.6.2, ts-node v 10.7.0

What worked for me was having "type": "module" in package.json, and adding

node --experimental-specifier-resolution=node --loader ts-node/esm ./src/app.ts

tsconfig.json:

{
    "compilerOptions": {
      "module": "ESNext",
      "esModuleInterop": true,
      "target": "ESNext",
      "moduleResolution": "Node",
      "outDir": "dist",
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "isolatedModules": false,
      "strict": true,
      "noImplicitAny": true,
      "useUnknownInCatchVariables": false,
      "inlineSourceMap": true
    },
    "ts-node": {
        "esm": true
    },
    "lib": ["esnext"]
}

Credits to @FelipePlets for the useful answer here

EDIT You may want to use a non-esnext option, as per the ts docs:

> The special ESNext value refers to the highest version your version of TypeScript supports. This setting should be used with caution, since it doesn’t mean the same thing between different TypeScript versions and can make upgrades less predictable.

Solution 5 - node.js

I first came across this problem probably over a year ago, and ts-node has yet to fix it. None of the above solutions worked for me, and I have seemingly tried everything.

I just resorted to using tsc --outDir out file.ts and then running the file normally with node out/file.js, and then adding out to the .gitignore.

The thought behind ts-node is wonderful, just really sucks when it can't handle seemingly straightforward examples like this. Apologies the solution doesn't use ts-node, but I couldn't get it to work.

Solution 6 - node.js

I made some changes on my package.json & tsconfig.json.Finally, it worked for me!

Add "type": "module" to package.json
Uncomment "moduleResolution": "node" section in your tsconfig.json
Change "module" section to "ESNEXT" in your tsconfig.json
Then Just Run the main script with this node --loader ts-node/esm .\index.ts

tsconfig.json

{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */

/* Projects */
// "incremental": true,                              /* Enable incremental compilation */
// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

/* Language and Environment */
"target": "es5",                                     /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
// "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
// "jsx": "preserve",                                /* Specify what JSX code is generated. */
// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
// "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
// "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */

/* Modules */
"module": "ESNEXT",  // ****HERE                          /* Specify what module code is generated. */
// "rootDir": "./",                                  /* Specify the root folder within your source files. */
"moduleResolution": "node",   // ****HERE                     /* Specify how TypeScript looks up a file from a given module specifier. */
// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
// "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
// "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
// "resolveJsonModule": true,                        /* Enable importing .json files */
// "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */

/* JavaScript Support */
// "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
// "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
// "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */

/* Emit */
// "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
// "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
// "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
// "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
// "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
// "outDir": "./",                                   /* Specify an output folder for all emitted files. */
// "removeComments": true,                           /* Disable emitting comments. */
// "noEmit": true,                                   /* Disable emitting files from a compilation. */
// "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
// "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
// "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
// "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
// "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
// "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
// "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
// "newLine": "crlf",                                /* Set the newline character for emitting files. */
// "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
// "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
// "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
// "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
// "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */

/* Interop Constraints */
// "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
// "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
"esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
// "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

/* Type Checking */
"strict": true,                                      /* Enable all strict type-checking options. */
// "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
// "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
// "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
// "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
// "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
// "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
// "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
// "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
// "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
// "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
// "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
// "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
// "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
// "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
// "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */

/* Completeness */
// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
}}

package.json

{
"name": "async-with-ts",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"type": "module", // ****HERE
"devDependencies": {
"@types/node-fetch": "^3.0.3",
"ts-node": "^10.2.1",
"typescript": "^4.4.2"
},
"dependencies": {
"node-fetch": "^3.0.0"
  }
}

You should be aware of using this command

node --loader ts-node/esm .\index.ts

Solution 7 - node.js

Solution One

Remove "type": "module" from package.json if it's added
In tsconfig.json under the compilerOptions Set module property to CommonJS module: "CommonJS" and moduleResolution: "Node"

Solution Two

if the first one didn't work, or you have for some reason to keep `module: "ESNext"`

1- Add "type": "module" to package.json

2- Install ts-node npm i -g ts-node

3- Go to tsconfig.json and add the following:

{
    "compilerOptions": {
        "module": "ESNext",
        "moduleResolution": "Node",
        /* ... your props ... */
    },
    "ts-node": {
        "esm": true
    }
}

4- Run ts-node fileName.ts

Solution 8 - node.js

Update: Thanks to some maintainers, a working solution is now officially documented by webpack. Just take a small look at the official webpack documentation.

The second solution is similar to other answers here and works perfectly fine in my case.

Solution 9 - node.js

I followed advice given herein. I also had to uninstall lodash-es and install lodash instead to make it work.

Solution 10 - node.js

You can use ts-node-esm instead of ts-node, keeping "type":"module" in package.json, and using import './module.js' in your .ts files.

UPDATE:

This answer has an even better solution as allows to import modules without .js extension:

https://stackoverflow.com/a/65163089/1482990

Solution 11 - node.js

Ran into this if I'm importing typescript code from a react library but for a backend script, in this case mocha tests. Its expecting .ts files but finding .tsx files I think.

In my case I had to move some functions from the .tsx react files into the .ts backend code I was working with.

Solution 12 - node.js

I was trying to run both js and ts files on the same package with "type": "module" set using es6 syntax for imports. Following mysterycommand's answer, installing ts-node package and running ts files with node --loader ts-node/esm worked.

Solution 13 - node.js

Add this to tsconfig.json

{
  /* ... your props ... */

  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

Solution 14 - node.js

before this:

node --loader ts-node/esm ./my-script.ts

I had to update ssri

npm update ssri --depth 5

Solution 15 - node.js

Not sure if this will help anyone but I fixed it by putting this at the start:

#!/usr/bin/env node

Solution 16 - node.js

changing my

"moduleResolution": "node",

"moduleResolution": "Node",

in package.json solved this for me

Solution 17 - node.js

In your package.json {Module:commonJS}, and tsconfig.json {module:commonJS},to ts-node youname.ts

Solution 18 - node.js

I changed my imports from:

import blah from './modules/blah'

import blah from './modules.blah.js'

Content Type	Original Author	Original Content on Stackoverflow
Question	peli Pongracz	View Question on Stackoverflow
Solution 1 - node.js	vadimk7	View Answer on Stackoverflow
Solution 2 - node.js	buzuosheng	View Answer on Stackoverflow
Solution 3 - node.js	Daniel_Knights	View Answer on Stackoverflow
Solution 4 - node.js	J.E.C.	View Answer on Stackoverflow
Solution 5 - node.js	Sean Blonien	View Answer on Stackoverflow
Solution 6 - node.js	Ahmet Yusuf Başaran	View Answer on Stackoverflow
Solution 7 - node.js	Hoziefa Alhassan	View Answer on Stackoverflow
Solution 8 - node.js	Philipp Sonntag	View Answer on Stackoverflow
Solution 9 - node.js	danday74	View Answer on Stackoverflow
Solution 10 - node.js	drodsou	View Answer on Stackoverflow
Solution 11 - node.js	Rouan van der Ende	View Answer on Stackoverflow
Solution 12 - node.js	Diego dos Santos	View Answer on Stackoverflow
Solution 13 - node.js	Mateusz	View Answer on Stackoverflow
Solution 14 - node.js	djossir	View Answer on Stackoverflow
Solution 15 - node.js	JudasMoses	View Answer on Stackoverflow
Solution 16 - node.js	Recommence	View Answer on Stackoverflow
Solution 17 - node.js	Edlewiss-22	View Answer on Stackoverflow
Solution 18 - node.js	Mina Saleeb	View Answer on Stackoverflow

Can't run my Node.js Typescript project TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /app/src/App.ts

node.js Problem Overview

node.js Solutions

Solution 1 - node.js

Solution 2 - node.js

Solution 3 - node.js

Solution 4 - node.js

Solution 5 - node.js

Solution 6 - node.js

Solution 7 - node.js

Solution One

Solution Two

if the first one didn't work, or you have for some reason to keep `module: "ESNext"`

Solution 8 - node.js

Solution 9 - node.js

Solution 10 - node.js

Solution 11 - node.js

Solution 12 - node.js

Solution 13 - node.js

Solution 14 - node.js

Solution 15 - node.js

Solution 16 - node.js

Solution 17 - node.js

Solution 18 - node.js

Duplicate class android.support.v4.app.INotificationSideChannel found in modules classes?

Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED

Attributions

node.js Problem Overview

node.js Solutions

Solution 1 - node.js

Solution 2 - node.js

Solution 3 - node.js

Solution 4 - node.js

Solution 5 - node.js

Solution 6 - node.js

Solution 7 - node.js

Solution One

Solution Two

if the first one didn't work, or you have for some reason to keep module: "ESNext"

Solution 8 - node.js

Solution 9 - node.js

Solution 10 - node.js

Solution 11 - node.js

Solution 12 - node.js

Solution 13 - node.js

Solution 14 - node.js

Solution 15 - node.js

Solution 16 - node.js

Solution 17 - node.js

Solution 18 - node.js

Duplicate class android.support.v4.app.INotificationSideChannel found in modules classes?

Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED

Attributions

if the first one didn't work, or you have for some reason to keep `module: "ESNext"`