search

ryu-man / svelte-fui

An implementation of Microsoft Fluent UI v9 for Svelte framework
https://svelte-fui.vercel.app
MIT License
18 stars 0 forks source link

Unable to run sample code #36

Open yprism opened 1 month ago

yprism commented 1 month ago

I followed the instruction to install: pnpm install @svelte-fui/core

Then pasted in the following:

<script>
    import { App, Button } from '@svelte-fui/core';
</script>

<App>
    <button>Hello World!</button>
</App>

Then run the app, and I got this error: Failed to load url ../../../../theme/src/s (resolved id: ../../../../theme/src/s)

Error: Failed to load url ../../../../theme/src/s (resolved id: ../../../../theme/src/s) in C:/Repos/xx/trs/nodemodules/.pnpm/@svelte-fui+core@1.0.0-alpha.1@floating-ui+dom@1.6.11@iconify-json+fluent@1.2.1@svelte-fui_m52b6h3cel4nijx25c27hvnr7q/node_modules/@svelte-fui/core/dist/app/root.svelte. Does the file exist? at loadAndTransform (file:///C:/Repos/xx/trs/nodemodules/.pnpm/vite@5.4.7@types+node@22.5.5_sass@1.79.3/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:51857:17) at async instantiateModule (file:///C:/Repos/xx/trs/nodemodules/.pnpm/vite@5.4.7@types+node@22.5.5_sass@1.79.3/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:52816:44) { code: 'ERR_LOAD_URL' }

Also tried this on an empty project, still the same error.

musagenius345 commented 1 month ago

Same issue both on my machine and on the Svelte REPL. using the exact same sample code and running a server gives these errors: `log VITE v5.4.7 ready in 688 ms

➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help ✘ [ERROR] Could not resolve "clsx"

node_modules/.pnpm/@svelte-fui+core@1.0.0-alpha.1_@floating-ui+dom@1.6.11_@iconify-json+fluent@1.2.1_@svelte-fui_iym245zhe7fdhmfqfdeshsy3bq/node_modules/@svelte-fui/core/dist/internal/index.js:1:21:
  1 │ import { clsx } from 'clsx';
    ╵                      ~~~~~~

You can mark the path "clsx" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "virtual:icons/fluent/error-circle-24-filled"

node_modules/.pnpm/@svelte-fui+core@1.0.0-alpha.1_@floating-ui+dom@1.6.11_@iconify-json+fluent@1.2.1_@svelte-fui_iym245zhe7fdhmfqfdeshsy3bq/node_modules/@svelte-fui/core/dist/field/field-message-error.svelte:29:30:
  29 │ import ErrorCircleFilled from "virtual:icons/fluent/error-circle-24-filled";
     ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "virtual:icons/fluent/error-circle-24-filled" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "virtual:icons/fluent/chevron-down-24-regular"

node_modules/.pnpm/@svelte-fui+core@1.0.0-alpha.1_@floating-ui+dom@1.6.11_@iconify-json+fluent@1.2.1_@svelte-fui_iym245zhe7fdhmfqfdeshsy3bq/node_modules/@svelte-fui/core/dist/dropdown/dropdown-arrow.svelte:28:31:
  28 │ import ChevronDownRegular from 'virtual:icons/fluent/chevron-down-24-regular';
     ╵                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "virtual:icons/fluent/chevron-down-24-regular" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "virtual:icons/fluent/checkmark-24-filled"

node_modules/.pnpm/@svelte-fui+core@1.0.0-alpha.1_@floating-ui+dom@1.6.11_@iconify-json+fluent@1.2.1_@svelte-fui_iym245zhe7fdhmfqfdeshsy3bq/node_modules/@svelte-fui/core/dist/checkbox/checkbox.svelte:33:28:
  33 │ import CheckmarkFilled from "virtual:icons/fluent/checkmark-24-filled";
     ╵                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "virtual:icons/fluent/checkmark-24-filled" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "virtual:icons/fluent/info-24-filled"

node_modules/.pnpm/@svelte-fui+core@1.0.0-alpha.1_@floating-ui+dom@1.6.11_@iconify-json+fluent@1.2.1_@svelte-fui_iym245zhe7fdhmfqfdeshsy3bq/node_modules/@svelte-fui/core/dist/field/field-message-info.svelte:29:23:
  29 │ import InfoFilled from "virtual:icons/fluent/info-24-filled";
     ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "virtual:icons/fluent/info-24-filled" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "virtual:icons/fluent/warning-24-filled"

node_modules/.pnpm/@svelte-fui+core@1.0.0-alpha.1_@floating-ui+dom@1.6.11_@iconify-json+fluent@1.2.1_@svelte-fui_iym245zhe7fdhmfqfdeshsy3bq/node_modules/@svelte-fui/core/dist/field/field-message-warning.svelte:29:26:
  29 │ import WarningFilled from "virtual:icons/fluent/warning-24-filled";
     ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "virtual:icons/fluent/warning-24-filled" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "virtual:icons/fluent/checkmark-circle-24-filled"

node_modules/.pnpm/@svelte-fui+core@1.0.0-alpha.1_@floating-ui+dom@1.6.11_@iconify-json+fluent@1.2.1_@svelte-fui_iym245zhe7fdhmfqfdeshsy3bq/node_modules/@svelte-fui/core/dist/field/field-message-success.svelte:29:34:
  29 │ import CheckmarkCircleFilled from "virtual:icons/fluent/checkmark-circle-24-filled";
     ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "virtual:icons/fluent/checkmark-circle-24-filled" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "tailwind-merge"

node_modules/.pnpm/@svelte-fui+core@1.0.0-alpha.1_@floating-ui+dom@1.6.11_@iconify-json+fluent@1.2.1_@svelte-fui_iym245zhe7fdhmfqfdeshsy3bq/node_modules/@svelte-fui/core/dist/internal/index.js:2:36:
  2 │ import { extendTailwindMerge } from 'tailwind-merge';
    ╵                                     ~~~~~~~~~~~~~~~~

You can mark the path "tailwind-merge" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "../../../../theme/src/s"

node_modules/.pnpm/@svelte-fui+core@1.0.0-alpha.1_@floating-ui+dom@1.6.11_@iconify-json+fluent@1.2.1_@svelte-fui_iym245zhe7fdhmfqfdeshsy3bq/node_modules/@svelte-fui/core/dist/app/root.svelte:39:30:
  39 │ import { webLightTheme } from "../../../../theme/src/s";
     ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Could not resolve "virtual:icons/fluent/chevron-right-24-regular"

node_modules/.pnpm/@svelte-fui+core@1.0.0-alpha.1_@floating-ui+dom@1.6.11_@iconify-json+fluent@1.2.1_@svelte-fui_iym245zhe7fdhmfqfdeshsy3bq/node_modules/@svelte-fui/core/dist/accordion/accordion-header.svelte:46:29:
  46 │ import ChevronRightIcon from "virtual:icons/fluent/chevron-right-24-regular";
     ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "virtual:icons/fluent/chevron-right-24-regular" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "gsap"

node_modules/.pnpm/@svelte-fui+core@1.0.0-alpha.1_@floating-ui+dom@1.6.11_@iconify-json+fluent@1.2.1_@svelte-fui_iym245zhe7fdhmfqfdeshsy3bq/node_modules/@svelte-fui/core/dist/actions/animation.js:1:21:
  1 │ import { gsap } from 'gsap';
    ╵                      ~~~~~~

You can mark the path "gsap" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "../../../../tailwindcss/src"

node_modules/.pnpm/@svelte-fui+core@1.0.0-alpha.1_@floating-ui+dom@1.6.11_@iconify-json+fluent@1.2.1_@svelte-fui_iym245zhe7fdhmfqfdeshsy3bq/node_modules/@svelte-fui/core/dist/internal/index.js:6:48:
  6 │ import { tailwindcssConfig, defaultTheme } from '../../../../tailwindcss/src';
    ╵                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

`. I use WSL if it helps solve the problem.

ryu-man commented 3 weeks ago

@yprism this should be fixed in the latest release, you can install 

npm i @svelte-fui/core@latest

// or

pnpm i @svelte-fui/core@latest

add the App component at the root of your app, and build your app inside

ryu-man commented 3 weeks ago

You can also enable dark mode if you are interested you the following code

// You need to install '@svelte-fui/themes' first

<script>
  import { webLightTheme, webDarkTheme } from '@svelte-fui/themes';
  import { App, Button } from '@svelte-fui/core';

    let theme = webLightTheme;

        // this code will listen for browser's color scheme and switch the theme, and offcourse you can do it programatically based on your requirements
    onMount(() => {
        function handler(schemeMedia) {
            theme = schemeMedia.matches ? webLightTheme : webDarkTheme;
        }

        const schemeMedia = matchMedia('(prefers-color-scheme: light)');

        schemeMedia.addEventListener('change', handler);

        theme = schemeMedia.matches ? webLightTheme : webDarkTheme;

        return () => {
            schemeMedia.removeEventListener('change', handler);
        };
    });
</script>

<App {theme}>
    <Button>Fluent UI for Svelte</Button>
</App>
ryu-man commented 3 weeks ago

@musagenius345 the issue was that the dependencies were not specified so the bundler was unable to resolve them