solid-slider icon indicating copy to clipboard operation
solid-slider copied to clipboard

Published 20 hours ago • verified publisher icon davedbase

Error with Astro

Open L1lith opened this issue 3 years ago • 9 comments

Idk if I'm doing this wrong but I'm getting a very vague error

My code

        <SliderProvider>
            <Slider options={{ loop: true }}>
                <Day {...passProps}/>
                <Month {...passProps}/>
                <Year {...passProps}/>
            </Slider>
            <SliderButton prev>Previous</SliderButton>
            <SliderButton next>Next</SliderButton>
        </SliderProvider>

My Error

web.template is not a function
TypeError: web.template is not a function
    at Object.<anonymous> (/Users/Admin/App/node_modules/solid-slider/dist/index/index.common.js:77:33)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/&#8230;

L1lith avatar Jul 27 '22 23:07 L1lith

Hi @L1lith! This is actually a Vite related issue. Try adding this to your astro config:

export default defineConfig({
  integrations: [solid()],
  vite: {
    ssr: {
      noExternal: ['solid-slider'],
    },
  }
});

This is an issue I experience all the time with Vite 2 and I believe it's due to how files are handled for SSR. I don't quite understand it but it's definitely resolved things for me every time.

Let me know if there's anything I can do to improve solid-slider and I hope it serves your needs.

davedbase avatar Jul 28 '22 15:07 davedbase

Hi @L1lith! This is actually a Vite related issue. Try adding this to your astro config:

export default defineConfig({
  integrations: [solid()],
  vite: {
    ssr: {
      noExternal: ['solid-slider'],
    },
  }
});

This is an ssue I experience all the time with Vite 2 and I believe it's due to how files are handled for SSR. I don't quite understand it but it's definitely resolved things for me every time.

Let me know if there's anything I can do to improve solid-slider and I hope it serves your needs.

I tried your solution, I'm now getting a different error

Uncaught (in promise) TypeError: _el$5 is null
    Day http://localhost:3000/src/components/Calendar/Day.jsx:16
    Day http://localhost:3000/src/components/Calendar/Day.jsx:27
    c http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:575
    untrack http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:467
    c http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:571
    runComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:770
    updateComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:755
    devComponent http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:582
    createComponent http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:1336
    get children http://localhost:3000/@fs/Users/Admin/App/src/components/Calendar:65
    Slider http://localhost:3000/node_modules/solid-slider/dist/index/components.jsx:43
    insert http://localhost:3000/node_modules/.vite/deps/chunk-NRNPKWJ5.js?v=a6026167:312
    runComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:770
    updateComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:755
    createRenderEffect http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:221
    insert http://localhost:3000/node_modules/.vite/deps/chunk-NRNPKWJ5.js?v=a6026167:312
    Slider http://localhost:3000/node_modules/solid-slider/dist/index/components.jsx:43
    Slider http://localhost:3000/node_modules/solid-slider/dist/index/components.jsx:46
    c http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:575
    untrack http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:467
    c http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:571
    runComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:770
    updateComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:755
    devComponent http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:582
    createComponent http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:1336
    get children http://localhost:3000/@fs/Users/Admin/App/src/components/Calendar:59
    get children http://localhost:3000/node_modules/solid-slider/dist/index/components.jsx:28
    res http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:1101
    runComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:770
    updateComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:755
    createMemo http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:256
    children http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:641
    res http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:1101
    untrack http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:467
    provider http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:1097
    runComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:770
    updateComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:755
    createComputed http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:214
    provider http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:1097
    c http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:575
    untrack http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:467
    c http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:571
    runComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:770
    updateComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:755
    devComponent http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:582
    createComponent http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:1336
    SliderProvider http://localhost:3000/node_modules/solid-slider/dist/index/components.jsx:22
    c http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:575
    untrack http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:467
    c http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:571
    runComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:770
    updateComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:755
    devComponent http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:582
    createComponent http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:1336
    Calendar http://localhost:3000/@fs/Users/Admin/App/src/components/Calendar:57
    Calendar http://localhost:3000/@fs/Users/Admin/App/src/components/Calendar:82
    c http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:575
    untrack http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:467
    c http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:571
    runComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:770
    updateComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:755
    devComponent http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:582
    createComponent http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:1336
    client_default http://localhost:3000/@id/@astrojs/solid-js/client.js:35
    render http://localhost:3000/node_modules/.vite/deps/chunk-NRNPKWJ5.js?v=a6026167:180
    updateFn http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:172
    runUpdates http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:880
    createRoot http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:181
    render http://localhost:3000/node_modules/.vite/deps/chunk-NRNPKWJ5.js?v=a6026167:178
    hydrate$1 http://localhost:3000/node_modules/.vite/deps/chunk-NRNPKWJ5.js?v=a6026167:344
    hydrate http://localhost:3000/node_modules/.vite/deps/chunk-NRNPKWJ5.js?v=a6026167:689
    client_default http://localhost:3000/@id/@astrojs/solid-js/client.js:35
    hydrate http://localhost:3000/:83
    <anonymous> http://localhost:3000/:83

