Components undefined when server rendering, working when adding through HMR?

[vast geyser]

**Edit: ** The problem has been fixed, I think.

Hello! I'm migrating a Next.js application to Remix and writing it from scratch in the process. I thought I'd build a quick component library, so we could stop copypasting those around. We have several "apps" in the same brand but no reusability, trying to change that.

As the title states, I managed to get some basic components running in my very standard remix boilerplate, when I just added them in after the page had rendered. However, refreshing the page causes Remix to error out:

Application Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at renderElement (/home/md/Projects/remix/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:6109:9)
    at renderNodeDestructiveImpl (/home/md/Projects/remix/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive (/home/md/Projects/remix/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    ....

I have tried to solve this problem with the help of ChatGPT and now I want to quit, lmao.

I think I've packaged everything correctly...

Here's the repo. It's pretty much "hello world" at this point, but the dev setup works, trying to consume the library... not so much.
https://github.com/MagnumDuck/clib/

Literally rendering text nodes at this point but server rendering them is killing me...

The first image is what I see after HMR, and what I want to see with every render. Second image is what happens when I refresh the page.

[scarlet stirrup]

If you can share a link to a reproduction, that would be helpful

[vast geyser]

sure, I can do a codesandbox but uh... how do I use a github repo as a dependency

[vast geyser]

https://codesandbox.io/p/sandbox/clever-nash-fv2lwv ... for some very unknown reason it works in that environment

I guess those hydration errors might have something to do with it... I cloned the remix template marked official, I tried to install from github but nothing happened. Ended up cloning the repo on my home computer, running npm run build and copypasting the dist folder to that sandbox...

I'm certain it's not my Remix app that's configured wrong ... I got the exact same error now that I tried to use the library in the Next app. Works in HMR, errors in SSR.

[vast geyser]

Since that sandbox didn't work as hoped, I started creating a repo reproduction using npx create-remix, just the basics with TS.

I got an error that I hadn't seen before:

/home/wsl/Projects/ssr-problem/build/index.js:227
var import_clib = require("clib"), import_jsx_dev_runtime3 = require("react/jsx-dev-runtime"), meta = () => [
                  ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/wsl/Projects/clib/dist/index.cjs.js from /home/wsl/Projects/ssr-problem/build/index.js not supported.
index.cjs.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.cjs.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/wsl/Projects/clib/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at Object.<anonymous> (/home/wsl/Projects/ssr-problem/build/index.js:227:19)
    at Object.<anonymous> (/home/wsl/Projects/ssr-problem/node_modules/@remix-run/serve/dist/cli.js:34:13)
^C

So I made the following changes:

diff --git a/package.json b/package.json
index a8b82e9..76d2d4d 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "files": [
     "dist/**/*"
   ],
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.cjs",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "peerDependencies": {
diff --git a/vite.config.ts b/vite.config.ts
index 73cc583..a519eae 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,6 +14,7 @@ console.log('packageJson', packageJson, Object.keys(packageJson.peerDependencies
 export default defineConfig({
   plugins: [
     react({
+      // This didn't help
       // jsxRuntime: 'classic',
     }),
     tsConfigPaths(),
@@ -32,7 +32,7 @@ export default defineConfig({
       formats: ['es', 'cjs'],
       // formats: ['es', 'umd'],
       // formats: ['es'],
-      fileName: (format, entry) => `${entry}.${format}.js`,
+      fileName: (format, entry) => `${entry}.${format === 'es' ? 'es.js' : format}`,
     },
     rollupOptions: {
       external: [...Object.keys(packageJson.peerDependencies)],

... and it also made it work on my existing remix app

as well as the next application