Must use import to load ES Module .eslintrc.js

W

3

16

I am trying to fix this problem for hours. I've read nearly every post about this, but still, I came to no solution.

I am trying to deploy a firebase-function with the "https got-library" dependency, but no matter what I do, nothing works. I am not the best with node-js or typescript (usually a kotlin frontend-dev), so I have no clue what the error wants from me.

Tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": false,
    "esModuleInterop": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es2017"
  },
  "compileOnSave": true,
  "include": [
    "src"
  ],
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "google",
    "plugin:@typescript-eslint/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: ["tsconfig.json", "tsconfig.dev.json"],
    sourceType: "module",
  },
  ignorePatterns: [
    "/lib/**/*", // Ignore built files.
  ],
  plugins: [
    "@typescript-eslint",
    "import",
  ],
  rules: {
    "quotes": ["error", "double"],
    "import/no-unresolved": 0,
    "linebreak-style": ["error", "windows"],
    "indent": "off",
    "object-curly-spacing": "off",
    "no-tabs": 0,
    "max-len": "off",
    "require-jsdoc": 0,
    "no-empty": [0, "allow-empty-functions", "allow-empty-catch"],
    "@typescript-eslint/no-explicit-any": ["off"],
    "@typescript-eslint/naming-convention": ["off"],
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-var-requires": "off",
    "no-mixed-spaces-and-tabs": 0,
    "camelcase": 0,
  },
};

package.json

{
  "name": "functions",
  "scripts": {
    "lint": "eslint --ext .js,.ts .",
    "build": "tsc",
    "serve": "npm run build && firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "14"
  },
  "type": "module",
  "main": "lib/index.js",
  "dependencies": {
    "@google-cloud/functions-framework": "^2.1.0",
    "@types/stripe": "^8.0.417",
    "firebase-admin": "^10.0.1",
    "firebase-functions": "^3.14.1",
    "firebase-tools": "^10.0.1",
    "form-data": "^4.0.0",
    "got": "^12.0.0",
    "iso3166-alpha-converter": "^1.0.0",
    "mailgun.js": "^4.1.0",
    "stripe": "^8.193.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.8.0",
    "@typescript-eslint/parser": "^5.8.0",
    "eslint": "^8.5.0",
    "eslint-config-google": "^0.14.0",
    "eslint-plugin-import": "^2.22.0",
    "firebase-functions-test": "^0.3.3",
    "typescript": "^4.5.4"
  },
  "private": true
}

Error

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\ImMor\Documents\FirebaseFunctions\functions\.eslintrc.js
require() of ES modules is not supported.
require() of C:\Users\ImMor\Documents\FirebaseFunctions\functions\.eslintrc.js from C:\Users\ImMor\Documents\FirebaseFunctions\functions\node_modules\@eslint\eslintrc\dist\eslintrc.cjs is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename .eslintrc.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\ImMor\Documents\FirebaseFunctions\functions\package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at Object.module.exports [as default] (C:\Users\ImMor\Documents\FirebaseFunctions\functions\node_modules\import-fresh\index.js:32:59)
    at loadJSConfigFile (C:\Users\ImMor\Documents\FirebaseFunctions\functions\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2531:47)
    at loadConfigFile (C:\Users\ImMor\Documents\FirebaseFunctions\functions\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2615:20)
    at ConfigArrayFactory.loadInDirectory (C:\Users\ImMor\Documents\FirebaseFunctions\functions\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2808:34)
    at CascadingConfigArrayFactory._loadConfigInAncestors (C:\Users\ImMor\Documents\FirebaseFunctions\functions\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3772:46)
    at CascadingConfigArrayFactory.getConfigArrayForFile (C:\Users\ImMor\Documents\FirebaseFunctions\functions\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3693:18)

Function I want to deploy

// THIS IS MAKING THE PROBLEM
import got from "got";

export async function doOnDeletedUser(
    // SOME OTHER STUFF
) {
    const uid = user.uid;
    // SOME OTHER STUFF
}

Edit

Changing .eslintrc.js to .eslintrc.cjs solves this problem, but then I get the following error:

ReferenceError: exports is not defined
    at file:///C:/Users/ImMor/Documents/FirebaseFunctions/functions/lib/index.js:24:23
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async loadModule (C:\Users\ImMor\AppData\Roaming\npm\node_modules\firebase-tools\lib\deploy\functions\runtimes\node\triggerParser.js:16:20)
    at async C:\Users\ImMor\AppData\Roaming\npm\node_modules\firebase-tools\lib\deploy\functions\runtimes\node\triggerParser.js:34:15

Edit 2

