edygar Posts - Answer Overflow

edygar

•Created by edygar on 5/11/2024 in #support

Hydration mismatch

The following code ALWAYS raises hydration mismatch while using solid-start with SSR. But that's not the case when there's no SSR https://playground.solidjs.com/anonymous/eee9dea7-56ba-4e0d-a6b5-fb5e24c778e2

25 replies

SSolidJS

•Created by edygar on 5/5/2024 in #support

createSignal + createRenderEffect

Say I have an Input component that might or not be controlled. Within this said component, I need to peek reactively into the value. Is it a good idea to have something like the following?

function Input(props) {
  const [value, setValue] = createSignal<Exclude<typeof props["value"], undefined>>()
  createRenderEffect(() => {
    setValue(props.value)
  })
  
  createEffect(() => {
    doClientSideOnlyStuff(value())
  })

  return (
    <input
      // ... many other stuff
      value={value()}
      onInput={(e) => {
        const previous = value()
        // expose normally
        props.onInput?.(e)

        if (!e.defaultPrevented && value() === previous && previous !== e.target.value) {
          // this order matter, first locally
          setValue(e.target.value)
        }
      }}
    />
  )
}

function Input(props) {
  const [value, setValue] = createSignal<Exclude<typeof props["value"], undefined>>()
  createRenderEffect(() => {
    setValue(props.value)
  })
  
  createEffect(() => {
    doClientSideOnlyStuff(value())
  })

  return (
    <input
      // ... many other stuff
      value={value()}
      onInput={(e) => {
        const previous = value()
        // expose normally
        props.onInput?.(e)

        if (!e.defaultPrevented && value() === previous && previous !== e.target.value) {
          // this order matter, first locally
          setValue(e.target.value)
        }
      }}
    />
  )
}

This is also compatible with SSR, since the createRenderEffect will run on the server. My main doubt is for things like

8 replies

SSolidJS

•Created by edygar on 3/3/2023 in #support

how to handle POST in a route?

Hey there, I was looking for something like remix’s action/useActionData, but I don’t even have the request on the routeData, how do I do it? The usecase is simply to render what was posted in formatted and interactive way, I don’t want to redirect or anything like it

1 replies

SSolidJS

•Created by edygar on 3/2/2023 in #support

create-solid messed up peer dependencies

Upon creation I've got this warning

 WARN  Issues with peer dependencies found
.
├─┬ solid-start-node 0.2.22
│ └─┬ @rollup/plugin-node-resolve 13.3.0
│   ├── ✕ unmet peer rollup@^2.42.0: found 3.18.0 in solid-start-node
│   └─┬ @rollup/pluginutils 3.1.0
│     └── ✕ unmet peer rollup@^1.20.0||^2.0.0: found 3.18.0 in solid-start-node
└─┬ solid-start 0.2.22
  └── ✕ unmet peer vite@^3.1.8: found 4.1.4

 WARN  Issues with peer dependencies found
.
├─┬ solid-start-node 0.2.22
│ └─┬ @rollup/plugin-node-resolve 13.3.0
│   ├── ✕ unmet peer rollup@^2.42.0: found 3.18.0 in solid-start-node
│   └─┬ @rollup/pluginutils 3.1.0
│     └── ✕ unmet peer rollup@^1.20.0||^2.0.0: found 3.18.0 in solid-start-node
└─┬ solid-start 0.2.22
  └── ✕ unmet peer vite@^3.1.8: found 4.1.4

Why trying to run it throw right away

 solid-start dev
 version  0.2.22
failed to load config from ~/dev/personal/organizzer/vite.config.ts
node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '~/dev/personal/organizzer/node_modules/.pnpm/vite-plugin-solid@2.6.0_solid-js@1.6.11+vite@3.2.5/node_modules/solid-refresh/babel' imported from ~/dev/personal/organizzer/node_modules/.pnpm/vite-plugin-solid@2.6.0_solid-js@1.6.11+vite@3.2.5/node_modules/vite-plugin-solid/dist/esm/index.mjs
Did you mean to import solid-refresh@0.4.3_solid-js@1.6.11/node_modules/solid-refresh/babel.js?
    at new NodeError (node:internal/errors:393:5)
    at finalizeResolution (node:internal/modules/esm/resolve:323:11)
    at moduleResolve (node:internal/modules/esm/resolve:916:10)
    at defaultResolve (node:internal/modules/esm/resolve:1124:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

 solid-start dev
 version  0.2.22
failed to load config from ~/dev/personal/organizzer/vite.config.ts
node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '~/dev/personal/organizzer/node_modules/.pnpm/vite-plugin-solid@2.6.0_solid-js@1.6.11+vite@3.2.5/node_modules/solid-refresh/babel' imported from ~/dev/personal/organizzer/node_modules/.pnpm/vite-plugin-solid@2.6.0_solid-js@1.6.11+vite@3.2.5/node_modules/vite-plugin-solid/dist/esm/index.mjs
Did you mean to import solid-refresh@0.4.3_solid-js@1.6.11/node_modules/solid-refresh/babel.js?
    at new NodeError (node:internal/errors:393:5)
    at finalizeResolution (node:internal/modules/esm/resolve:323:11)
    at moduleResolve (node:internal/modules/esm/resolve:916:10)
    at defaultResolve (node:internal/modules/esm/resolve:1124:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

5 replies

Gaming

Programming