TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"

[dillby777]

Describe the bug
Running the "npm run build && npm run deploy" get to run "npx ts-node --esm ./sync-types.ts" and errors:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/dylanmcleod/Library/CloudStorage/Dropbox/Jellyfin/Custom Dashboards/test-build/sync-types.ts
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
at defaultLoad (node:internal/modules/esm/load:143:22)
at async nextLoad (node:internal/modules/esm/hooks:750:22)
at async nextLoad (node:internal/modules/esm/hooks:750:22)
at async Hooks.load (node:internal/modules/esm/hooks:383:20)
at async handleMessage (node:internal/modules/esm/worker:199:18) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

To Reproduce
Steps to reproduce the behavior:

1. new project using "npm create hakit@latest"
2. cd'd into directory and ran "npm install"
3. ran dev server to confirm it's working "npm run dev"
4. ran "npm run build && npm run deploy"

Screenshots / code examples

System Info (please complete the following information):

• IDE: Visual Studio Code: 1.86.2
• Browser: chrome
• npm version 10.2.4
• node version 21.6.1

Additional context
After researching(Googling) and trying so many different things, I finally found this github issue(jumping to resolution): TypeStrong/ts-node#1997 (comment)

It indicated on node 20 and ESM ts-node-esm doesn't work, there were a few alts but i went with installing tsim and changing the sync in the package.json from default: "sync": "npx ts-node --esm ./sync-types.ts", to this: "sync": "TSIMP_DIAG=error node --import=tsimp/import ./sync-types.ts",
it builds but still fails (TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" ... scripts/deploy.ts ) on running the deploy command "npx ts-node --esm scripts/deploy.ts"
if I update deploy in package.json to: "deploy": "TSIMP_DIAG=error node --import=tsimp/import scripts/deploy.ts"
it just errors with "Error:" this wasn't a big issue as i just manually added the dist folder files to Home Assistant.

Hope all this helps

[shannonhochkins]

Hey mate, have you tried using node 18? The entire repo js built with node 18 and I've not had any issues or reports until now, I haven't tested it with node 20 but might have a play soon to see what we can do, this bloody error is extremely frustrating it is a wildly over reported error 😅

[dillby777]

I'm new to node apps, so I just have the latest node installed.
Sorry I didn't know node 18 was required, I didn't see it anywhere in the docs.

[shannonhochkins]

Well, I didn't know node 21 had problems haha, otherwise it would have been in the docs 😁

[dillby777]

all good man, It's a nice repo, I've build a media browser to use with a touchscreen for my kids to select a show or movie to play on the tv via jellyfin(for now)

[shannonhochkins]

That's wicked, screenshots?

[dillby777]

Here's my dev build,
it calls some api's to get the content in the jellyfin libraries as well as separate calls to get folder contents when it detects its a folder.
the different media libraries are in area cards and the items are populated from the api call response items using PictureCards. I used your PictureCards but extended the functions to include a fallback image in case jellyfin hasn't have one for what ever reason. (might re vamp the extension and submit it for a feature request.)

there are some extra things i'm thinking about doing, make it more modular, get the go back button to close the area card to take me back to the home and not have the area cards reload when an update is called presumably for the time and media player cards, when it updates it takes me back to the initial area card item list, only an issue if i'm in a folder. maybe if the list is scrolled too, haven't gotten that far yet.

I have a small 10" screen on a RPi4 which i'll be using it on and have some layout issues to deal with first.

[shannonhochkins]

Nice one mate! Looks great!

[kneath]

I happened to run into this too and wasn't too successful downgrading node, but I was able to fix this by using tsx (another suggestion to fix this problem) in the sync action, might be worth looking into for someone with a bit more experience in the js ecosystem.

In package.json:

"sync": "npx tsx ./sync-types.ts",

[shannonhochkins]

Which version of node are you using @kneath ?

[kneath]

I'm running v21.6.2 right now — I attempted to use 18.19.1 but still ran into the same issues listed at the top (likely I didn't have my nvm setup correctly or something like that).

[dillby777]

The tsx worked for me too Kyle, From what I understand tsx doesn't report any errors so I opted for the tsimp method.

…

On Fri, Feb 23, 2024, 9:51 p.m. Kyle Aster ***@***.***> wrote: I'm running v21.6.2 right now — I attempted to use 18.19.1 but still ran into the same issues listed at the top (likely I didn't have my nvm setup correctly or something like that). — Reply to this email directly, view it on GitHub <#120 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEDBENTX3DME6HBOFC7AIH3YVFITRAVCNFSM6AAAAABDLJ4S26VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNRSGIZDMNRYGM> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>

[shannonhochkins]

I will re-open this and publish with a few more changes, as when i first built this --esm was the only way I could get the scripts to execute but it seems that's changed now.

• Will change so it uses npx tsx ./sync-types - will explore what you mentioned @dillby777 where errors aren't caught before releasing it
• Will adjust the docs so that it's clear which versions of node are supported

[shannonhochkins]

I haven't forgotten about this - been very busy with personal life and will get to this soon!

[novisys]

Can you update please 😅

[shannonhochkins]

I will @novisys paitence my friend :D This isn't a blocking issue, simply swap to node 18 for now :)

[shannonhochkins]

Have just done a bit of testing:

1. Will now default the node version to the latest stable version of node, in this case node 20
2. Will change the npm scripts for build and deploy to use npx tsx instead of npx ts-node --esm
3. I've found other bugs when a name isn't entered into the wizard where the pathnames are incorrect

Will attempt to release this next week

[shannonhochkins]

Should be resolved with the latest release of create-hakit - run npm create hakit@latest and all should be golden! Release notes