question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Breaks .svelte modules

See original GitHub issue

I have a svelte module:

<script context="module">
  ...
  export { something }
</script>

<script>
  ...
</script>

<h1>hello<h1>

Whenever I add svelte-windicss-preprocess, I can no longer import the module. Instead the bundler hangs. Have tried Rollup and Snowpack.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:19 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
jakobrosenbergcommented, Mar 5, 2021

Here’s the component

<script context="module">
  import { writable, get } from "svelte/store";
  import { page } from "@roxi/routify";

  const languages = {
    en: { short: "en", long: "english", default: true },
    fr: { short: "fr", long: "french" },
    de: { short: "de", long: "german" },
  };

  // let's use a store for reactivity
  const language = writable(languages["en"]);

  const urlTransform = {
    apply: (url) => {
      /**
       * external URL
       * if the selected language is not the default language,
       * we want to use the language as an URL prefix
       */
      const lang = get(language);
      const prefix = !lang.default ? `/${lang.short}` : "";
      return prefix + url;
    },
    remove: (url) => {
      /**
       * internal URL
       * if the first url fragment matches a language,
       * we're gonna strip the fragment
       */
      const [, urlPrefix, ...rest] = url.split("/");
      if (languages[urlPrefix]) {
        language.set(languages[urlPrefix]);
        return [, ...rest].join("/");
      } else return url;
    },
  };

  export { languages, language, urlTransform };
</script>

<script>
  import { goto, url } from "@roxi/routify";
  const handleChange = () => {
    $goto($page.path);
  };
</script>

<select bind:value={$language} on:change={handleChange}>
  {#each Object.values(languages) as lang}
    <option value={lang}>{lang.long}</option>
  {/each}
</select>
0reactions
alexanderniebuhrcommented, Mar 9, 2021

If you find any issue please let me know.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Modules • Docs • SvelteKit
SvelteKit analyses your app during the build step by running it. During this process, building is true . This also applies during prerendering....
Read more >
Sveltekit Braking changes: Routing, Load Function and new ...
This article going to explain all the breaking changes sveltekit just ... handling from now on there will be no `script` tag with...
Read more >
Svelte's module scripts explained - codechips
Let's break it down and start with the basics. First, we create a simple Svelte component that has a module script block.
Read more >
Breaking changes in SvelteKit, August 2022 - Josh Collinsworth
SvelteKit introduced breaking changes to its routing and data ... in a page's Svelte file, with a context="module" attribute separating that ...
Read more >
Migrating Breaking Changes in SvelteKit - Netlify
Before, the load function lived in the context="module" script tag inside of the .svelte file or the data for the route was magically ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found