Removing "type":"module" then gives me this error again:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\ImMor\Documents\FirebaseFunctions\functions\node_modules\ky\distribution\index.js
require() of ES modules is not supported.
require() of C:\Users\ImMor\Documents\FirebaseFunctions\functions\node_modules\ky\distribution\index.js from C:\Users\ImMor\Documents\FirebaseFunctions\functions\lib\auth\onDelete\onDeletedUser.f.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\ImMor\Documents\FirebaseFunctions\functions\node_modules\ky\package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\Users\ImMor\Documents\FirebaseFunctions\functions\lib\auth\onDelete\onDeletedUser.f.js:27:30)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\Users\ImMor\Documents\FirebaseFunctions\functions\lib\index.js:39:27)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)

Edit 3

Following changes have been made:

Change "module" : "commonjs" -> "module": "es6"
Change "target" : "es2017" -> "target": "es6"
Add "moduleResolution": "node" in tsconfig.js (inside compileroptions).
Add "type":"module" to package.json

Now I am getting the following error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\ImMor\Documents\FirebaseFunctions\functions\lib\utils\constants.f' imported from C:\Users\ImMor\Documents\FirebaseFunctions\functions\lib\index.js
    at finalizeResolution (internal/modules/esm/resolve.js:276:11)
    at moduleResolve (internal/modules/esm/resolve.js:699:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
    at Loader.resolve (internal/modules/esm/loader.js:86:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:230:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:56:40)
    at link (internal/modules/esm/module_job.js:55:36)

Here is the code (constants.f.ts)

export const constants = { /** * Default firebase-functions region */ region: "europe-west1", } as const;

Edit 4

Looks like I've fixed all my problems. When using "module": "es6", one has to import its module like this:

import { constants } from "./utils/constants.js";

and not like this:

import { constants } from "./utils/constants";

The ending ".js" is important

Wicklow answered 26/12, 2021 at 15:51 Comment(0)

P

33

Quoting from the ESLint documentation:

use .eslintrc.cjs when running ESLint in JavaScript packages that specify "type":"module" in their package.json. Note that ESLint does not support ESM configuration at this time.

Since you have "type": "module" in your package.json file, you should be fine by renaming ".eslintrc.js" to ".eslintrc.cjs".

Phonemic answered 26/12, 2021 at 16:14 Comment(9)

Yes, this solved my error above, BUT: Now it says "exports is not defined" – Wicklow 26/12, 2021 at 16:16

That sounds like the file "lib/index.js" is not a ES module. If that's the case, removing "type": "module" from package.json and reverting the name to ".eslintrc.js" could help. – Phonemic 26/12, 2021 at 16:24

Well, doing that will result in the old problem. lib/index.js is created automagically from my index.ts file – Wicklow 26/12, 2021 at 16:25

It shouldn't if you remove "type": "module" from package.json. – Phonemic 26/12, 2021 at 16:27

I removed "type": "module" from my package.json, now I get the old error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\ImMor\Documents\FirebaseFunctions\functions\node_modules\ky\distribution\index.js

– Wicklow 26/12, 2021 at 16:31

Okay, in that case, you need to use ES modules because your code depends on ES modules, but you are generating CJS files. Then, in your "tsconfig.json" file, change "module": "commonjs" to "module": "es6", have "type": "module" in package.json and use the name ".eslintrc.cjs". Pretty sure, this will produce a new error, but that's a step forward. – Phonemic 26/12, 2021 at 16:43

Another step forward my friend! All the above issues have been resolved, now I am getting this issue:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\ImMor\Documents\FirebaseFunctions\functions\lib\utils\constants.f'

. I will edit my answer so you can see the full error code and the code – Wicklow 26/12, 2021 at 16:47

How does your import in "lib/index.ts" look like? Are you importing from './utils/constants.f'? – Phonemic 26/12, 2021 at 16:58

I am importing it like this import { constants } from "./utils/constants.f"; – Wicklow 26/12, 2021 at 16:58

S

1

In my case, I had "type": "module" in package.json and .eslintrc.cjs (to force commonJS since ESM is not yet supported) and wanted to use ESLint with Standard.

I had to also install Standard separately as a dev dependency (which you don't need usually): npm i -D standard. After VS Code restart, the issue is gone.

Smothers answered 31/10, 2022 at 13:15 Comment(0)

C

0

Just try this one

add this into your package.json

"type": "module"

as I did below don't forget to restart the typescript server

Closer answered 26/12, 2021 at 16:13 Comment(2)

This will help you to import and export from modules – Closer 26/12, 2021 at 16:16

I already did this (see my package.json). I've edited my question – Wicklow 26/12, 2021 at 16:18