SolidJS•13mo ago

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 ?

2 Replies

.torx•13mo ago

Up, any idea ?

Peixe•11mo ago

Interesting I'm having the same problem The problem is when you use Suspense | ErrorBoundary | @solid/router All of these depend on sharedConfig and on sharedConfig context serialize function This context is initialized when you call createComponent Maybe the problem is that you're not calling createComponent when doing renderToString

Gaming

Programming

Bundling Component SSR Compatible library - sharedConfig is undefined