Why is my useState null in my monorepo setup with vite, react, astro and nextJS?

Question

I created a monorepo with two npm workspaces and the delivered code seems to be correct but still fails.

The setup is like

- package
   - JSX components to export
   - vite config
   - package.json
- react
   - package.json
   - ...
- next (with react)
   - ... 
- astro (with react)
   - ...
- ...

I am using the react components in package in react, next and astro with the near default npm workspace setup

in react/next/astro

"workspaces": [
        "../package"
    ],

"dependencies": [
     "package" : 1.0.1
     ...
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
]

in package

{
    "name": "package",
    "version": "1.0.1",
    "description": "",
    "type": "module",
    "main": "./dist/components.bundle.min.js",
    "module": "./dist/components.bundle.min.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "node --max_old_space_size=16384 ./node_modules/vite/bin/vite.js build"
    },
    "exports": {
        ".": {
            "import": "./dist/components.bundle.min.js"
        }
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@vitejs/plugin-react": "^4.0.3",
        "terser": "^5.19.0"
    },
    "dependencies": {
        "@babel/plugin-transform-runtime": "^7.22.9",
        "@rollup/plugin-babel": "^6.0.3",
        "@vitejs/plugin-legacy": "^4.1.0",
        "rollup-plugin-node-externals": "^6.1.1",
        "vite": "^4.4.4"
    },
    "peerDependencies": {
        "react": "18.2.0",
        "react-dom": "18.2.0"
    },
    "browserslist": [
        "> 0.5%",
        "not dead"
    ]
}

As you can see, i am using vite as a bundler and i guess the problem lies in my vite configuration:

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { babel } from "@rollup/plugin-babel";

export default defineConfig({
    
    plugins: [
        react(),
        babel({
            babelHelpers: "runtime",
            extensions: [".js", ".jsx", ".es6", ".es", ".mjs", "ts"],
        }),
    ],
    esbuild: {
        jsxFactory: "React.createElement",
        jsxFragment: "React.Fragment",
    },
    // optimizeDeps: {
    //     include: ["./Components/**/*.jsx"],
    // },
    build: {
        minify: false,
        
        lib: {
            // Could also be a dictionary or array of multiple entry points
            entry: "./components/TestComponent.jsx",
            name: "jsxvideotest",
            fileName: "components.bundle.min",
        },
        rollupOptions: {
            // into your library
            external: ["react"],
            output: {
                globals: {
                    react: "React",
                },
            },
        },
    },
    resolve: {
        dedupe: ["react", "react-dom"],
    }
});

.I tried running vite build with npm run build . This works, as well as importing the components to react/next/astro, but in react and next, the compiling fails with the error message Uncaught TypeError: dispatcher is null . In astro, this is not happening. Another interesting effect is that the error message changes to Uncaught TypeError: Cannot read properties of null (reading 'useState') if im using chrome instead of firefox.
Additionally there are those typical errors Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. ...

Do you guys know why this is happening? I can provide more informations about the monorepo if you need them, the setup is pretty big so i shortened it down.

Answer 1

For me, I had to ensure my component was client-side only using client:only="react", or whichever for your framework.

<Component client:only="react" />

Read more here: https://docs.astro.build/en/core-concepts/framework-components/#hydrating-interactive-components