Sveltekit/TS, "500: Import not found: default" - config issue?

[nimmolo]

Do i need to change something in my config to use InfiniteGrid with Sveltekit and Typescript? I'm getting this error importing MasonryInfiniteGrid into my layout.

Error message in dev is 500: import not found: default

Error message in build is 'default' is not exported by node_modules/.pnpm/@egjs+svelte-infinitegrid@4.1.1/node_modules/@egjs/svelte-infinitegrid/src/index.js, imported by src/routes/observations/index.svelte

However, Typescript/ESlint seems to recognize the export type of MasonryInfiniteGrid when i hover. (alias) class MasonryInfiniteGrid<T extends GridOptions> import MasonryInfiniteGrid

I just reinstalled InfiniteGrid with pnpm, and my package.json is like this:

{
  "name": "project-name",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev --port 3001",
    "etc": "other-scripts"
  }
  "devDependencies": {
    "@apollo/client": "^3.5.4",
    "other-dev-dependencies": "^1.2.3"
  }
  "type": "module",
  "dependencies": {
    "@egjs/svelte-infinitegrid": "^4.1.1",
    "other-dependencies": "^1.2.3"
}

Here is the component:

<script lang="ts">
  import Item from '$lib/components/observation/Item.svelte';
  import Filter from '$lib/components/observation/Filter.svelte';
  import MasonryInfiniteGrid from '@egjs/svelte-infinitegrid';
  import { onMount } from 'svelte';
  let filter, pageInfo, items;
</script>
...
<MasonryInfiniteGrid
  class="grid"
  gap={5}
  {items}
  on:requestAppend={({ detail: e }) => {
  ...
>

If I import from the file in /grids/ directly, I still get the error:

  import MasonryInfiniteGrid from '@egjs/svelte-infinitegrid/src/grids/MasonryInfiniteGrid';

[daybrush]

@nimmolo

Use this exports type.

import { MasonryInfiniteGrid }  from '@egjs/svelte-infinitegrid';

[nimmolo]

Hi @daybrush thanks, I tried that too. TS/eslint also complains about that

import { MasonryInfiniteGrid }  from '@egjs/svelte-infinitegrid';

Module '"@egjs/svelte-infinitegrid"' has no exported member 'MasonryInfiniteGrid'. Did you mean to use 'import MasonryInfiniteGrid from "@egjs/svelte-infinitegrid"' instead?ts(2614)

But - I noticed that my install does not have typescript MasonryInfiniteGrid.ts files in the @egjs/svelte-infinitegrid/src/grids folder, I have js MasonryInfiniteGrid.js files. Did I install incorrectly? Maybe because i used pnpm?

When I look in this GitHub repo, I see you have.ts files in /grids/ and the content is different. But i don't understand, the install process may have changed them for some reason?

[daybrush]

@nimmolo

Oh, Sorry. The type was defined incorrectly. Test @egjs/svelte-infinitegrid@4.1.2-beta.0

[nimmolo]

Thanks! @daybrush - I will try after the holiday, i'm not at my work computer this week. Will reply as soon as im back.

Its ok to use pnpm to install it?

On Dec 23, 2021, at 8:58 PM, Daybrush (Younkue Choi) @.***> wrote:

@nimmolo

Oh, Sorry. The type was defined incorrectly. Test @@.***

— Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you were mentioned.

[daybrush]

@nimmolo

pnpm should be fine.

[nimmolo]

@daybrush Thank you!! Your new beta version fixed the import error.