Cannot import from directories, TS & ES6

[silk crest]

Hey guys, can someone tell me how to support directory imports? ive been doing it up until now without issues, locally & on containerized services. But am trying to build some service for the past 24 hours with no evail because its screaming about not being able to ahve directory imports when using ESM... any fix?

[shrewd oak]

By directory import I'm guessing you are talking about how Node.js resolves ./foo as ./foo/index.js, and that's not a thing for ESM.

[silk crest]

yes thats what i mean

it's not working.

i had to add /index.js to all my imports 🥲

and im still getting random ass issues regarding imports

{
  "compilerOptions": {
    "incremental": true,
    "target": "ESNext",
    "module": "ESNext",
    "declaration": true,
    "sourceMap": true,
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "rootDir": "./src",
    "outDir": "./bin",
    "composite": true,
    "resolveJsonModule": true
  }
}

{
  "name": "@yc/strategy-builder",
  "version": "1.0.0",
  "type": "module",
  "description": "",
  "main": "bin/index.js",
  "scripts": {
    "build": "tsc -b --force",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Ofir Smolinsky",
  "license": "ISC",
  "dependencies": {
    "@types/aws-sdk": "^2.7.0",
    "@types/body-parser": "^1.19.2",
    "@types/cors": "^2.8.13",
    "@types/express": "^4.17.17",
    "@types/lodash": "^4.14.191",
    "@yc/yc-models": "*",
    "aws-sdk": "^2.1333.0",
    "axios": "^1.3.4",
    "child_process": "^1.0.2",
    "ethers": "^6.1.0",
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "fs": "^0.0.1-security",
    "lodash": "^4.17.21",
    "typescript": "^5.0.4",
    "uuid": "^9.0.0"
  }
}

is there anything seamingly wrong w my tsconfig/pakcagejson?

@shrewd oak

[shrewd oak]

ESM simply does not have directory import, period.

Add /index.js if you want to use ESM, or don't use ESM.

[silk crest]

then how has it been working up until now? im going insane

does typescript not know to handle these when compiling?

[shrewd oak]

Probably because you weren't using ESM.

[silk crest]

yea that's what i've been figtning w/ for like 24 hrs...

[silk crest]

nah, always used ESM.

since the moment i learned JS

[shrewd oak]

Do you mean you have been using "ESM syntax" or have you been using "native ESM support in Node.js"?

Those are two very different things.

[silk crest]

adding type: module

[shrewd oak]

By adding type: module that changes your project to native ESM syntax, and you cannot do directory import anymore.

It doesn't have anything to do with TS, you can write a JS and directory import still wouldn't work.

[silk crest]

but thats what ive been doing my whole life 😂

[silk crest]

yea yea i get that its a JS thing here, but im wondering whether TS can detect that on compile time and add the /index.js automatically

[shrewd oak]

No, TS doesn't rewrite your import, unless you are using CJS then TS will compile your ESM syntax into CJS syntax.

If you are already using ESM (by having type: module), then TS won't modify your import in any way.

[silk crest]

hmm thats so weird

i can swear i've always had type:module in all of my services, and never had any issues like this

[shrewd oak]

I'm fairly certain you weren't using type: module 😄

[silk crest]

i've never used CJS.

[shrewd oak]

Or maybe you were using Node older than 16.

[silk crest]

by older u mean smaller version?

hmmmm

why is that?

what was the related change there?

[shrewd oak]

Older major versions like Node 12, 14, etc.

16 is when Node.js first added native ESM support (type: module)

So if you were using Node 14 then type: module wouldn't do anything and your project would be CJS.

[silk crest]

ah probably not it

unless, what features exactly would be different for me?

sinceu. said native ESM !== ESM syntax

[shrewd oak]

ESM syntax is things like:

import foo from './foo.js'

CJS syntax of equivalent:

const foo = require('./foo.js')

Below Node 16, if you write ESM syntax the code simply does not work.
Above Node 16, if you write ESM syntax it still wouldn't work, unless you are using .mjs or have type: module.
This part has nothing to do with TS.

[silk crest]

hmm okay i see i see

yea not it then

[shrewd oak]

As for how TS fits into the picture:
You can always write ESM syntax in TS, even if you are using Node 14, or you don't have .mjs or type: module.
How it works is that, when you write ESM syntax and compiles, TS looks at what you project actually is, if it's CJS, it will turn your ESM syntax code into CJS syntax code so that your code will actually run.
But if your project is already ESM (by having Node 16+ and either .mjs or type: module), then TS knows "well your project already supports ESM so I won't change your code."

And ESM simply does not support directory import, so your old projects must've been CJS (even though you are writing ESM syntax, TS just compiles to CJS for you)

[silk crest]

perhaps somehow it was detecting it tobe CJS even tho i did put type: module

becasue i am certain of it.

something has definitely been helping being the scenes in that case tho, u r right

thanks for ur help man! do u know by any chance how i can make the import autocompetes include the file + extension maybe?

just realized it's automatcally importing dirs

[shrewd oak]

Which IDE?

I think there's an option in VS Code to change it.

[silk crest]

VSC yea

[silk crest]

do u know what it may be called?

[shrewd oak]

Not off top of my head.

[silk crest]

in general maybe some keywords i should search for?

nvm i think i found it