"useEffect" is not exported by "node_modules/react/index.js"

[gabrielbacha]

I have built an R3F app using Astro.js. When running dev it works properly. I am trying to export it to a static website using build but I get the below error. I am not using zustand directly but it is a dependency for the below

├─┬ @react-three/drei@9.108.3
│ ├─┬ tunnel-rat@0.1.2
│ │ └── zustand@4.5.4
│ └── zustand@3.7.2
├─┬ @react-three/fiber@8.16.8
│ └── zustand@3.7.2 deduped
├─┬ leva@0.9.35
│ └── zustand@3.7.2 deduped
└─┬ r3f-perf@7.2.1
└── zustand@4.5.4

"useEffect" is not exported by "node_modules/react/index.js", imported by "node_modules/zustand/esm/index.js".
file: node_modules/zustand/esm/index.js:1:44

1: import { useReducer, useRef, useDebugValue, useEffect, useLayoutEffect } from 'react';

[dai-shi]

Would you be able to create a reproduction with https://stackblitz.com ?

[gabrielbacha]

Managed to get the build to work by changing the astro config to

import { defineConfig } from "astro/config";
import react from "@astrojs/react";
import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";
import robotsTxt from "astro-robots-txt";

// https://astro.build/config
export default defineConfig({
  output: "static",
  build: {
    format: "file",
    emptyOutDir: true,
  },
  vite: {
    build: {
      commonjsOptions: {
        include: [/node_modules/],
        exclude: [],
      },
      modulePreload: true,
      minify: false,
      sourcemap: true,
    },
    logLevel: "info",
    ssr: {
      noExternal: ["@react-three/fiber", "@react-three/drei", "zustand"],
    },
    optimizeDeps: {
      include: ['react', 'react-dom', '@react-three/fiber', '@react-three/drei', 'zustand', 'three'],
      exclude: ['@react-three/fiber']
    },
    resolve: {
      dedupe: ['react', 'react-dom'],
    },
  },
  compressHTML: false,
  integrations: [
    react({
      include: ['**/react/*', '**/react-three-fiber/*'],
      ssr: true,
    }),
    tailwind({}),
    sitemap(),
    robotsTxt()
  ],
  devToolbar: { enabled: false },
});