Error: ReactDOMServer does not yet support Suspense.

[andriusmv]

When trying to import GLTF, OBJ or FBX models I get:
"Error: ReactDOMServer does not yet support Suspense"
Expected Behavior
I would expect to be able to load any 3d model into my Canvas.

My next.config.js looks like this:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  reactStrictMode: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
  experimental: {
    concurrentFeatures: true,
  },
  react: {
    useSuspense: false,
    wait: true
  }
});



const withTM = require('next-transpile-modules')(['three'])
module.exports = withTM()

My package.json looks like this:

{
  "name": "mantine-next-template",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "analyze": "ANALYZE=true next build",
    "start": "next start",
    "typecheck": "tsc --noEmit",
    "export": "next build && next export",
    "lint": "next lint"
  },
  "dependencies": {
    "@mantine/core": "^4.0.0",
    "@mantine/dates": "^4.0.0",
    "@mantine/dropzone": "^4.0.0",
    "@mantine/hooks": "^4.0.0",
    "@mantine/modals": "^4.0.0",
    "@mantine/next": "^4.0.0",
    "@mantine/notifications": "^4.0.0",
    "@mantine/prism": "^4.0.0",
    "@mantine/rte": "^4.0.0",
    "@mantine/spotlight": "^4.0.0",
    "@mantine/ssr": "^4.0",
    "@radix-ui/react-icons": "^1.1.0",
    "@react-three/fiber": "^7.0.26",
    "dayjs": "^1.10.8",
    "eslint-import-resolver-typescript": "^2.5.0",
    "firebase": "^9.6.8",
    "next": "^12.0.7",
    "next-auth": "^4.2.1",
    "prism-react-renderer": "^1.2.1",
    "react": "^18.0",
    "react-dom": "18.0",
    "react-firebase-hooks": "^5.0.2",
    "stylis-plugin-rtl": "^2.1.1",
    "three": "^0.138.3"
  },
  "devDependencies": {
    "@mantine/eslint-config": "4.0",
    "@next/bundle-analyzer": "^12.0.7",
    "@types/react": "17.0.37",
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "eslint": "^7.27.0",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jest": "^24.3.6",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "gltf-loader-ts": "^0.3.1",
    "jest": "^26.6.3",
    "next-transpile-modules": "^9.0.0",
    "typescript": "4.5.2"
  }
}

• I've been using the React-ThreeJs Fiber Documentation: https://docs.pmnd.rs/react-three-fiber/tutorials/loading-models
• I've been using Mantine (https://mantine.dev/) for UI.

Thanks.

[CodyJasonBennett]

I'd defer your canvas component to the client with next/dynamic.