mizark
mizark
PostsComments
SSolidJS
Created by mizark on 8/5/2024 in #support
CSS dropping on navigation to nested [id] route
I am navigating using <A> and my css drops. It only drops if I navigate to the route, if I am at the route and do a hard refresh the css loads fine. Not sure what is causing it there are no error messages anywhere I have tried it on all browsers same behavior.
3 replies
SSolidJS
Created by mizark on 8/3/2024 in #support
<For> throws Cannot access 'product2' before initialization
I am wrapping my component in a show on product().name and have used debugger to step through and verify the Component is not run until product().name is set, yet I am getting this error originating from the <For> below: 
            <For each={product().imgs} fallback="loading">
              {(item, index) => {
                const product = product();
                const url = item.url;
                const isFirst = index() == 0;
                const isLast = index() == product.imgs.length - 1;

                return (
                  <img
                    class="product-sub-imgs"
                    src={item.url}
                    onMouseEnter={() => handleChangeMainImg(item.url)}
                    style={{
                      border: (
                        mainSrc()
                          ? mainSrc() === item.url
                          : product.main_img.url === item.url
                      )
                        ? "solid black 2px"
                        : "solid white 2px",
                      "margin-left": isFirst && "0px",
                      "margin-right": isLast && "0px",
                      cursor: "pointer",
                    }}
                  />
                );
              }}
            </For>
            <For each={product().imgs} fallback="loading">
              {(item, index) => {
                const product = product();
                const url = item.url;
                const isFirst = index() == 0;
                const isLast = index() == product.imgs.length - 1;

                return (
                  <img
                    class="product-sub-imgs"
                    src={item.url}
                    onMouseEnter={() => handleChangeMainImg(item.url)}
                    style={{
                      border: (
                        mainSrc()
                          ? mainSrc() === item.url
                          : product.main_img.url === item.url
                      )
                        ? "solid black 2px"
                        : "solid white 2px",
                      "margin-left": isFirst && "0px",
                      "margin-right": isLast && "0px",
                      cursor: "pointer",
                    }}
                  />
                );
              }}
            </For>
product().imgs are loaded and can never reach a break point within the For child function so breaks before I can check there. Any ideas?
7 replies
SSolidJS
Created by mizark on 8/2/2024 in #support
<For> throws hydradtion error with a <span> as fallback element
This fails 
    <>
      <div id="products-container">
        <For each={props.products()} fallback={<span>loading</span>}>
          {(product, i) => {
            debugger;
            return (
              <ProductItem product={product} key={`${i()}-${product.id}`} />
            );
          }}
          {/* {(product, i) => (
            <div style={{ background: "red" }}>product {i()}</div>
          )} */}
        </For>
      </div>
    </>
    <>
      <div id="products-container">
        <For each={props.products()} fallback={<span>loading</span>}>
          {(product, i) => {
            debugger;
            return (
              <ProductItem product={product} key={`${i()}-${product.id}`} />
            );
          }}
          {/* {(product, i) => (
            <div style={{ background: "red" }}>product {i()}</div>
          )} */}
        </For>
      </div>
    </>
This works 
    <>
      <div id="products-container">
        <For each={props.products()} fallback="loading">
          {(product, i) => {
            debugger;
            return (
              <ProductItem product={product} key={`${i()}-${product.id}`} />
            );
          }}
          {/* {(product, i) => (
            <div style={{ background: "red" }}>product {i()}</div>
          )} */}
        </For>
      </div>
    </>
    <>
      <div id="products-container">
        <For each={props.products()} fallback="loading">
          {(product, i) => {
            debugger;
            return (
              <ProductItem product={product} key={`${i()}-${product.id}`} />
            );
          }}
          {/* {(product, i) => (
            <div style={{ background: "red" }}>product {i()}</div>
          )} */}
        </For>
      </div>
    </>
