To load an ES module, set "type": "module" in the package.json or use the .mjs extension

Question

I am trying to run on desktop this repository a vscode extension.

I cloned it locally and run npm install

Press f5 on vscode editor and got an error

Process exited with code 1
(node:1404) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
internal/process/warning:44
Canceled

To work around with the warning I found another stackoverflow question - (node:9374) Warning: To load an ES module, set "type": "module"

So I set "type":"module" on package.json and press f5 again.

and another error show up.

Process exited with code 1
Uncaught TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /mnt/c/vscode-php-debug/src/phpDebug.ts

And found another question on stackoverflow - Can't run my Node.js Typescript project TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /app/src/App.ts

So I remove "type":"module" what happens is I'm in the loop now, confuse.

Does anyone tried debugging this or encounter as such?

I have the same problem and cant fix it – Flib Feb 01 '22 at 15:32 — Flib, Feb 01 '22 at 15:32

score 12 · Answer 1 · answered Apr 10 '21 at 13:43

Using the following command worked for me with node v14.16.1:

node --loader ts-node/esm --experimental-specifier-resolution=node index.ts

There is a warning telling me that --experimental-loader is an experimental feature but I don't care because I only use it to debug the typescript code.

score 6 · Answer 2 · answered Feb 22 '23 at 10:41

6

Try to use https://www.npmjs.com/package/tsx instead. And it will not face this issue again.

answered Feb 22 '23 at 10:41

nakorndev

803
2
11
18

score 5 · Answer 3 · edited Feb 24 '21 at 03:31

5

setting "type": "module" in your package.json should work. Check again if you made an error in inputting it. Solved my problem when I inputted it.

edited Feb 24 '21 at 03:31

ARAT

884
1
14
35

answered Feb 23 '21 at 17:50

Afolarin Oyeleke

67
1
3

score 4 · Answer 4 · edited May 15 '23 at 15:44

Faced this and lots of connected issues during migrating from js (with commonJs modules) to Typescript with support of Eslint and Prettier. The main problem is that Node.js need commonJs imports in .js files and allow to use es6modules in .mjs. Typescript by default generates .js files, so there are 2 ways to handle it:

Way 1 (if you want to compile your ts files to js with es6modules support):

Migrated to es6 modules, called all .js files - .mjs, change __dirname usages to const __dirname = dirname(fileURLToPath(import.meta.url));
Then i set "type": "module" in package.json
Then i added such config for tsconfig.json:

{
  "compilerOptions":
    {
      "target": "es2018",
      "module": "es2020",
      "outDir": "dist",
      "sourceMap": true,
      "allowJs": true,
      "esModuleInterop": true,
      "moduleResolution": "node",
      "strict": true, 
    },
  "include": ["./src"],
  "exclude": ["node_modules"],
}

Config for .eslintrc.json looks like that:

{
    "root": true,
    "env": {
      "es2020": true,
      "jasmine": true,
      "jest": true,
      "node": true
    },
    "settings": {
      "noInlineConfig": true,
      "node": {
        "tryExtensions": [".js", ".ts", ".d.ts"],
        "moduleDirectory": ["node_modules", "src/"]
      },
      "import/resolver": {
        "node": {
          "extensions": [".js", ".ts", ".d.ts"],
          "moduleDirectory": ["node_modules", "src/"],
          "typescript": {}
        },
        "typescript": {
          "alwaysTryTypes": true,
          "project": "."
        }
      }
    },
    "parser": "@typescript-eslint/parser",
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:node/recommended",
      "airbnb-base",
      "prettier"
    ],
    "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
      "import/extensions": "off",
      "linebreak-style": "off",
      "node/no-unsupported-features/es-syntax": "off",
      "no-underscore-dangle": "off",
      "import/prefer-default-export": "off",
    }
}

In one terminal i run : npx tsc -w
In another: npm run start Start script: "start": "nodemon --es-module-specifier-resolution=node dist/server.js"

