TheOinkinator Posts - Answer Overflow

TheOinkinator

•Created by TheOinkinator on 3/17/2024 in #support

CSS Modules not updating without page refresh

I just opened a new solid start app and began adding .module.css files. However, anytime I make an adjustment to the css in a module and save it all styling is wiped from the element on the page (despite vite triggering a reload) and I have to refresh the page in the browser for every change. Any idea what might be causing this? I have also tested a solid start project I created about five months ago and it is not having the same issue so it seems to be something that has changed in the default solid start app in the interm period File structure: components/ ├── DefaultHeader.module.css ├── DefaultHeader.tsx (Default Header)

import styles from "./DefaultHeader.module.css"

export default function DefaultHeader() {
    return (
        <div class={styles.header}>hello</div>
    )
}

import styles from "./DefaultHeader.module.css"

export default function DefaultHeader() {
    return (
        <div class={styles.header}>hello</div>
    )
}

(Default Header css module)

.header {
    width: 100vw;
    height: 10rem;
    background-color: red;
    /* outline: solid black; */
}

.header {
    width: 100vw;
    height: 10rem;
    background-color: red;
    /* outline: solid black; */
}

7 replies

SSolidJS

•Created by TheOinkinator on 10/12/2023 in #support

Is it possible to have a route rerender only a portion of the page with Solid Start

As stated above I want to set up a page where sub routes rather than reloading the entire page just rerender a portion of a for loop so for example: /home/start/example will be a page that has a for loop returning <example> when i click <example> it navigates to: home/start/example/example2 and rather that reloading the whole page it updates the For loop to return: <example> <example2> Let me know if this makes sens and if there is a method to do this?

3 replies

SSolidJS

•Created by TheOinkinator on 9/25/2023 in #support

Vercel deployment issue.

I Just migrated my small project from astro framework to solid start. I am trying to publish the project on vercel but am running into this error: Error: No Output Directory named ".output" found after the Build completed. You can configure the Output Directory in your Project Settings.

6 replies

SSolidJS

•Created by TheOinkinator on 9/1/2023 in #support

Adding components that use context to the DOM after mount

I have a component (ShelfScene) that returns a mapped list of items (Shelf). The ShelfScene component appends a few Shelf components onMount and those render and use context fine with no issues. However when I try to append a new Shelf component after mount the new component is not able to read the context. Any Ideas?

15 replies

SSolidJS

•Created by TheOinkinator on 8/11/2023 in #support

Createeffect not working in component where signal was defined

I am pretty new to programming so it is possible I have some kind of oversite. but in this code:

import FMHome from "./FMHome";
import FMSearch from "./FMSearch";
import FMBookmark from "./FMBookmark";
import FMAccount from "./FMAccount";
import "./floatingMenuStyles/fmStyle.css";
import "./floatingMenuStyles/fmItemStyle.css";
import { createEffect, createSignal } from "solid-js";

type MenuStates =
  | "allClosed"
  | "homeOpen"
  | "searchOpen"
  | "bookmarkOpen"
  | "loading";

export const [menuState, setMenuState] = createSignal<MenuStates>("homeOpen");

export default function FloatingMenu() {
  createEffect(() => {
    console.log(menuState());
  });
  return (
    <>
      <div class="floatingMenuContainer">
        <FMHome />
        <FMSearch />
        <FMBookmark />
        <FMAccount />
      </div>
    </>
  );
}

import FMHome from "./FMHome";
import FMSearch from "./FMSearch";
import FMBookmark from "./FMBookmark";
import FMAccount from "./FMAccount";
import "./floatingMenuStyles/fmStyle.css";
import "./floatingMenuStyles/fmItemStyle.css";
import { createEffect, createSignal } from "solid-js";

type MenuStates =
  | "allClosed"
  | "homeOpen"
  | "searchOpen"
  | "bookmarkOpen"
  | "loading";

export const [menuState, setMenuState] = createSignal<MenuStates>("homeOpen");

export default function FloatingMenu() {
  createEffect(() => {
    console.log(menuState());
  });
  return (
    <>
      <div class="floatingMenuContainer">
        <FMHome />
        <FMSearch />
        <FMBookmark />
        <FMAccount />
      </div>
    </>
  );
}

the createEffect to log menuState will not work in a child component FMSearch:

5 replies

Gaming

Programming