Error code 500: Cannot use import statement outside a module

[George713]

Hey Metonym,

one sweet package you wrote there! I'm tinkering with it but for some reason I always end up having issues with the dayjs module. I'm importing within the module context ala

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

but always get the following error, when I first navigate to a page using it:

23:03:04 [vite] Error when evaluating SSR module /node_modules/svelte-time/src/dayjs.js:
C:\Users\froeb\Desktop\blog\frontend\node_modules\dayjs\esm\index.js:1
import * as C from './constant';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at nodeRequire (C:\Users\froeb\Desktop\blog\frontend\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68211:17)
    at ssrImport (C:\Users\froeb\Desktop\blog\frontend\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68164:20)
    at eval (/node_modules/svelte-time/src/dayjs.js:3:31) (x2)

Any idea?

Best,
George

[metonym]

Update Aug. 24, 2021

It should not be required to optimize "dayjs" if using a vite-powered set-up (e.g., SvelteKit or @sveltejs/vite-plugin-svelte).

---

Hello @George713 , try excluding dayjs from the dependencies for vite to optimize. I'm assuming you're using a SvelteKit set-up:

// svelte.config.js
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    vite: {
      optimizeDeps: {
        exclude: ['dayjs']
      }
    }
  }
};

export default config;

Hope this helps.

[rvrm]

Hi @metonym , commenting due to same issue here with SvelteKit. optimizeDeps did not fix it so far. Using the latest Node v16.3.0 btw.

To further clarify: Using svelte-time on its own works! Importing dayjs for further i18n modules then fails.

import 'dayjs/esm/locale/de'
import dayjs from 'dayjs/esm'
dayjs.locale('de')

=> import * as C from './constant';
   ^^^^^^

SyntaxError: Cannot use import statement outside a module

[metonym]

@rvrm Interesting. Would you mind sharing your svelte.config.js?

This is my set-up:

package.json

@sveltejs/kit@next resolved to version 1.0.0-next.113.

{
  "private": true,
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview"
  },
  "devDependencies": {
    "@sveltejs/kit": "next",
    "svelte": "^3.34.0",
    "svelte-time": "^0.3.0"
  },
  "type": "module"
}

svelte.config.js

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: "#svelte",
    vite: {
      optimizeDeps: {
        exclude: ["dayjs"],
      },
    },
  },
};

export default config;

src/routes/index.svelte

<script context="module">
  import "dayjs/esm/locale/de";
  import dayjs from "dayjs/esm";
  dayjs.locale("de");
</script>

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

<Time />

Output

In my browser, "Juni 07, 2021" is rendered.

[metonym]

I also cleared the cache and produced the same result.

rm -rf .svelte-kit node_modules/.vite
yarn && yarn dev

[rvrm]

I mistakenly npm installed dayjs on its own. Now realized this step is not necessary. Uninstalling the package and simply import the plugins now worked as intended. Thank you!