[Bug?]: using ag-grid need to disable ssr, but then I cannot build static website with ag-grid

[xarthurx]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I made the issue here:
solidjs/solid#1839

But it seems to be more related to solid-start rather than solid itself.

The question is simple:
If I use ag-grid, I need to disable ssr. Then when building static website with solid-start-static, it gives:

 solid-start build
 version  0.3.1
 adapter  static
file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/solid-start-static@0.2.26_solid-start@0.3.1_undici@5.22.1_vite@4.4.6/node_modules/solid-start-static/index.js:26
      if(!config?.solidOptions?.ssr) throw new Error('solid-start-static needs ssr to be enabled for pre-rendering routes at build time');
                                           ^

Error: solid-start-static needs ssr to be enabled for pre-rendering routes at build time
    at Object.build (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/solid-start-static@0.2.26_solid-start@0.3.1_undici@5.22.1_vite@4.4.6/node_modules/solid-start-static/index.js:26:44)
    at C:\Users\xarthurx\source\docRepo\ddmRemake\node_modules\.pnpm\solid-start@0.3.1_@solidjs+meta@0.28.5_@solidjs+router@0.8.2_solid-js@1.7.6_solid-start-node@_y6rguepyteilu3hg772t4psqxa\node_modules\solid-start\bin.cjs:136:20

Is there a proper solution for such a issue?

Expected behavior 🤔

I can build a static website with ag-grid enabled.

Steps to reproduce 🕹

Steps:

1. make a website with solid-start, and install ag-grid
2. make a table with ag-grid in the webpage
3. build a static website with solid-start-static

Context 🔦

No response

Your environment 🌎

OS: windows
Solid-Start: 0.3.1
Node: 18.17

[ryansolid]

Yeah, because static sites are server-rendered. You render all the pages on the server and then load them as you navigate to it. A client-rendered SPA is technically a static site in a sense that you don't need a server for it, but it isn't the same. A SPA will serve a single index.html that is basically blank and do everything in the client. A "static" site involves pre-rendering all the pages on the server.

If you want Static site generation with something like this we need to have it be skipped on server rendering generation and to only render that part in the client. We need to lazy load the component and trigger it to show in an effect on the client as effects don't run on the server.

[xarthurx]

Yeah, because static sites are server-rendered. You render all the pages on the server and then load them as you navigate to it. A client-rendered SPA is technically a static site in a sense that you don't need a server for it, but it isn't the same. A SPA will serve a single index.html that is basically blank and do everything in the client. A "static" site involves pre-rendering all the pages on the server.

If you want Static site generation with something like this we need to have it be skipped on server rendering generation and to only render that part in the client. We need to lazy load the component and trigger it to show in an effect on the client as effects don't run on the server.

Thank you for the quick reply.
I'm not an expert of web-tech and just recently found solidjs.
Some of my website is served on github-pages, so a static site is a big need for me.

It would be wonderful to have something like you mentioned, though I don't know how hard it will be for the implementation.

[ryansolid]

Hey this might help. I haven't confirmed whether it covers the case but if it does it is a pretty strong argument for this component:

solidjs/solid#1592

I believe the code is:

import { createSignal, sharedConfig, createComponent, onMount, lazy, type Component } from "solid-js"

export function clientOnly<T extends Component<any>>(
  fn: () => Promise<{ default: T }>
): T {
  const Lazy = lazy(fn);
  return ((props: any) => {
    if (sharedConfig.context) {
      const [flag, setFlag] = createSignal(false);

      onMount(() => {
        setFlag(true);
      });

      return createMemo(() => {
        if (flag()) {
          return createComponent(Lazy, props);
        }
        return undefined;
      });
    }
    return createComponent(Lazy, props);
  }) as unknown as T;
}

And then the usage is:

const MyComp = clientOnly(() => import("./path/to/ag-grid/component.tsx"))

[xarthurx]

Hey this might help. I haven't confirmed whether it covers the case but if it does it is a pretty strong argument for this component:

solidjs/solid#1592

I believe the code is:

import { createSignal, sharedConfig, createComponent, onMount, lazy, type Component } from "solid-js"

export function clientOnly<T extends Component<any>>(
  fn: () => Promise<{ default: T }>
): T {
  const Lazy = lazy(fn);
  return ((props: any) => {
    if (sharedConfig.context) {
      const [flag, setFlag] = createSignal(false);

      onMount(() => {
        setFlag(true);
      });

      return createMemo(() => {
        if (flag()) {
          return createComponent(Lazy, props);
        }
        return undefined;
      });
    }
    return createComponent(Lazy, props);
  }) as unknown as T;
}

And then the usage is:

const MyComp = clientOnly(() => import("./path/to/ag-grid/component.tsx"))

Do you mean by adding this snippet and enable ssr?
Based on my test, there's some export issue when exporting the server code:

solid-start building server...
vite v4.4.9 building SSR bundle for production...
node_modules/.pnpm/solid-start@0.3.2_@solidjs+meta@0.28.6_@solidjs+router@0.8.3_solid-js@1.7.11_solid-start-node_jqi6vdhgevam4xchjqsr7oxr2u/node_modules/solid-start/islands/A.tsx (1:0) Module level directives cause errors when bundled, "use client" in "node_modules/.pnpm/solid-start@0.3.2_@solidjs+meta@0.28.6_@solidjs+router@0.8.3_solid-js@1.7.11_solid-start-node_jqi6vdhgevam4xchjqsr7oxr2u/node_modules/solid-start/islands/A.tsx" was ignored.
✓ 95 modules transformed.
.solid/server/manifest.json                  0.55 kB
.solid/server/assets/schedule-00171acf.js    3.77 kB
.solid/server/entry-server.js              201.08 kB
✓ built in 1.99s
solid-start server built in: 2.080s

file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:2245
        base = Object.assign(new Error(base.message), base);
                             ^

Error [RollupError]: "template" is not exported by "node_modules/.pnpm/solid-js@1.7.11/node_modules/solid-js/web/dist/server.js", imported by "node_modules/.pnpm/ag-grid-solid@30.0.6_ag-grid-community@30.0.6_solid-js@1.7.11/node_modules/ag-grid-solid/dist/esm/index.js".
    at error (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
    at Module.error (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:13674:16)
    at Module.traceVariable (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:14104:29)
    at ModuleScope.findVariable (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:12547:39)
    at Identifier.bind (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:8267:40)
    at CallExpression.bind (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:5850:23)
    at CallExpression.bind (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:9833:15)
    at VariableDeclarator.bind (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:5850:23)
    at VariableDeclaration.bind (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:5846:28)
    at Program.bind (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:5846:28)
    at Module.bindReferences (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:13670:18)
    at Graph.sortModules (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:25728:20)
    at Graph.build (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:25612:14)
    at async file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:26573:13
    at async catchUnfinishedHookActions (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:25785:16)
    at async rollupInternal (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/rollup@3.28.0/node_modules/rollup/dist/es/shared/node-entry.js:26568:5)
    at async Object.build (file:///C:/Users/xarthurx/source/docRepo/ddmRemake/node_modules/.pnpm/solid-start-static@0.3.2_solid-start@0.3.2_vite@4.4.9/node_modules/solid-start-static/index.js:36:22) {
  binding: 'template',
  code: 'MISSING_EXPORT',
  exporter: 'C:\\Users\\xarthurx\\source\\docRepo\\ddmRemake\\node_modules\\.pnpm\\solid-js@1.7.11\\node_modules\\solid-js\\web\\dist\\server.js',
  id: 'C:\\Users\\xarthurx\\source\\docRepo\\ddmRemake\\node_modules\\.pnpm\\ag-grid-solid@30.0.6_ag-grid-community@30.0.6_solid-js@1.7.11\\node_modules\\ag-grid-solid\\dist\\esm\\index.js',
  url: 'https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module',
  pos: 76,
  loc: {
    column: 76,
    file: 'C:\\Users\\xarthurx\\source\\docRepo\\ddmRemake\\node_modules\\.pnpm\\ag-grid-solid@30.0.6_ag-grid-community@30.0.6_solid-js@1.7.11\\node_modules\\ag-grid-solid\\dist\\esm\\index.js',
    line: 1
  },
  frame: '1: import { use, insert, memo, createComponent, mergeProps, effect, className, template, spread, style, setAttribute, Po...\n' +
    '                                                                               ^\n' +
    '2: import { BaseComponentWrapper, GroupCellRendererCtrl, _, VanillaFrameworkOverrides, CssClassManager, AgPromise, Heade...\n' +
    "3: import { createContext, useContext, createSignal, createMemo, onMount, onCleanup, createEffect, For } from 'solid-js';",

Again, I'm not very familiar with the ssr thing, so the issue might be stupid. But I'm willing to help.

[edivados]

Got it to build by externalizing ag-grid-solid.

vite.config.js

ssr: {
  external: ['ag-grid-solid']
},
plugins: [
  unocss(),
...

schedule.jsx

const AgGridSolid = clientOnly(() =>  import("ag-grid-solid"));

return (
<>
  ...

  <div dark class="ag-theme-material ag-grid">
    <AgGridSolid
      gridOptions = {gridOptions}
      columnDefs={columnDefs}
      defaultColDef={defaultColDef}
      rowSelection={'single'}
      rowData={rowData()} />
  </div>
  ...

[xarthurx]

OK. Now it works. Thank you for the help.

So to summarize a bit for others who come to this post, to enable both ag-grid and ssr, I should:

1. [Bug?]: using ag-grid need to disable ssr, but then I cannot build static website with ag-grid #988 (comment)
2. [Bug?]: using ag-grid need to disable ssr, but then I cannot build static website with ag-grid #988 (comment)

Hopefully, the solid-start team will make this process a bit easier and cleaner in the future.

[ryansolid]

In setting up for SolidStart's next Beta Phase built on Nitro and Vinxi we are closing all PRs/Issues that will not be merged due to the system changing. If you feel your issue was closed by mistake. Feel free to re-open it after updating/testing against 0.4.x release. Thank you for your patience.

See #1139 for more details.