I also noticed if I removed my own custom components and passed something simple I get a different error

New code

        <SliderProvider>
            <Slider options={{ loop: true }}>
                <div>1</div>
                <div>2</div>
            </Slider>
            <SliderButton prev>Previous</SliderButton>
            <SliderButton next>Next</SliderButton>
        </SliderProvider>

New error

Uncaught TypeError: n.style is undefined
    s http://localhost:3000/node_modules/keen-slider/keen-slider.es.js?v=a6026167:1
    o http://localhost:3000/node_modules/keen-slider/keen-slider.es.js?v=a6026167:1
    o http://localhost:3000/node_modules/keen-slider/keen-slider.es.js?v=a6026167:1
    r http://localhost:3000/node_modules/keen-slider/keen-slider.es.js?v=a6026167:1
    r http://localhost:3000/node_modules/keen-slider/keen-slider.es.js?v=a6026167:1
    l http://localhost:3000/node_modules/keen-slider/keen-slider.es.js?v=a6026167:1
    f http://localhost:3000/node_modules/keen-slider/keen-slider.es.js?v=a6026167:1
    emit http://localhost:3000/node_modules/keen-slider/keen-slider.es.js?v=a6026167:1
    emit http://localhost:3000/node_modules/keen-slider/keen-slider.es.js?v=a6026167:1
    k http://localhost:3000/node_modules/keen-slider/keen-slider.es.js?v=a6026167:1
    k http://localhost:3000/node_modules/keen-slider/keen-slider.es.js?v=a6026167:1
    k http://localhost:3000/node_modules/keen-slider/keen-slider.es.js?v=a6026167:1
    create http://localhost:3000/node_modules/solid-slider/dist/index/primitive.js:38
    untrack http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:467
    onMount http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:493
    runComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:770
    updateComputation http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:755
    runTop http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:859
    runUserEffects http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:984
    completeUpdates http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:936
    batch http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:448
    completeUpdates http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:935
    runUpdates http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:881
    createRoot http://localhost:3000/node_modules/.vite/deps/chunk-DPK7WM4J.js?v=a6026167:181
    render http://localhost:3000/node_modules/.vite/deps/chunk-NRNPKWJ5.js?v=a6026167:178
    hydrate$1 http://localhost:3000/node_modules/.vite/deps/chunk-NRNPKWJ5.js?v=a6026167:344
    hydrate http://localhost:3000/node_modules/.vite/deps/chunk-NRNPKWJ5.js?v=a6026167:689
    client_default http://localhost:3000/@id/@astrojs/solid-js/client.js:35
    hydrate http://localhost:3000/:83
    <anonymous> http://localhost:3000/:83
    async* http://localhost:3000/:83
    childrenConnectedCallback http://localhost:3000/:83
    connectedCallback http://localhost:3000/:83
    connectedCallback http://localhost:3000/:83
    LifecycleConnectedCallback* http://localhost:3000/:83

L1lith avatar Jul 29 '22 17:07 L1lith

Interesting this is a new one for me too! Is there any chance I could get you to supply me a repro? Something on Stackblitz so I can hack away at it quickly? :-)

davedbase avatar Jul 30 '22 12:07 davedbase

Hi @davedbase !

I came across the same issue, but with Solid-start.

I've setup a repo for you to reproduce https://github.com/jchatard/solid-slider-issue-6

I'm using the latest Solid start (alpha99) I think.

Let me know if I can be of any help.

Thank you! Jérémy

jchatard avatar Aug 11 '22 21:08 jchatard

Any update on this? I'm getting the same issue on Solid-start 0.1.0-alpha.99.

cohenerickson avatar Aug 17 '22 23:08 cohenerickson

@cohenerickson @L1lith my apologies for the delay on tackling this. I've managed to get this fully operational on SolidStart which is Vite-powered in the same way Astro is. Can you please try with solid-slider 1.3.9 on the latest Astro once? If the latest release isn't working I can hop into their Discord and get some support for us.

Thanks for all your patience!

davedbase avatar Sep 14 '22 15:09 davedbase

Hi! I'm using Astro + Solid-slider for creating my blog, and it looks like the slider is showing all slides at the same time. Here's a sample repo: https://github.com/Je12emy/blog

image

image

Je12emy avatar Sep 19 '22 21:09 Je12emy

@Je12emy I suspect this is because the CSS isn't being loaded. It seems to be missing in https://github.com/Je12emy/blog/blob/solid-carousel/src/components/Carousel.tsx

import "solid-slider/slider.css";

Try adding that and let me know how it goes =)

davedbase avatar Sep 22 '22 14:09 davedbase

@davedbase I faced the same problem on astro; but after adding the css import everything is working! Thanks a lot

marchellodev avatar Nov 01 '22 12:11 marchellodev