Skip to content

SvelteKit / Vite support (works out of the box now, site and examples will be updated soon) #41

@techniq

Description

@techniq

I recently moved to the latest SvelteKit based on Vite (1.0.0-next.50) and Layer Cake throws an error when imported:

500
Unexpected token 'export'

/Users/techniq/Documents/Development/playground/svelte-kit-layercake/node_modules/layercake/src/index.js:1
export { default as LayerCake } from './LayerCake.svelte';
^^^^^^

SyntaxError: Unexpected token 'export'
    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 (/Users/techniq/Documents/Development/playground/svelte-kit-layercake/node_modules/vite/dist/node/chunks/dep-efe32886.js:68907:17)
    at ssrImport (/Users/techniq/Documents/Development/playground/svelte-kit-layercake/node_modules/vite/dist/node/chunks/dep-efe32886.js:68865:20)
    at eval (/src/lib/Chart.svelte:7:31)

It looks like it's being detected as commonjs instead of esm. I'm not 100% sure if the issue is with Layer Cake, Vite (as it worked with older SvelteKit based on Snowpack), SvelteKit recently adding type: module to package.json (I was on an older SvelteKit/Snowpack before this change) or something else.

I see Layer Cake has main and module defined in package.json, but not an export map which from my limited understanding is the best tell for ESM for Vite/Snowpack/etc.

I've created a repo to demonstrate the issue.

I just ran npm init svelte@next, added layercake and a simple chart example. When I initially ran this example last night the issue didn't present itself, but when I tried to identify what else was different between this example and my project just now, it show'd up. I've cleared and re-installed node_modules as well as the .svelte directly (trying to clear any cache) but the issue persists. I'm using node v14.14.0.

Metadata

Metadata

Assignees

No one assigned

    Labels

    advisoryNotice of something

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions