Can't import dayjs on dev server

[khromov]

Edit: Fixed by specifically importing the the ES module

import dayjs from "dayjs/esm";
import relativeTime from "dayjs/esm/plugin/relativeTime";

Original bug report

Describe the bug
We have a basic component that imports dayjs, but there is an error displaying a page with this component when using npm run dev. Running in production with npm run build && npm start works fine.

The component:

<script>
	import dayjs from 'dayjs';
	const date = dayjs().format('YYYY-MM-DD');
</script>

<header>
	<div>
	    <time datetime="{date}">
                 {date}
            </time>
	</div>
</header>

Logs
Browser logs

500
__vite_ssr_import_1__.default is not a function

TypeError: __vite_ssr_import_1__.default is not a function
    at HeaderTop.svelte:3:22
    at Object.$$render (/Users/stanislav.khromov/Documents/GitHub/kratos-svelte/node_modules/svelte/internal/index.js:1369:22)
    at eval (/Users/stanislav.khromov/Documents/GitHub/kratos-svelte/src/routes/index.svelte:15:103)
    at Object.$$render (/Users/stanislav.khromov/Documents/GitHub/kratos-svelte/node_modules/svelte/internal/index.js:1369:22)
    at Object.default (root.svelte:46:46)
    at eval (/Users/stanislav.khromov/Documents/GitHub/kratos-svelte/src/routes/$layout.svelte:11:41)
    at Object.$$render (/Users/stanislav.khromov/Documents/GitHub/kratos-svelte/node_modules/svelte/internal/index.js:1369:22)
    at root.svelte:42:13
    at $$render (/Users/stanislav.khromov/Documents/GitHub/kratos-svelte/node_modules/svelte/internal/index.js:1369:22)
    at Object.render (/Users/stanislav.khromov/Documents/GitHub/kratos-svelte/node_modules/svelte/internal/index.js:1377:26)

To Reproduce
✅ Please make sure you've tested with the latest versions of Svelte and SvelteKit.

Information about your SvelteKit Installation:

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit --binaries --browsers

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.86 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 15.12.0 - ~/.nvm/versions/node/v15.12.0/bin/node
    npm: 7.6.3 - ~/.nvm/versions/node/v15.12.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 86.0.1
    Safari: 14.0.3
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.61 
    svelte: ^3.29.0 => 3.35.0 

• Your browser
  Chrome 89

• Your adapter (e.g. Node, static, Vercel, Begin, etc...)
  Node

Severity
Blocking SvelteKit usage.

Additional context
Add any other context about the problem here.

[benmccann]

If you figured it out, would you be able to post the solution here for others?

[khromov]

Hey @benmccann ! I added the solution at the top of my original post before closing, but I'll post it here again for the "scrollers". 😄

Fixed by specifically importing the ES module directly

Example:

import dayjs from "dayjs/esm";
import relativeTime from "dayjs/esm/plugin/relativeTime";

[NoelJacob]

@khromov I still get the error. I did not change anything else, just added the import dayjs from "dayjs/esm"

On pnpm run dev:

> windinew@0.0.1 dev C:\Users\HP\Desktop\windinew
> svelte-kit dev

