Has anybody used ag-grid successfully with solid-start?

[Hubro]

Has anybody managed to get ag-grid working in a solid start application?

I've followed these instructions:

https://www.ag-grid.com/react-data-grid/solidjs/

I can only even get the table to render if I wrap it in lazy(...) to force it to client-render, and if I do that I can only get the server to work when using renderSync. If I use renderAsync or renderStream, the server freezes indefinitely.

import { lazy } from "solid-js";

import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";

const AgGridSolid = lazy(() => {
  return import("ag-grid-solid");
});

const rowData = [{ foo: 123 }, { foo: 234 }, { foo: 345 }];

const colDefs = [{ field: "foo" }];

export default function Home() {
  return (
    <main>
      <h1>Hopefully an ag-grid example</h1>

      <div style={{ width: "640px", height: "480px" }} class="ag-theme-alpine">
        <AgGridSolid rowData={rowData} columnDefs={colDefs} />
      </div>
    </main>
  );
}

Even when I get it to render as described above, the project will still fail to build.

➜ npm run build

> build
> solid-start build

 solid-start build
 version  0.2.23
 adapter  node

solid-start building client...
vite v4.1.4 building for production...
✓ 60 modules transformed.
Inspect report generated at /tmp/ag-grid-example/.solid/inspect
dist/public/manifest.json                         1.27 kB
dist/public/ssr-manifest.json                     1.84 kB
dist/public/assets/entry-client-d870915a.css      0.38 kB │ gzip:   0.27 kB
dist/public/assets/index-8ecf065b.css           197.28 kB │ gzip:  29.78 kB
dist/public/assets/_...404_-23b1914f.js           0.56 kB │ gzip:   0.38 kB
dist/public/assets/index-0c8c311e.js              0.59 kB │ gzip:   0.39 kB
dist/public/assets/entry-client-99e90990.js      38.23 kB │ gzip:  14.77 kB
dist/public/assets/index-02ae1d00.js          1,118.45 kB │ gzip: 234.81 kB

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
solid-start client built in: 2.267s

solid-start building server...
vite v4.1.4 building SSR bundle for production...
✓ 58 modules transformed.
Inspect report generated at /tmp/ag-grid-example/.solid/inspect
.solid/server/manifest.json     0.18 kB
.solid/server/entry-server.js  56.35 kB
solid-start server built in: 354.614ms

file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:2105
        base = Object.assign(new Error(base.message), base);
                             ^

