kit: Can't import dayjs on dev server

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.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 18 (3 by maintainers)

Most upvoted comments

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

eikaramba on Jul 15, 2021

@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.

NoelJacob on Mar 27, 2021

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";

khromov on Mar 26, 2021

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!

vhscom on May 4, 2022

@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!

khromov on Mar 28, 2021