.torx Posts - Answer Overflow

.torx

•Created by .torx on 8/24/2023 in #support

Bundling Component SSR Compatible library - sharedConfig is undefined

Hello, I'm trying to create a SolidJS Component library which will be imported into an Astro project. Most of the components will be hydrated, which means they will be rendered in the server. I used the ssr:true option of vite solidPlugin, but I'm facing an issue, This is my vitejs config :

const path = require('path')
const { defineConfig } = require('vite')
import dts from 'vite-plugin-dts'
import solidPlugin from 'vite-plugin-solid'

module.exports = defineConfig({
  build: {
    target: "esnext",
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'lib',
      fileName: (format) => `lib.${format}.js`,
      formats: ["es", "umd"],
    },
    rollupOptions: {
      external: [
        'solid-js', 'a', 'b'
      ]
    }
  },
  plugins: [
    dts({
      insertTypesEntry: true,
      exclude: ["node_modules/**"]
    }),
    solidPlugin({
      ssr: true
    })
  ],
})

const path = require('path')
const { defineConfig } = require('vite')
import dts from 'vite-plugin-dts'
import solidPlugin from 'vite-plugin-solid'

module.exports = defineConfig({
  build: {
    target: "esnext",
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'lib',
      fileName: (format) => `lib.${format}.js`,
      formats: ["es", "umd"],
    },
    rollupOptions: {
      external: [
        'solid-js', 'a', 'b'
      ]
    }
  },
  plugins: [
    dts({
      insertTypesEntry: true,
      exclude: ["node_modules/**"]
    }),
    solidPlugin({
      ssr: true
    })
  ],
})

When I try then to import my library to an Astro project, it tells me the following when I try to render one of the component :

if (!__vite_ssr_import_0__.sharedConfig.context || !(t = __vite_ssr_import_0__.sharedConfig.registry.get(n = et()))) {
TypeError: Cannot read properties of undefined (reading 'get')

if (!__vite_ssr_import_0__.sharedConfig.context || !(t = __vite_ssr_import_0__.sharedConfig.registry.get(n = et()))) {
TypeError: Cannot read properties of undefined (reading 'get')

This is the generated code :

import { sharedConfig as x, ... } from "solid-js";

// ...
function A(e) {
  let t, n;
  if (!x.context || !(t = x.registry.get(n = et()))) {
    if (x.context && console.warn("Unable to find DOM nodes for hydration key:", n), !e)
      throw new Error("Unrecoverable Hydration Mismatch. No template for key: " + n);
    return e();
  }
  return x.completed && x.completed.add(t), x.registry.delete(n), t;
}

import { sharedConfig as x, ... } from "solid-js";

// ...
function A(e) {
  let t, n;
  if (!x.context || !(t = x.registry.get(n = et()))) {
    if (x.context && console.warn("Unable to find DOM nodes for hydration key:", n), !e)
      throw new Error("Unrecoverable Hydration Mismatch. No template for key: " + n);
    return e();
  }
  return x.completed && x.completed.add(t), x.registry.delete(n), t;
}

Does anyone know what am I missing here ?

8 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

Hello, I'm trying to create a simple cart store using the nanostores library (https://github.com/nanostores/solid), the data looks like this :

export const getCartItems = map<CartItems>({
  id1: {
    id: 'id1',
    quantity: 1,
    type: 'product',
    meta: {
      // Some static values ...
    }
  },
  id2: {
    id: 'id2',
    quantity: 1,
    type: 'product',
    meta: {
      // Some static values ...
    }
  },
})

export const getCartItems = map<CartItems>({
  id1: {
    id: 'id1',
    quantity: 1,
    type: 'product',
    meta: {
      // Some static values ...
    }
  },
  id2: {
    id: 'id2',
    quantity: 1,
    type: 'product',
    meta: {
      // Some static values ...
    }
  },
})

I'm reading the store like this :

const CartItem = () => {
  const $items = useStore(getCartItems)
  const $total = useStore(getCartTotal)

  return (
    <div>
      <h1 class="text-3xl bold pb-6">Total : {$total()}</h1>

      <div class="pb-2">
        <h1>items </h1>
        <For each={Object.values($items())}>
            {(item) => (
              <span><b>id</b>{item.id}, <b>quantity</b>: {item.quantity}</span>
            )}
        </For>
      </div>
    </div>
  )
}

const CartItem = () => {
  const $items = useStore(getCartItems)
  const $total = useStore(getCartTotal)

  return (
    <div>
      <h1 class="text-3xl bold pb-6">Total : {$total()}</h1>

      <div class="pb-2">
        <h1>items </h1>
        <For each={Object.values($items())}>
            {(item) => (
              <span><b>id</b>{item.id}, <b>quantity</b>: {item.quantity}</span>
            )}
        </For>
      </div>
    </div>
  )
}

I'm facing 2 problems :
1 - If I add a new item to the cart, it's reactive. If I remove an item or reset the cart, it's also reactive. If I try to increase the quantity of an item, it's NOT reactive. I think this is because it's a nested object, but how can I fix this to make it reactive without changing the nanostore library ? 2 - useStore returns a signal, but I'd like to use a useCart function that returns every cart-related logic (because I want it to be a library and it's annoying to install @nanostores/solid in the final project), I tryed different things, none of them work :

// don't work
const useCart = () => {
  items: useStore(getCartItems)
}

// deriving signal, don't work either
const useCart = () => {
  items: () => useStore(getCartItems)()
}

// Not working either withtout the object
const $getCartItems = () => useStore(getCartItems)()

// don't work
const useCart = () => {
  items: useStore(getCartItems)
}

// deriving signal, don't work either
const useCart = () => {
  items: () => useStore(getCartItems)()
}

// Not working either withtout the object
const $getCartItems = () => useStore(getCartItems)()

Is there a solution to preserve the reactivity without having to import the useStore function in the final project ? Thanks for the help!

39 replies

Gaming

Programming