Hook errors in MUI Data Grid with fresh install [duplicate]

I had this issue after I replaced Next.js with Vite in the graphile starter. It turns out that you need some custom configurations to make yarn workspaces work with Vite.

I fixed with this Github Copilot prompt running Claude Sonnet 4

Read this next.js config to understand how a next.js app works with `@app/graphql` and apply it to Vite https://github.com/graphile/starter/blob/main/%40app/client/src/next.config.js Currently the `Apollo.query()` from `@app/graphql` doesn't recognize the context provided from `@app/client` `app.tsx`. If the fix is in another place than the vite.config, feel free to change the approach. We are using yarn workspaces.

Here is the starter config https://github.com/graphile/starter/blob/main/%40app/client/src/next.config.js

And here is mine fixed

Very important: Make sure to delete yarn.lock from the @app/client and have one single global yarn.lock for all yarn workspaces.

Vite.config.js

import react from "@vitejs/plugin-react-swc"; import path from "path"; import { defineConfig } from "vite"; import checker from "vite-plugin-checker"; // ---------------------------------------------------------------------- const PORT = 8081; export default defineConfig({ build: { sourcemap: true, rollupOptions: { output: { manualChunks: { react: ["react", "react-dom"], mui: ["@mui/material"], "@app/graphql": ["@app/graphql"], "react-hook-form": ["react-hook-form"], "react-i18next": ["react-i18next"], }, }, }, }, plugins: [ react(), checker({ typescript: true, eslint: { useFlatConfig: true, lintCommand: 'eslint "./src/**/*.{js,jsx,ts,tsx}"', dev: { logLevel: ["error"] }, }, overlay: { position: "tl", initialIsOpen: false, }, }), ], resolve: { alias: [ { find: /^src(.+)/, replacement: path.resolve(process.cwd(), "src/$1"), }, ], }, optimizeDeps: { // Force include the graphql dependency to ensure proper module resolution include: ["graphql", "big.js"], // Exclude workspace packages from optimization to avoid bundling issues exclude: ["@app/graphql", "@app/config"], }, ssr: { // Don't externalize @app/* packages during SSR as they need to be processed noExternal: [/^@app\/.*/], }, server: { port: PORT, host: true, allowedHosts: true, fs: { // Allow serving files from workspace packages allow: [".."], }, }, preview: { port: PORT, host: true }, });

@app/client/tsconfig.json with references to the imported package

"references": [ { "path": "./tsconfig.node.json" }, { "path": "../graphql" }

And @app/client/package.json again with the reference

"@app/graphql": "workspace:*"