SvelteKit build fails on dayjs ES module import not supported

[kbsali]

Hi,

Thanks for this cool lib/component. It works great in dev mode for a Sveltekit project I am developping, but when running npm run build it fails with the following error :

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/.../node_modules/dayjs/esm' is not supported resolving ES modules imported from /home/.../.svelte-kit/output/server/chunks/index-5e596d58.js
Did you mean to import dayjs/esm/index.js?
    at new NodeError (internal/errors.js:322:7)
    at finalizeResolution (internal/modules/esm/resolve.js:304:17)
    at moduleResolve (internal/modules/esm/resolve.js:731:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)
    at link (internal/modules/esm/module_job.js:75:36)

Any idea how this could be fixed? :pray:

[metonym]

@kbsali Thank you for raising this issue.

What SvelteKit version are you using? What adapter?

The SvelteKit example uses the latest SvelteKit version with the Node adapter and is able to build successfully.

[kbsali]

$ npm list| grep svelte
├── @sveltejs/adapter-vercel@1.0.0-next.31
├── @sveltejs/kit@1.0.0-next.201
...
├── svelte@3.44.2

So it's with the Vercel adapter. In the end I only started using your component and so it was not too long to implement my own component based on Intl.DateTimeFormat and Intl.RelativeTimeFormat, making the build work fine. I'd still be interested in getting svelte-time to work, but apparently dayjs' maintainer is not really reactive at updating his lib :/

[metonym]

@kbsali Thank you for the details.

I swapped the Node adapter for the Vercel adapter and it still built successfully.

However, I was able to repro the error by installing dayjs as a devDependency. I believe the solution is to not explicitly install dayjs as its own dependency.

Related: https://github.com/metonym/svelte-time/issues/3#issuecomment-856041209

[imbolc]

There's still an issue with Vite (essentially a restart of the dev-server required for every change), which dayjs v2 should fix, but they're in alpha and haven't ported relativeTime plugin yet.

[metonym]

@imbolc Thanks for the info. I'm now encountering a different issue in dev for SvelteKit, and a build error when using Snowpack. I didn't encounter this when linking it locally.

I think I'll have to revert #13.

[metonym]

It looks like dayjs v2 is still a work in progress; although it's written in ESM, it does not have the relativeTime plugin.

An alternative would be to fork dayjs and make it compatible.

[imbolc]

If everything else except of relativeTime works with dayjs-v2 we could create a next branch depending on it. With regard to relativeTime we could help them to port the plugin or remove relative prop and wait until they port the plugin themselves.

[haysquareA]

And today, I'm also facing the same issue using VITE I'm using static adapter because I'm using it with capacitorJS for mobile development

[alexmccartneymoore]

I'm also facing the same issue trying with a 'yup' module, using the node adapter.

[WebShapedBiz]

Same issue here, Netlify build failure with error Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/opt/build/repo/node_modules/dayjs/esm' is not supported resolving ES modules imported from /opt/build/repo/.svelte-kit/output/server/entries/pages/obavijesti.svelte.js 9:35:57 AM: Did you mean to import dayjs/esm/index.js?

[metonym]

Update: I published v0.7.1 which switches the dayjs imports back to CJS from ESM.

This should unblock usage of this library with SvelteKit.

The current downside is that it doesn't work with Snowpack, which I've recorded as a known issue. However, I feel that it's better to unblock SvelteKit than Snowpack since SvelteKit/vite has ~30x the usage of Snowpack (based on average NPM downloads).

[WebShapedBiz]

Thank you very much @metonym for your time and effort.

[kbsali]

thanks @metonym ! To be honest I am not using this component anymore, so I'm not sure what to do with this issue! :) Should I close it, from what I can read I looks like it is fixed now, right?

[Giszmo]

I just tried out this plugin using the instructions here on this repo:

npm i -D svelte-time

<script>
  import Time from "svelte-time";
</script>

<Time />

and get an import not found: default.

Might this be related to the use of typescript or did I run into the issue here?

[metonym]

@Giszmo What set-up are you using?

[Giszmo]

node v18.6.0 typescript ^4.7.4

... what part of set-up do you mean? It was for https://github.com/Giszmo/nostroid

[metonym]

what part of set-up do you mean?

By set-up, I'm referring to SvelteKit/Vite/Rollup etc.

It looks like you're using SvelteKit. From a glance, it looks correct. Are you able to run the SvelteKit example locally?

[Giszmo]

Everything works totally fine until I try to add svelte-time. The import runs into issues.

If you want me to debug something, I'm around but else, I wrote my own widget that's good enough for now.