Does this not work for sveltekit?

[24jr]

Getting Uncaught (in promise) SyntaxError: The requested module '/node_modules/svelte-qrcode/src/lib/qrcode/index.js' does not provide an export named 'default'

[JonasJs]

@24jr Take a look at this answer, I believe it can help you

https://github.com/sveltejs/kit/issues/928#issuecomment-817319840

[ibis-nreina]

@JonasJs With sveltekit you can create your component library by running

npm run package

Than publish this to NPM . So this component will work in svelte and sveltekit.

No need for extra config in vite

[elron]

This still doesn't work in svelte kit :(

[vexkiddy]

yep.. can confirm that this is till broken in svelte-kit :(

[vexkiddy]

@JonasJs sorry to nudge this, but any chance of getting this working ? really in need of decent QRcodes in Sveltekit :D

[24jr]

@vexkiddy This is component I ended up making for my sveltekit proj. Didnt check rn but I think works

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

  export let codeValue;
  export let squareSize = "100px";

  $: scriptLoaded, setNewQRcode(codeValue);

  let scriptLoaded = false;
  let qrcode;

  onMount(() => {
    let script = document.createElement("script");
    script.src =
      "https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js";
    document.head.append(script);

    script.onload = function () {
      qrcode = new QRCode("qrcode", {
        text: codeValue,
        width: squareSize,
        height: squareSize,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    };
  });

  function setNewQRcode(codeVal) {
    if (qrcode && codeVal) {
      qrcode.clear();
      qrcode.makeCode(codeValue);
    }
  }
</script>

<div id="qrcode" />

<style>
  #qrcode {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: 1.5rem;
    max-width: clamp(10%, 20rem, 100%);
    margin: auto;
    background: white;
  }
</style>

[vexkiddy]

hiya @24jr thanks for this! i've seen this on svelte REPL and it does work, however i don't want to have this external CDN dependancy, would be nice if it was compiled and done at run-time. I'm trying to use the same script but compile it locally, but my svelte-kit knowledge is not good!

[24jr]

@vexkiddy yeah I made this a long time ago and prob based off that repl I don't recall but does look a bit odd so yeah I agree with you there. Idk if I tried other methods that didn't work and settled on this or what

[vexkiddy]

@24jr i hear you! would be great if @JonasJs could just repackage it as suggested so that it'll work with sveltekit :D

[JunsikChoi]

just use qrcode with npm i qrcode works in sveltekit

<script>
import qrcode from 'qrcode';
</script>

{#await qrcode.toDataURL('www.google.com') then qrcode}
  <div class="">
    <img src={qrcode} alt="" />
  </div>
{/await}

[JonasJs]

Hello, I am developing a new version of the package; I will bring updates soon.

[Castlenine]

If you are interested, I've created a package that's compatible with both Svelte and SvelteKit.

https://www.npmjs.com/package/@castlenine/svelte-qrcode