`svelte-time` version 0.7.1 doesn't work with Snowpack

[metonym]

I'm recording this as a known issue. Version 0.7.1 switched back to using CJS instead of ESM imports from dayjs in order to unblock usage with SvelteKit.

Running snowpack in development works fine; however, building the app for production will throw the following error:

Duplicate export 'default... in node_modules/dayjs/dayjs.min.js

The workaround is to either pin the svelte-time version to v0.7.0 or copy the source code and update src/dayjs.js to the following:

- import dayjs from "dayjs";
- import relativeTime from "dayjs/plugin/relativeTime.js";
+ import dayjs from "dayjs/esm";
+ import relativeTime from "dayjs/esmplugin/relativeTime";

[KieranP]

With vite/svelte and latest versions of svelte-time/dayjs, I get the following error:

Uncaught SyntaxError: The requested module '/vite-dev/@fs/Volumes/Work/node_modules/dayjs/plugin/relativeTime.js?v=1f51ad4b' does not provide an export named 'default' (at dayjs.js:2:8)

[metonym]

@KieranP Do you have dayjs installed as a direct dependency? The SvelteKit example runs locally for me.

[Van-Dame]

Same issue as @KieranP. Rolling back to 0.7.0 fixes the issue.

❯ npm init vite@latest vite-svelte-repro -- --template svelte-ts
❯ npm i svelte-time@0.7.1

import Time from 'svelte-time';

❯ npm run dev

Browser: Uncaught SyntaxError: The requested module 'relativeTime.js?v=1f51ad4b' does not provide an export named 'default' (at dayjs.js:2:8)

Also, dayjs is not installed as a direct dependency.

[KieranP]

@metonym I do not have dayjs as a direct dependency.

@Van-Dame Thank you for the tip. Going back to 0.7.0 does indeed resolve the issue.

[metonym]

@Van-Dame Thank you for the vite repro. I see the error in dev but not when building it.

Could you specify "dayjs/plugin/relativeTime.js" in the vite.optimizeDeps.include?

// vite.config.js
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { defineConfig } from "vite";

export default defineConfig(() => {
  return {
    plugins: [svelte()],
    optimizeDeps: {
      include: ["dayjs/plugin/relativeTime.js"],
    },
  };
});

I'm still unable to repro the bug while using SvelteKit (1.0.0-next.357) with the Node adapter.

[Van-Dame]

@metonym Updated to v0.7.1 and added your workaround., Can confirm it works! 👍🏻

[metonym]

I'm closing this issue as it relates to Snowpack since the project is no longer maintained. It even recommends using Vite as the alternative. I'll remove the broken Snowpack example.

Update (April 20, 2022): Snowpack is no longer actively maintained and is not recommended for new projects. Check out Vite for a well-maintained Snowpack alternative. See also: esbuild, parcel