> Listening on http://localhost:3000
4:03:13 pm [vite] Error when evaluating SSR module C:\Users\HP\Desktop\windinew\src\routes\index.svelte:
C:\Users\HP\Desktop\windinew\node_modules\.pnpm\dayjs@1.10.4\node_modules\dayjs\esm\index.js:1
import * as C from './constant';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1024:16)
    at Module._compile (node:internal/modules/cjs/loader:1072:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at nodeRequire (C:\Users\HP\Desktop\windinew\node_modules\.pnpm\vite@2.1.3\node_modules\vite\dist\node\chunks\dep-0776dd57.js:68933:17)
    at ssrImport (C:\Users\HP\Desktop\windinew\node_modules\.pnpm\vite@2.1.3\node_modules\vite\dist\node\chunks\dep-0776dd57.js:68891:20)
    at eval (C:\Users\HP\Desktop\windinew\src\routes\index.svelte:7:31)
 ERROR  Command failed with exit code 1.

[khromov]

@NoelJacob This sounds like it might be a different issue.

Make sure you are running the latest version of Node (v15) which has support for ES Modules, try using npm instead of pnpm, and try making a completely new SvelteKit project without any other modifications other than importing dayjs.

Since you're on Windows I can also suggest using Ubuntu or Debian on WSL2 instead of a native Window environment!

[rvrm]

getting the same error as @NoelJacob with latest Node (v16.3.0). Has anyone solved this in the meantime?

[benmccann]

Fixed by specifically importing the ES module directly

You shouldn't have to do that, but dayjs is missing the module entry from package.json

These issues are caused by iamkun/dayjs#1314

[autr]

dayjs/esm fixes for SvelteKit but will then break in some vanilla Svelte configs (ie. Routify), so did:

import dayjsCJS from 'dayjs'
import dayjsESM from 'dayjs/esm'

let dayjs = !dayjsCJS ? dayjsESM : dayjsCJS

[eikaramba]

same error here too.
Cannot use import statement outside a module

import dayjs from 'dayjs/esm/index.js'
import isToday from 'dayjs/esm/plugin/isToday/index.js'
import isYesterday from 'dayjs/esm/plugin/isYesterday/index.js'

Happens upon npm run build

Strangely enough, when i change everything back and add the .js extension:

import dayjs from 'dayjs'
import isToday from 'dayjs/plugin/isToday.js'
import isYesterday from 'dayjs/plugin/isYesterday.js'

it works

[vhscom]

You can use the following flag to get the build to pass without adding .js to the dayjs/plugin imports:

NODE_OPTIONS='--experimental-specifier-resolution=node' svelte-kit build

This will lead to errors in the production/preview build in some cases but is useful for debugging.

[vhscom]

Dayjs maintainer has created the v2.0 branch: iamkun/dayjs#1281 (comment)

[yadoga]

import dayjs from 'dayjs'

Failed to resolve entry for package "dayjs". 
The package may have incorrect main/module/exports specified in its package.json.

Ideas?

[yadoga]

Re-installed with npm install dayjs --save

Above message now disappears, but this shows up related to the dayjs import:

Uncaught (in promise) SyntaxError: import not found: default

[benmccann]

Please try dayjs 2.0, which has native support for ESM

[vhscom]

When upgrading note that as of dayjs@2.0.0-alpha.2 the following plug-ins are not yet available: weekOfYear, isBetween and isSameOrAfter among others.

[yadoga]

Please try dayjs 2.0, which has native support for ESM

Thanks!
npm install dayjs@2.0.0-alpha.2 worked!

[yadoga]

When upgrading note that as of dayjs@2.0.0-alpha.2 the following plug-ins are not yet available: weekOfYear, isBetween and isSameOrAfter among others.

Thank you @vhscom , do you know of a working plug-in overview for v2?

[vhscom]

There are 2 of 30+ plugins already ported in the dayjs@2.0.0-alpha.2 (as listed here) but the best way to check is to peek inside the NPM package. If you're going to need plug-in support right away you may want to consider working through the peculiarities of Dayjs v1 integration then upgrade when Dayjs 2 hits beta. For Dayjs v1 I personally had success using the bottom pattern shared by @eikaramba above. Example implementation can be found here. Good luck!

[divStar]

Just to sum this up (19.08.2022):
This properly displays the ISO-week number (33 in my case):

<script context="module">
    import dayjs from 'dayjs';
    import isoWeek from 'dayjs/plugin/isoWeek'
    dayjs.extend(isoWeek);

    const isoWeekNumber = dayjs().isoWeek();
</script>

<div>{isoWeekNumber}</div>