Way 2 (if you don't care about compiled js code and it can be commonJS):

Migrated to es6 modules, called all .js files - .ts, add types, leave __dirname usages as is (will be handled by @types/node) and install @types/node, ts-node, nodemon.
In package.json "type": "commonjs", "main": "src/{your_root_file}.ts",
Then i added such config for tsconfig.json:

{
  "compilerOptions":
    {
      "target": "es6",
      "module": "commonjs",
      "outDir": "dist",
      "esModuleInterop": true,
      "lib": ["es6"],
      "moduleResolution": "node",
      "strict": true, 
      "noEmitOnError": true,
      "noImplicitAny": true,
      "experimentalDecorators": true, // for typeorm
      "emitDecoratorMetadata": true // for typeorm
    },
  "include": ["./src"],
  "exclude": ["node_modules"],
}

Config for .eslintrc.json looks like that:

{
    "root": true,
    "env": {
      "es2020": true,
      "jasmine": true,
      "jest": true,
      "node": true
    },
    "settings": {
      "noInlineConfig": true,
      "node": {
        "tryExtensions": [".js", ".ts",".mjs", ".d.ts"],
        "moduleDirectory": ["node_modules", "src/"]
      },
      "import/resolver": {
        "node": {
          "extensions": [".js", ".ts", ".d.ts", ".mjs"],
          "moduleDirectory": ["node_modules", "src/"],
          "typescript": {}
        },
        "typescript": {
          "alwaysTryTypes": true,
          "project": "."
        }
      }
    },
    "parser": "@typescript-eslint/parser",
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:node/recommended",
      "airbnb-base",
      "plugin:import/errors",
      "plugin:import/warnings",
      "plugin:import/typescript",
      "prettier"
    ],
    "parserOptions": { "ecmaVersion": 2018, "sourceType": "module", "project": "./tsconfig.json" },
    "plugins": [
        "@typescript-eslint",
        "eslint-plugin-tsdoc",
        "import"
    ],
    "rules": {
      "tsdoc/syntax": "warn",
      "import/extensions": "off",
      "linebreak-style": "off",
      "node/no-unsupported-features/es-syntax": "off",
      "no-underscore-dangle": "off",
      "import/prefer-default-export": "off",
      "@typescript-eslint/no-explicit-any": "error",
      "quotes": [
        "error",
        "single"
      ],
      "semi": [
        "error",
        "always"
      ]
    }
}

In terminal: npm run start Start script: "start": "nodemon src/server.ts" Nodemon will automatically detect that it is running on .ts file and will use ts-node to run your application.

score 1 · Answer 5 · answered Dec 19 '21 at 16:15

{

"version": "0.2.0",
"configurations": [
    {
        "type": "pwa-node",
        "request": "launch",
        "name": "Launch Program",
        "skipFiles": [
            "<node_internals>/**"
        ],
        "cwd": "${workspaceFolder}",
        "program": "${workspaceFolder}/index.js",
        "runtimeArgs": ["-r","esm"],
    }
]

}

score 1 · Answer 6 · answered Jan 16 '23 at 00:50

1

Add

"module": "commonjs"

in tsconfig.json. This will resolve this issue

For more details refer: https://nodejs.org/api/modules.html#modules-commonjs-modules

answered Jan 16 '23 at 00:50

Rakesh Soni

41
2

score 0 · Answer 7 · answered Apr 10 '21 at 13:51

0

Add "type": "module" in package.json file.

answered Apr 10 '21 at 13:51

Rashed Rahat

2,357
2
18
38

score 0 · Answer 8 · answered Jun 03 '21 at 19:55

To fix this change the extension file name.

For example, if your module javascript file was called script.js - change the name to script.mjs.

Do this for both the file that will use the import and the file that will export.

Also in the index.html page ensure that you refer to the file using the .mjs extension for example:

<script type="module" src="script.mjs"></script>

To load an ES module, set "type": "module" in the package.json or use the .mjs extension

8 Answers8

Linked

Related