SolidJS•2y ago

Monorepo error with SolidStart `__vite_ssr_import_0__.template is not a function`

I've got a shared UI library (compiled into esm + cjs with vite) that is used with both a regular SolidJS app and a SolidStart app. It's working fine in the SolidJS app, but when importing the lib in the SolidStart app, I'm getting a pretty cryptic error:

__vite_ssr_import_0__.template is not a function
TypeError: __vite_ssr_import_0__.template is not a function
    at /@fs/C:/Projects/Glazer/libs/ui-solid/dist/index.mjs:11:23
    at async instantiateModule (file:///C:/Projects/Glazer/node_modules/.pnpm/vite@4.1.1_@types+node@18.11.18/node_modules/vite/dist/node/chunks/dep-3007b26d.js:52400:9

__vite_ssr_import_0__.template is not a function
TypeError: __vite_ssr_import_0__.template is not a function
    at /@fs/C:/Projects/Glazer/libs/ui-solid/dist/index.mjs:11:23
    at async instantiateModule (file:///C:/Projects/Glazer/node_modules/.pnpm/vite@4.1.1_@types+node@18.11.18/node_modules/vite/dist/node/chunks/dep-3007b26d.js:52400:9

4 Replies

lxsmnsyc•2y ago

seems like your library doesn't support SSR

lxsmnsyc•2y ago

using Vite for authoring libraries isn't really recommended for Solid because of the requirement. I'd recommend https://github.com/solidjs-community/rollup-preset-solid

GitHub

GitHub - solidjs-community/rollup-preset-solid: A small opinionated...

A small opinionated preset for rollup to bundle your solid libraries with rollup. - GitHub - solidjs-community/rollup-preset-solid: A small opinionated preset for rollup to bundle your solid librar...

lars•2y ago

hmmm the thing is the UI library uses SCSS, so when i tried the rollup plugin it crashes when it encountered the scss import any ideas on how to support SSR via the vite config? it outputs esm + cjs so i can't understand what could possibly be the issue here. all it exports is a button component

import path from 'path';
import { defineConfig } from 'vite';
import dtsPlugin from 'vite-plugin-dts';
import solidPlugin from 'vite-plugin-solid';

import pkg from './package.json';

export default defineConfig({
  plugins: [
    solidPlugin(),
    dtsPlugin({
      tsConfigFilePath: 'tsconfig.json',
      insertTypesEntry: true,
      noEmitOnError: true,
      skipDiagnostics: false,
    }),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, './src/index.ts'),
      formats: ['es', 'cjs'],
      fileName: format => (format === 'es' ? 'index.mjs' : 'index.cjs'),
    },
    rollupOptions: {
      external: [
        ...Object.keys(pkg.dependencies),
        ...Object.keys(pkg.peerDependencies),
        'solid-js/web',
        'solid-js/store',
      ],
    },
  },
});

import path from 'path';
import { defineConfig } from 'vite';
import dtsPlugin from 'vite-plugin-dts';
import solidPlugin from 'vite-plugin-solid';

import pkg from './package.json';

export default defineConfig({
  plugins: [
    solidPlugin(),
    dtsPlugin({
      tsConfigFilePath: 'tsconfig.json',
      insertTypesEntry: true,
      noEmitOnError: true,
      skipDiagnostics: false,
    }),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, './src/index.ts'),
      formats: ['es', 'cjs'],
      fileName: format => (format === 'es' ? 'index.mjs' : 'index.cjs'),
    },
    rollupOptions: {
      external: [
        ...Object.keys(pkg.dependencies),
        ...Object.keys(pkg.peerDependencies),
        'solid-js/web',
        'solid-js/store',
      ],
    },
  },
});

ah, i was copying hope ui's build configs assuming that they supported ssr. turns out they don't rip haha

lxsmnsyc•2y ago

you need to use a scss plugin for rollup

Gaming

Programming

Monorepo error with SolidStart `__vite_ssr_import_0__.template is not a function`