Bersaelor Posts - Answer Overflow

Bersaelor

Posts Comments

SSolidJS

•Created by Bersaelor on 8/28/2024 in #support

pagespeed.web.dev complains about `avoid serving legacy javascript` in my solid-start built site

2 replies

SSolidJS

•Created by Bersaelor on 8/15/2024 in #support

Cache-Busting with solid.js

I have a CSR SPA, where the contents sit in static webstorage and the solid.js site is rendered on the client side. E.g.:

export default defineConfig({
  ssr: false,
  server: {
    static: true,
    preset: "static"
  },

export default defineConfig({
  ssr: false,
  server: {
    static: true,
    preset: "static"
  },

My CI will build the site when changes are made to the main branch, and replace the contents of the S3 folder. When that happens I also invalidate the cloudfront-cache, so all future requests go at least once to the newly update files and aren't served by cloudfront. BUT: There also seems to be some browser-caching going on, i.e. sometimes, after an update of my site, if I switch to a tab I had open of the solid-js SPA, I will get an unknown client error and some import problem of the _build/assets/filename-CRYkDoFJ.js where it tries to load one of the old ***-<id>.js build artifacts. Do any of you have experience preventing this? (I don't want my users to have to refresh their browsers if they have our site open in a tab and happen to come back to it after a few days away)

19 replies

SSolidJS

•Created by Bersaelor on 8/6/2024 in #support

importing static assets (telling vinxi/vite about stuff other then png's)

Every other month, I feel like i'm facing this again. How to import static assets in solidjs? The docs https://docs.solidjs.com/solid-start/building-your-application/static-assets say:

Vite provides a way to import assets directly into your Solid components:

import logo from "./solid.png";

import logo from "./solid.png";

If I try the same with other stuff like *.svg or *.txt the import fails. I did have a an older solidjs project where I could do

import sprite from '../../assets/img/sprite.svg';

import sprite from '../../assets/img/sprite.svg';

In the old project I did this via

// vite.config.mts

import solidSvg from 'vite-plugin-solid-svg'

export default defineConfig({
  plugins: [suidPlugin(), solidPlugin(), solidSvg({ defaultAsComponent: false })],
 ...
})

// vite.config.mts

import solidSvg from 'vite-plugin-solid-svg'

export default defineConfig({
  plugins: [suidPlugin(), solidPlugin(), solidSvg({ defaultAsComponent: false })],
 ...
})

Is there a way we can still do this with solidjs/start? Since we don't have a vite.config anymore?

14 replies

SSolidJS

•Created by Bersaelor on 7/10/2024 in #support

Ideas what could cause static assets from failing to import?

import testImg from './test.png';

import testImg from './test.png';

fails with

`Cannot find module './test.png' or its corresponding type declarations.

This with "solid-js": "^1.8.17", and "@solidjs/start": "^1.0.0",. If I create a new project with npm create solid I can import the test img, trying to pinpoint what could cause my project to fail importing it. app.config.ts:

import { defineConfig } from "@solidjs/start/config";
import suidPlugin from '@suid/vite-plugin';
import type { PluginOption } from "vite";

export default defineConfig({
  ssr: false,
  server: {
    static: true,
    preset: "static"
  },
  vite: {
    plugins: [suidPlugin() as PluginOption],
  },
});

import { defineConfig } from "@solidjs/start/config";
import suidPlugin from '@suid/vite-plugin';
import type { PluginOption } from "vite";

export default defineConfig({
  ssr: false,
  server: {
    static: true,
    preset: "static"
  },
  vite: {
    plugins: [suidPlugin() as PluginOption],
  },
});

9 replies

SSolidJS

•Created by Bersaelor on 4/29/2024 in #support

How to update a table of textfields? (stop re-rendering when users type)

So, I essentially have a :

  const [values, setValues] = createSignal<{a: string, b: string}[] | undefined>([]);

  ... 

  return <For each={values()}>{(entry, index) => (
    <div>
      <TextField
        value={entry.a}
        onChange={(e) => {
            const new = [...values()!];
            new[index()] = { ...new[index()], a: e.currentTarget.value };
            setValues(new);
        }}
      />
      <TextField
        value={entry.b}
        onChange={(e) => {
            const new = [...values()!];
            new[index()] = { ...new[index()], b: e.currentTarget.value };
            setValues(new);
        }}
      />
    </div>
  )}</For>

  const [values, setValues] = createSignal<{a: string, b: string}[] | undefined>([]);

  ... 

  return <For each={values()}>{(entry, index) => (
    <div>
      <TextField
        value={entry.a}
        onChange={(e) => {
            const new = [...values()!];
            new[index()] = { ...new[index()], a: e.currentTarget.value };
            setValues(new);
        }}
      />
      <TextField
        value={entry.b}
        onChange={(e) => {
            const new = [...values()!];
            new[index()] = { ...new[index()], b: e.currentTarget.value };
            setValues(new);
        }}
      />
    </div>
  )}</For>

Unfortunately this means every time the user types a letter, the textfield looses focus, as the whole for-array is rerendered.

10 replies

SSolidJS

•Created by Bersaelor on 4/22/2024 in #support

Getting `Error | Uncaught Client Exception` without any errors in the console

2 replies

SSolidJS

•Created by Bersaelor on 3/13/2024 in #support

Is anyone detecting light vs dark mode on their site>

For example, I frequently use

  const isMobileSize = useMediaQuery("(max-width:600px)");

  const isMobileSize = useMediaQuery("(max-width:600px)");

when I need my logic to work different on mobile devices. Now

  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

is just never positive? (this is using the useMediaQuery from https://suid.io/components/use-media-query )

4 replies

SSolidJS

•Created by Bersaelor on 2/20/2024 in #support

useNavigate - navigate(path) throws "computations created outside a `createRoot`" and error

8 replies

SSolidJS

•Created by Bersaelor on 2/20/2024 in #support

(node:53181) Warning: An error event has already been emitted on the socket.

Has anyone ever encountered the problem:

  VITE v4.5.2  ready in 435 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h to show help
(node:53181) Warning: An error event has already been emitted on the socket. Please use the destroy method on the socket while handling a 'clientError' event.
(Use `node --trace-warnings ...` to show where the warning was created)
error Command failed with exit code 1.

  VITE v4.5.2  ready in 435 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h to show help
(node:53181) Warning: An error event has already been emitted on the socket. Please use the destroy method on the socket while handling a 'clientError' event.
(Use `node --trace-warnings ...` to show where the warning was created)
error Command failed with exit code 1.

It swallows all possible vite errors which makes it very hard to determine what error exactly happened.

2 replies

SSolidJS

•Created by Bersaelor on 1/12/2024 in #support

`vinxi build` fails with RollupError during unecessary "Preparing app for node-server... "

Hey there, so when I run npm run build which really runs vinxi build as of solid 0.4.* it works locally. But when run as part of a github action, it fails with

[success] [vinxi] Generated public .output/public
[info] [vinxi] Initializing prerenderer
Error:  [nitro] RollupError: Could not resolve "./ThemeContext" from "node_modules/@suid/system/useTheme.js"


undefined
Error:  Could not resolve "./ThemeContext" from "node_modules/@suid/system/useTheme.js"
  at error (node_modules/rollup/dist/es/shared/parseAst.js:337:30)
  at ModuleLoader.handleInvalidResolvedId (node_modules/rollup/dist/es/shared/node-entry.js:18000:24)
  at node_modules/rollup/dist/es/shared/node-entry.js:17960:26
  at async Promise.all (index 0)

[success] [vinxi] Generated public .output/public
[info] [vinxi] Initializing prerenderer
Error:  [nitro] RollupError: Could not resolve "./ThemeContext" from "node_modules/@suid/system/useTheme.js"


undefined
Error:  Could not resolve "./ThemeContext" from "node_modules/@suid/system/useTheme.js"
  at error (node_modules/rollup/dist/es/shared/parseAst.js:337:30)
  at ModuleLoader.handleInvalidResolvedId (node_modules/rollup/dist/es/shared/node-entry.js:18000:24)
  at node_modules/rollup/dist/es/shared/node-entry.js:17960:26
  at async Promise.all (index 0)

So, this seems to happend AFTER the .output/public folder is created, the next step is Initializing prerenderer. But I'm not using any node-server, how can I tell it that it doesn't have to do that during CI steps?

23 replies

SSolidJS

•Created by Bersaelor on 8/30/2023 in #support

Plain string for <Link onload="..."> shows warning

I want to preload google fonts in the root.tsx like so:

            <Link 
              rel='preload'
              href="https://fonts.googleapis.com/..." 
              as='style'
              attr:onload="this.onload=null;this.rel='stylesheet'"
            />

            <Link 
              rel='preload'
              href="https://fonts.googleapis.com/..." 
              as='style'
              attr:onload="this.onload=null;this.rel='stylesheet'"
            />

yet, typescript can't seem to find that attribute, i.e.:

Type '{ rel: string; href: string; as: "style"; "attr:onload": string; }' is not assignable to type 'IntrinsicAttributes & LinkHTMLAttributes<HTMLLinkElement>'. Property 'attr:onload' does not exist on type 'IntrinsicAttributes & LinkHTMLAttributes<HTMLLinkElement>'

How can I use attr: to make clear I want to set my attribute as plain text?

33 replies

SSolidJS

•Created by Bersaelor on 7/26/2023 in #support

solid-eslint warning about event handlers

So, I get the eslintsolid/reactivity warning when I use reactive props in event handlers:

This function should be passed to a tracked scope (like createEffect) or an event handler because it contains reactivity, or else changes will be ignored.

  createEffect(() => {
    const wS = waveSurfer();

    if (wS) {
      wS.on('play', () => {
        if (props.currentArticle)
          trackStartPlayback(props.currentArticle);
      }

  createEffect(() => {
    const wS = waveSurfer();

    if (wS) {
      wS.on('play', () => {
        if (props.currentArticle)
          trackStartPlayback(props.currentArticle);
      }

How else would you all handle this?

18 replies

SSolidJS

•Created by Bersaelor on 7/23/2023 in #support

Suspense doesn't seem to work with ContextProvider

hey, so recently I noticed, If I use createResource(fetch) and then put <Suspense fallback={<Placeholder>}> I will see the placeholder during loading. But if I have createResource(fetch) inside a ContextProvider, i.e.:

const ContextProvider: ParentComponent = (props) => {
  const [data] = createResource(isAuthenticated, fetch);

return (
    <Context.Provider value={{
        data
      }}>
       {props.children}
    </Context.Provider>
}

const ContextProvider: ParentComponent = (props) => {
  const [data] = createResource(isAuthenticated, fetch);

return (
    <Context.Provider value={{
        data
      }}>
       {props.children}
    </Context.Provider>
}

and then have a

const SomeChild = () => {
  const { data } = useAppState();

<Suspense fallback={<Placeholder>}>
  {data()}
<Suspense>
}

const SomeChild = () => {
  const { data } = useAppState();

<Suspense fallback={<Placeholder>}>
  {data()}
<Suspense>
}

then I will not see the suspense-placeholder and in fact my UI will not update until the data is loaded. Does suspense & createResource not work around context-provide and use?

5 replies

SSolidJS

•Created by Bersaelor on 7/21/2023 in #support

`<A>` from `solid-start` is slow on Android. How to debug performance?

So, on my detail page I have a button ```jsx import { A } from 'solid-start'; const Detail = () => { return ( // ... <A href='/'> //... } When I press that button on my Samsung S9 (not the slowest of android phones), it feels like a second before anything happens and I see the home screen again. How can I speed this up? How can I debug what is causing the delay?

10 replies

SSolidJS

•Created by Bersaelor on 7/13/2023 in #support

Context is undefined during development reloads

So I use a few contexts like:

const useAppState = () => { return useContext(AppContext)! }

const useAppState = () => { return useContext(AppContext)! }

this worked fine for a while now, since I make sure to always wrap components that use it into the correct providers. For about a week now, when using npm run dev when I make small changes ot my code (just a linebreak for example) and save, my browser running localhost:3000 will have a:

Cannot destructure property 'userDetails' of 'useAppState(...)' as it is undefined.

Cannot destructure property 'userDetails' of 'useAppState(...)' as it is undefined.

I then have to manually reload the page in the browser to see the change. This is a little annoying since I like to see visual layout changes immedieately on my second screen while I adjust the code, now I always have to mouse over to reload the page. What could be causing this? I mean it all runs perfectly well as a whole site, just the little live updates break it?

5 replies

SSolidJS

•Created by Bersaelor on 7/10/2023 in #support

solid-start: How to import browser-only depencency

I'm trying to include a browser-only dependency into a solid-start project that is partly server-side rendered. I.e. my vite.config:

export default defineConfig({
  plugins: [solid({ adapter: awsAdapter() }), suidPlugin(), eslint()],

export default defineConfig({
  plugins: [solid({ adapter: awsAdapter() }), suidPlugin(), eslint()],

Now after doing the usual npm install rudder-sdk-js , when I do npm run dev, I get:

/../solidjs-site/node_modules/rudder-sdk-js/index.es.js:1
function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return ...

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1149:20)
    at Module._compile (node:internal/modules/cjs/loader:1190:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
    at Module.load (node:internal/modules/cjs/loader:1089:32)
    at Module._load (node:internal/modules/cjs/loader:930:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

/../solidjs-site/node_modules/rudder-sdk-js/index.es.js:1
function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return ...

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1149:20)
    at Module._compile (node:internal/modules/cjs/loader:1190:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
    at Module.load (node:internal/modules/cjs/loader:1089:32)
    at Module._load (node:internal/modules/cjs/loader:930:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

70 replies

SSolidJS

•Created by Bersaelor on 7/10/2023 in #support

Make createMemo depend on unmentioned signal

I have a createMemo that depends on a list of objects

  const items = createMemo(() => props.articles.map((article) => article.id));

  const items = createMemo(() => props.articles.map((article) => article.id));

now, when I reorder that list of objects, the createMemo does not fire again, since I guess the content staid the same. Now I defined

  const [reorderTag, setReorderTag] = createSignal(0);

  const [reorderTag, setReorderTag] = createSignal(0);

that I increment each time I reorder the list. Short of

  const items = createMemo(() => {
    console.log(`reorderTag: ${reorderTag}`);
    return props.articles.map((article) => article.id)
  });

  const items = createMemo(() => {
    console.log(`reorderTag: ${reorderTag}`);
    return props.articles.map((article) => article.id)
  });

how do I make sure it refires? Making logic depend on console.log feels dirty.

23 replies

SSolidJS

•Created by Bersaelor on 7/5/2023 in #support

Favorite way of dealing with typescripts `!`-forbidden warnings

For example, I often do:

const MiddleContainer: ParentComponent = (props) => {
  const { isAuthenticated } = useAuthState()!;

const MiddleContainer: ParentComponent = (props) => {
  const { isAuthenticated } = useAuthState()!;

I know my code is wrapped in an AuthContextProvider, and I want it to crash/error out in case I ever miss the context provider. How do you tell typescript-eslint to shut up about these cases?

5 replies

SSolidJS

•Created by Bersaelor on 6/29/2023 in #support

How to get `useParams` in the "root.tsx" in a server-rendered-page.

Inside the root.tsx before any FileRoutes are resolved, how can we get the full path / the params for the current html-request? When I use useParams().id inside the root.tsx, I always get undefined.

3 replies

SSolidJS

•Created by Bersaelor on 6/29/2023 in #support

[Solid-start]FileRoutes] is there a way of using two separate Routes folders in `root.tsx`

E.g., my main content should be Client-Side rendered, but the headers should be server side rendered for every route,s o what I would like to do is:

[root.tsx]

  
    return <Html lang="en">
      <Head>
        <Routes>
          <FileRoutes folder='headers' />
        </Routes>
      </Head>
      <Body>
              <ClientOnly>
                <AuthContextProvider>
                  <AppContextProvider>
                    <Routes>
                      <FileRoutes folder='content' />
                    </Routes>
                  </AppContextProvider>
                </AuthContextProvider>
              </ClientOnly>
      </Body>
    </Html>

[root.tsx]

  
    return <Html lang="en">
      <Head>
        <Routes>
          <FileRoutes folder='headers' />
        </Routes>
      </Head>
      <Body>
              <ClientOnly>
                <AuthContextProvider>
                  <AppContextProvider>
                    <Routes>
                      <FileRoutes folder='content' />
                    </Routes>
                  </AppContextProvider>
                </AuthContextProvider>
              </ClientOnly>
      </Body>
    </Html>

6 replies

Gaming

Programming