Seems like a bug but maybe I am doing something wrong?
4 replies
SSolidJS
Created by mizark on 4/21/2023 in #support
Signal set from localStorage not updating
I am setting a signal like: 
const initialCart = isServer
    ? data.userData().cart.products
    : localStorage.localCart
    ? JSON.parse(localStorage.localCart)
    : [];
  const [cart, setCart] = createSignal(initialCart);
const initialCart = isServer
    ? data.userData().cart.products
    : localStorage.localCart
    ? JSON.parse(localStorage.localCart)
    : [];
  const [cart, setCart] = createSignal(initialCart);
I then pass the signal into context and use it another file in this function: 
const itemsCount = () => {
    const clen = cart().length;
    const c = cart();
    const clen2 = cart;
    let sum = 0;
    if (c) {
      c.forEach((p, i) => {
        sum += p.count;
      });
    }
    return sum;
  };
const itemsCount = () => {
    const clen = cart().length;
    const c = cart();
    const clen2 = cart;
    let sum = 0;
    if (c) {
      c.forEach((p, i) => {
        sum += p.count;
      });
    }
    return sum;
  };
I then return it as is standard: 
    <span>
        {itemsCount()}
      </span>
    <span>
        {itemsCount()}
      </span>
For some reason it does not update if the ternary is set to localStorage although it will update if I change itemsCount() to a signal that I set to itemsCount() in onMount or createEffectif I use createRenderEffect to set the signal, cart()will have the desired value and itemsCount() the desired return but it just does not update the DOM. I know the server is setting the initial page load and I expect it to load as 0 but I would would expect there to be a way for me on the client to update the DOM before mount and avoid the flash to the updated value. Any ideas if I can solve this or if solvable with source of data being localStorage?
1 replies
SSolidJS
Created by mizark on 4/19/2023 in #support
Noob question: createRenderEffect vs createEffect or onMount
This is mainly a dev experience question. I feel like I understand the differences between these but honestly I just find myself always opting to use createRenderEffect over onMount or createEffect and unsure what scenario I would use them over createRenderEffect. Perhaps the wrong way to think about it but I usually think "createRenderEffect runs before the others and I want my code to be ran as soon possible so I will use this over the others". What is the right way to think about createRenderEffect and why would I opt to use onMount or createEffect over it. (I know createRenderEffect vs createEffect is more of the question as onMount is technically more explicitly different but curious nonetheless why)
5 replies
SSolidJS
Created by mizark on 4/16/2023 in #support
Noob question: Axios vs Fetch
I did not see anything in the docs explaining fetch. Does fetch have some built in "magic" that makes it preferable to use over Axios or another request package?
10 replies
SSolidJS
Created by mizark on 4/16/2023 in #support
routedata not updating on A tag navigation
I am navigating with a standard solid-start imported <A>. When <A> is clicked routdata is not refetched. I tried putting a refetchRoutData in a createdRenderEffect on useLocation().pathname change but it gives me strange lifecycle errors about code needing to be wrapped in a isServer. I also see some similar examples in here regarding my issue and they are using keys to solve it but I am not sure I understand that because my route change does not include params it is just a standard route change like "/this" -> "/that". Have been stuck on this for a while any help appreciated!
3 replies
SSolidJS
Created by mizark on 2/2/2023 in #support
Network issues with Solid
Running a solid SPA on localhost with backend server, using bun vite I am running all this in wsl. I am having strange issues with my axios api calls to my backend returning errors after certain ux paths and app pretty much freezing on hard refresh. If I rerun the server and frontend it will work fine until I do the same path or hard refresh after a certain path. I also get a strange error message after maybe 5min and the app just crashes it is: crbug/1173575, non-JS module files deprecated. (anonymous) @ VM10:6744 To me it feels like an infinite loop or something but could not find anything when debugging. I read some bugs some people had regarding wsl but tried debugging that based on what helped others to no avail. Any advice is appreciated!
1 replies