Error [RollupError]: "template" is not exported by "node_modules/solid-js/web/dist/server.js", imported by "node_modules/ag-grid-solid/dist/esm/index.js".
    at error (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:2105:30)
    at Module.error (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:13174:16)
    at Module.traceVariable (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:13559:29)
    at ModuleScope.findVariable (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:12061:39)
    at Identifier.bind (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:7933:40)
    at CallExpression.bind (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:5726:23)
    at CallExpression.bind (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:9470:15)
    at VariableDeclarator.bind (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:5726:23)
    at VariableDeclaration.bind (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:5722:28)
    at Program.bind (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:5722:28)
    at Module.bindReferences (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:13170:18)
    at Graph.sortModules (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:24505:20)
    at Graph.build (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:24389:14)
    at async file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:25406:13
    at async catchUnfinishedHookActions (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:24559:20)
    at async rollupInternal (file:///tmp/ag-grid-example/node_modules/rollup/dist/es/shared/node-entry.js:25401:5)
    at async Object.build (file:///tmp/ag-grid-example/node_modules/solid-start-node/index.js:38:22) {
  binding: 'template',
  code: 'MISSING_EXPORT',
  exporter: '/tmp/ag-grid-example/node_modules/solid-js/web/dist/server.js',
  id: '/tmp/ag-grid-example/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: '/tmp/ag-grid-example/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';",
  watchFiles: [
    '/tmp/ag-grid-example/.solid/server/server.js',
    '/tmp/ag-grid-example/.solid/server/entry-server.js',
    '/tmp/ag-grid-example/dist/public/route-manifest.json',
    '/tmp/ag-grid-example/node_modules/solid-start/node/globals.js',
    '/tmp/ag-grid-example/node_modules/solid-start-node/server.js',
    '/tmp/ag-grid-example/node_modules/solid-js/dist/server.js',
    '/tmp/ag-grid-example/node_modules/solid-js/web/dist/server.js',
    '/tmp/ag-grid-example/node_modules/ag-grid-solid/dist/esm/index.js',
    '/tmp/ag-grid-example/node_modules/solid-start/node/fetch.js',
    '/tmp/ag-grid-example/node_modules/polka/build.mjs',
    '/tmp/ag-grid-example/node_modules/sirv/build.mjs',
    '/tmp/ag-grid-example/node_modules/compression/index.js',
    '/tmp/ag-grid-example/node_modules/@polka/url/build.mjs',
    '/tmp/ag-grid-example/node_modules/ag-grid-community/dist/ag-grid-community.auto.esm.js',
    '/tmp/ag-grid-example/node_modules/mrmime/index.mjs',
    '/tmp/ag-grid-example/node_modules/trouter/index.mjs',
    '/tmp/ag-grid-example/node_modules/parse-multipart-data/dist/multipart.js',
    '/tmp/ag-grid-example/node_modules/set-cookie-parser/lib/set-cookie.js',
    '/tmp/ag-grid-example/node_modules/totalist/sync/index.mjs',
    '\x00/tmp/ag-grid-example/node_modules/parse-multipart-data/dist/multipart.js?commonjs-es-import',
    '\x00commonjsHelpers.js',
    '\x00/tmp/ag-grid-example/node_modules/parse-multipart-data/dist/multipart.js?commonjs-exports',
    '\x00/tmp/ag-grid-example/node_modules/set-cookie-parser/lib/set-cookie.js?commonjs-es-import',
    '\x00/tmp/ag-grid-example/node_modules/set-cookie-parser/lib/set-cookie.js?commonjs-module',
    '/tmp/ag-grid-example/node_modules/compression/node_modules/debug/src/index.js',
    '/tmp/ag-grid-example/node_modules/safe-buffer/index.js',
    '/tmp/ag-grid-example/node_modules/accepts/index.js',
    '/tmp/ag-grid-example/node_modules/bytes/index.js',
    '/tmp/ag-grid-example/node_modules/compressible/index.js',
    '/tmp/ag-grid-example/node_modules/on-headers/index.js',
    '/tmp/ag-grid-example/node_modules/vary/index.js',
    '/tmp/ag-grid-example/node_modules/compression/node_modules/debug/src/browser.js',
    '/tmp/ag-grid-example/node_modules/compression/node_modules/debug/src/node.js',
    '/tmp/ag-grid-example/node_modules/regexparam/dist/regexparam.mjs',
    '/tmp/ag-grid-example/node_modules/compression/node_modules/debug/src/debug.js',
    '/tmp/ag-grid-example/node_modules/negotiator/index.js',
    '/tmp/ag-grid-example/node_modules/mime-db/index.js',
    '/tmp/ag-grid-example/node_modules/mime-types/index.js',
    '/tmp/ag-grid-example/node_modules/mime-db/db.json',
    '/tmp/ag-grid-example/node_modules/negotiator/lib/charset.js',
    '/tmp/ag-grid-example/node_modules/negotiator/lib/language.js',
    '/tmp/ag-grid-example/node_modules/negotiator/lib/encoding.js',
    '/tmp/ag-grid-example/node_modules/negotiator/lib/mediaType.js',
    '/tmp/ag-grid-example/node_modules/compression/node_modules/ms/index.js',
    '\x00/tmp/ag-grid-example/node_modules/compression/index.js?commonjs-es-import',
    '\x00/tmp/ag-grid-example/node_modules/compression/index.js?commonjs-module',
    '\x00zlib?commonjs-external',
    '\x00/tmp/ag-grid-example/node_modules/safe-buffer/index.js?commonjs-module',
    '\x00buffer?commonjs-external',
    '\x00/tmp/ag-grid-example/node_modules/bytes/index.js?commonjs-module',
    '\x00/tmp/ag-grid-example/node_modules/compression/node_modules/debug/src/index.js?commonjs-module',
    '\x00/tmp/ag-grid-example/node_modules/vary/index.js?commonjs-module',
    '\x00/tmp/ag-grid-example/node_modules/negotiator/index.js?commonjs-module',
    '\x00/tmp/ag-grid-example/node_modules/mime-types/index.js?commonjs-exports',
    '\x00path?commonjs-external',
    '\x00/tmp/ag-grid-example/node_modules/mime-db/index.js?commonjs-module',
    '\x00/tmp/ag-grid-example/node_modules/mime-db/db.json?commonjs-proxy',
    '\x00/tmp/ag-grid-example/node_modules/compression/node_modules/debug/src/browser.js?commonjs-module',
    '\x00/tmp/ag-grid-example/node_modules/compression/node_modules/debug/src/node.js?commonjs-module',
    '\x00tty?commonjs-external',
    '\x00util?commonjs-external',
    '\x00fs?commonjs-external',
    '\x00net?commonjs-external',
    '\x00/tmp/ag-grid-example/node_modules/negotiator/lib/charset.js?commonjs-module',
    '\x00/tmp/ag-grid-example/node_modules/negotiator/lib/encoding.js?commonjs-module',
    '\x00/tmp/ag-grid-example/node_modules/negotiator/lib/language.js?commonjs-module',
    '\x00/tmp/ag-grid-example/node_modules/negotiator/lib/mediaType.js?commonjs-module',
    '\x00/tmp/ag-grid-example/node_modules/compression/node_modules/debug/src/debug.js?commonjs-module'
  ]
}

Most annoyingly, it seems the client builds successfully but the server fails to build. I only render the grid on the client, so why is the server even trying to include it?

Has anybody had any luck using ag-grid in a solid-start project?

Does anybody have any advice for what I can do to get any further?

• I would prefer to use renderStream so the page renders instantly while data and ag-grid is streaming down. Why does solid-start freeze indefinitely when I try this?
• Why does the server fail to build because of ag-grid when I'm not even using ag-grid on the server side? Can I somehow exclude it so the server doesn't try to build it?

[AlexErrant]

I started to try this on this issue. I really should get back to it x|

onMount might be a solution...

Lifecycles are only run in the browser, so putting code in onMount has the benefit of not running on the server during SSR.