Error: Must use import to load ES Module

[Keller18306]

When I run the compiled code from TypeScript into JS, I get the following error:

Error: Must use import to load ES Module: D:\VSCode\AutoPost Lolz\node_modules\lit-html\lit-html.js
require() of ES modules is not supported.
require() of D:\VSCode\AutoPost Lolz\node_modules\lit-html\lit-html.js from D:\VSCode\AutoPost Lolz\post.ts 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 lit-html.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from D:\VSCode\AutoPost Lolz\node_modules\lit-html\package.json.

    at new NodeError (node:internal/errors:370:5)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:13)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (D:\VSCode\AutoPost Lolz\post.ts:2:1)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Module.m._compile (C:\Users\kelle\AppData\Roaming\npm\node_modules\ts-node\src\index.ts:1295:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1124:10)

My tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "moduleResolution": "Node",
        "module": "commonjs",
        "strict": true,
        "strictNullChecks": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "outDir": "./build/",
        "removeComments": true
    }
}

My package.json

{
  "name": "autopost-lolz",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Keller",
  "license": "MIT",
  "devDependencies": {
    "@types/node": "^16.7.10",
    "@types/request": "^2.48.7"
  },
  "dependencies": {
    "lit-html": "^1.4.1",
    "node-html-parser": "^4.1.4",
    "request": "^2.88.2"
  }
}

[thescientist13]

My guess would be that the issue is that your TypeScript config is telling TypeScipt to use CJS.

"module": "commonjs",

That would explain the error message, in that TypeScript is under the hood using require to load this code, thus the resulting error from NodeJS.

Here's some more info on the expectations of lit for development that might provide more info
https://lit.dev/docs/tools/requirements/

And TypeScript docs on the subject as well
https://www.typescriptlang.org/docs/handbook/2/modules.html

[Keller18306]

My guess would be that the issue is that your TypeScript config is telling TypeScipt to use CJS.

"module": "commonjs",

That would explain the error message, in that TypeScript is under the hood using require to load this code, thus the resulting error from NodeJS.

Here's some more info on the expectations of lit for development that might provide more info
https://lit.dev/docs/tools/requirements/

And TypeScript docs on the subject as well
https://www.typescriptlang.org/docs/handbook/2/modules.html

If I change to this, then I can't run it via ts-node. After compiling via tsc, I get another error. Everywhere on modules asks for .js in imports.

PS D:\VSCode\AutoPost Lolz> ts-node .
TypeError: Unknown file extension ".ts" for D:\VSCode\AutoPost Lolz\index.ts
    at new NodeError (node:internal/errors:370:5)
    at Loader.defaultGetFormat [as _getFormat] (node:internal/modules/esm/get_format:71:15)
    at Loader.getFormat (node:internal/modules/esm/loader:105:42)
    at Loader.getModuleJob (node:internal/modules/esm/loader:243:31)
    at Loader.import (node:internal/modules/esm/loader:177:17)
    at Object.loadESM (node:internal/process/esm_loader:68:5)
    at handleMainPromise (node:internal/modules/run_main:63:12)

PS D:\VSCode\AutoPost Lolz\build> node .\index.js
node:internal/process/esm_loader:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\VSCode\AutoPost Lolz\build\cookies' imported from D:\VSCode\AutoPost Lolz\build\index.js
Did you mean to import ../cookies.js?
    at new NodeError (node:internal/errors:370:5)
    at finalizeResolution (node:internal/modules/esm/resolve:321:11)
    at moduleResolve (node:internal/modules/esm/resolve:756:10)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:867:11)
    at Loader.resolve (node:internal/modules/esm/loader:89:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

[thescientist13]

What values are you using? For my case, I was able to use this and was able to get things working

{
  "target": "es2020",
  "module": "es2020",
  "moduleResolution": "node",
  "sourceMap": true
};

Not sure what others are using, but maybe that will help. 🤞

[Keller18306]

package.json

{
  "name": "autopost-lolz",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Keller",
  "license": "MIT",
  "devDependencies": {
    "@types/node": "^16.7.10",
    "@types/request": "^2.48.7"
  },
  "dependencies": {
    "lit-html": "^1.4.1",
    "node-html-parser": "^4.1.4",
    "request": "^2.88.2"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "ES2020",
        "moduleResolution": "Node",
        "module": "ES2020",
        "sourceMap": true,
        "strict": true,
        "strictNullChecks": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "outDir": "./build/",
        "removeComments": true
    }
}

[Keller18306]

So I published this to the repository: https://github.com/Keller18306/AutoPost-Lolz

[thescientist13]

Yeah, another one of the requirements for ESM is that you have to use extensions for files. So not sure where that file is coming from but make you sure you add .js to it, e.g.

import ... from './path/to/cookie.js';

[Keller18306]

All I needed was syntax highlighting, so the first thing I got was your module. I found an extension for VSCode that doesn't even need to put modules in Node.JS.
Problem solved :)