Sapper issues

[zakaria-chahboun]

Hi! installed svelte-progressbar by npm Then i use it like this:

<script>
  import ProgressBar from "@okrad/svelte-progressbar";
</script>

  {#if typeof window !== 'undefined'}
    <ProgressBar
      style="thin"
      height={2}
      series={[80]}
      thresholds={[{ till: 50, color: '#800000' }, { till: 100, color: '#008000' }]} />
  {/if}

So when i start the project i get this errors! (i don't use typescript)

✗ client
Package subpath './package.json' is not defined by "exports" in /home/zaki/Documents/MyProjects/sapper/QuizGame-Sapper-Codyframe/node_modules/@okrad/svelte-progressbar/package.json
✔ service worker (3.5s)
✔ server (6.9s)
internal/modules/cjs/loader.js:1047
    throw new ERR_REQUIRE_ESM(filename);
    ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/zaki/Documents/MyProjects/sapper/QuizGame-Sapper-Codyframe/node_modules/@okrad/svelte-progressbar/index.mjs
    at Module.load (internal/modules/cjs/loader.js:1047:11)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at Object.<anonymous> (/home/zaki/Documents/MyProjects/sapper/QuizGame-Sapper-Codyframe/__sapper__/dev/server/server.js:29:35)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'ERR_REQUIRE_ESM'
}
> Server crashed

[zakaria-chahboun]

i use dynamic import like that:

<script>
  import { onMount } from "svelte";
  let ProgressBar;

  onMount(async () => {
    const module = await import("@okrad/svelte-progressbar");
    ProgressBar = module.default;
  });
</script>

{#if typeof window !== 'undefined'}
    <svelte:component this={ProgressBar}/>
{/if}

and i get this error messege:

✔ server (1.1s)
✗ client
Package subpath './package.json' is not defined by "exports" in /home/zaki/Documents/MyProjects/sapper/QuizGame-Sapper-Codyframe/node_modules/@okrad/svelte-progressbar/package.json
> Listening on http://localhost:3000
✔ service worker (512ms)

[benmccann]

You need to add package.json here: https://github.com/okrad/svelte-progressbar/blob/e569c160ba36e57a579e83dacb5c7e1472221140/package.json#L6

[zakaria-chahboun]

@benmccann

in @okrad/svelte-progressbar/package.json i did like that :

  "exports": {
    ".": "./package.json",
    ".": "./index.mjs"
  },

and i get the same error message

[zakaria-chahboun]

i use this component in svelte project with no problems! this is happens only in Sapper (or SSR) is that have a relation with something in rollup?

[benmccann]

It might be related to https://github.com/sveltejs/rollup-plugin-svelte/pull/119?

[zakaria-chahboun]

@benmccann

I create a new template of sapper, with new packages.. So, i get this clean message:

rollup-plugin-svelte: The following packages did not export their `package.json` file so we could not check the `svelte` field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file.

- @okrad/svelte-progressbar

I added this to package.json :

  "exports": {
    ".": "./index.mjs",
    ".": "./package.json"
  },

and everything was okay!

But in my original sapper project nothing is fixed! i think that's because of the version of rollup, this is mine:

    "rollup-plugin-svelte": "^5.0.1",
    "rollup-plugin-terser": "^5.3.0",

and this in the new sapper template (the test):

    "rollup-plugin-svelte": "^6.0.0",
    "rollup-plugin-terser": "^7.0.0"

[zakaria-chahboun]

Yes, it fixed by updating both packages "rollup-plugin-svelte" and "rollup-plugin-terser"

But this issue still open until Mr. @okrad reads this message:

rollup-plugin-svelte: The following packages did not export their package.json file so we could not check the svelte field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file.

• @okrad/svelte-progressbar

Thanks Mr. @benmccann

We have to make this component SSR compatible, So the usage of this component inside Sapper is like that:

<script>
  import { onMount } from "svelte";

  let ProgressBar;
  let series = [
    {
      perc: 10,
      color: "#5AB6DF"
    }
  ];

  onMount(async () => {
    const module = await import("@okrad/svelte-progressbar");
    ProgressBar = module.default;
  });
</script>

  <svelte:component
    this={ProgressBar}
    style="semicircle"
    {series}
    thickness={15}
    width="500px" />

[okrad]

Hi @zakaria-chahboun, I added the package.json export, your issue should be fixed...

I also removed the "legacy" build... It's not needed anymore since I changed the way the progress value label is rendered. This means that the window object isn't used anymore, so the component should be more "sapper friendly"...

Also, thank you @benmccann for your suggestions!

[zakaria-chahboun]

@okrad When i updated the package (1.9.2)

i don't have typescript and i don't use it, so i get this error:

Stack:
Error: Cannot find module 'typescript'

But i install it now, and then this issue is shown!

node_modules/@okrad/svelte-progressbar/src/types.d.ts:28:3 - error TS1036: Statements are not allowed in ambient contexts.

28  };
     ~

✗ client
[svelte-preprocess] Error transforming 'typescript'.

Message:
[svelte-preprocess] Encountered type error

[okrad]

I think I definitely fixed the issues with sapper now... Can you confirm it?

[zakaria-chahboun]

@okrad For svelte project it's working fine! but with Sapper no, This error message is shown up

internal/modules/cjs/loader.js:984
    throw new ERR_REQUIRE_ESM(filename);
    ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/zaki/Desktop/QuizGame-Sapper-Codyframe/node_modules/@okrad/svelte-progressbar/index.mjs
    at Module.load (internal/modules/cjs/loader.js:984:11)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/home/zaki/Desktop/QuizGame-Sapper-Codyframe/__sapper__/dev/server/server.js:29:35)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'ERR_REQUIRE_ESM'

[zakaria-chahboun]

@okrad So i have to load it with the old technic,client side only ( onMout(...) )

[okrad]

Closing, the library is now converted to SvelteKit