Can't import dayjs on dev server #699

khromov · 2021-03-26T13:32:35Z

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.

The text was updated successfully, but these errors were encountered:

benmccann · 2021-03-26T13:46:21Z

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

khromov · 2021-03-26T13:54:51Z

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 · 2021-03-27T14:31:38Z

@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 · 2021-03-28T18:15:26Z

@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 · 2021-06-06T19:52:32Z

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

benmccann · 2021-06-11T13:12:13Z

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 · 2021-07-15T07:41:24Z

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 · 2021-07-15T12:15:15Z

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 · 2022-04-04T13:33:33Z

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 · 2022-04-21T13:22:21Z

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

yadoga · 2022-05-03T22:58:21Z

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 · 2022-05-03T23:08:36Z

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 · 2022-05-04T03:41:27Z

Please try dayjs 2.0, which has native support for ESM

vhscom · 2022-05-04T06:17:46Z

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 · 2022-05-04T06:50:14Z

Please try dayjs 2.0, which has native support for ESM

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

yadoga · 2022-05-04T06:51:13Z

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 · 2022-05-04T06:59:12Z

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 · 2022-08-19T16:42:12Z

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>

khromov closed this as completed Mar 26, 2021

Conduitry mentioned this issue Mar 26, 2021

dayjs default import results in error #704

Closed

vhscom mentioned this issue Apr 4, 2022

Cannot find module 'dayjs/plugin/timezone' in sub-module iamkun/dayjs#1167

Closed

benmccann mentioned this issue May 4, 2022

🌟 Day.js 2.0 alpha preview is available iamkun/dayjs#1879

Closed

imbolc mentioned this issue May 15, 2022

SvelteKit build fails on dayjs ES module import not supported metonym/svelte-time#9

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't import dayjs on dev server #699

Can't import dayjs on dev server #699

khromov commented Mar 26, 2021 •

edited

Loading

benmccann commented Mar 26, 2021

khromov commented Mar 26, 2021 •

edited

Loading

NoelJacob commented Mar 27, 2021

khromov commented Mar 28, 2021 •

edited

Loading

rvrm commented Jun 6, 2021

benmccann commented Jun 11, 2021

autr commented Jul 15, 2021

eikaramba commented Jul 15, 2021

vhscom commented Apr 4, 2022

vhscom commented Apr 21, 2022

yadoga commented May 3, 2022 •

edited

Loading

yadoga commented May 3, 2022

benmccann commented May 4, 2022

vhscom commented May 4, 2022

yadoga commented May 4, 2022

yadoga commented May 4, 2022

vhscom commented May 4, 2022 •

edited

Loading

divStar commented Aug 19, 2022 •

edited

Loading

Can't import dayjs on dev server #699

Can't import dayjs on dev server #699

Comments

khromov commented Mar 26, 2021 • edited Loading

benmccann commented Mar 26, 2021

khromov commented Mar 26, 2021 • edited Loading

NoelJacob commented Mar 27, 2021

khromov commented Mar 28, 2021 • edited Loading

rvrm commented Jun 6, 2021

benmccann commented Jun 11, 2021

autr commented Jul 15, 2021

eikaramba commented Jul 15, 2021

vhscom commented Apr 4, 2022

vhscom commented Apr 21, 2022

yadoga commented May 3, 2022 • edited Loading

yadoga commented May 3, 2022

benmccann commented May 4, 2022

vhscom commented May 4, 2022

yadoga commented May 4, 2022

yadoga commented May 4, 2022

vhscom commented May 4, 2022 • edited Loading

divStar commented Aug 19, 2022 • edited Loading

khromov commented Mar 26, 2021 •

edited

Loading

khromov commented Mar 26, 2021 •

edited

Loading

khromov commented Mar 28, 2021 •

edited

Loading

yadoga commented May 3, 2022 •

edited

Loading

vhscom commented May 4, 2022 •

edited

Loading

divStar commented Aug 19, 2022 •

edited

Loading