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

user_3721034 0
Viewed 29427

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?

visual-studio-code typescript node.js
6 Answers

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.

user_105072220

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.

user_152691900

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):

  1. Migrated to es6 modules, called all .js files - .mjs, change __dirname usages to const __dirname = dirname(fileURLToPath(import.meta.url));
  2. Then i set "type": "module" in package.json
  3. 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"],
}

  1. 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",
    }
}

  1. In one terminal i run : npx tsc -w
  2. 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):

  1. 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.
  2. In package.json "type": "commonjs", "main": "src/{your_root_file}.ts",
  3. 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"],
}

  1. 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"
      ]
    }
}

  1. 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.
user_132210360

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

user_104278070 
{

"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"],
    }
]

}

user_106728110

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>
user_141181580
Related