Only include client side

next.config.js

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const withTM = require('next-transpile-modules')(['@babylonjs/core', '@babylonjs/gui', 'react-babylonjs'])
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true'
 })
@@ -28,4 +27,4 @@ const nextConfig = {
   }
 }
 
-module.exports = withPlugins([withBundleAnalyzer, withTM], nextConfig)
+module.exports = withPlugins([withBundleAnalyzer], nextConfig)

package.json

@@ -7,7 +7,7 @@
   "author": "Dominic Rubas <dominic.rubas@seriously.ch>",
   "scripts": {
     "build": "ANALYZE=true next build",
-    "dev": "NODE_OPTIONS=--max_old_space_size=4096 next dev",
+    "dev": "next dev",
     "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
     "lint": "eslint --fix .",
     "start": "next start"

pages/index.tsx

@@ -1,8 +1,11 @@
 import 'twin.macro'
 
+import dynamic from 'next/dynamic'
 import Head from 'next/head'
 
-import Wave from '../components/elements/Wave/Wave'
+const WaveDynamic = dynamic(() => import('../components/elements/Wave/Wave'), {
+  ssr: false
+})
 
 export default function Home(): JSX.Element {
   return (
@@ -15,7 +18,7 @@ export default function Home(): JSX.Element {
       <main>
         <h1 tw="bg-gray-100 rounded-xl p-8">Wave</h1>
 
-        <Wave />
+        <WaveDynamic />
       </main>
     </div>
   )