Dynamically imported component doesn't render/blank screen

[derjp]

Hey there,

I'm working on a little project using three.js and react-three-fiber in Next.js. Since three.js has some issues with running in Node environments (where SSG/SSR happens), I want to use dynamic imports for all components that implement stuff with three.js, so that they only run on the client-side.

This is my code:

// pages/index.tsx

import dynamic from 'next/dynamic';

// Disable SSR, since three.js doesn't play well with it
const Hero = dynamic(() => import('../components/hero'), { ssr: false });

interface HomeProps {}

const Home = () => {
  return <Hero />;
};

export default Home;

In development mode everything works as expected, but when building the app and running next start, the screen stays blank when I visit the server. I also tried exporting the generated files using next export and then serving these files, but my screen stays blank as well.

Here's the full repository: https://github.com/derjp/next-site

Thanks for any help. If you need additional information, just leave a comment.

[derjp]

import dynamic from 'next/dynamic';

// Disable SSR, since three.js doesn't play well with it
const Hero = dynamic(() => import('../components/hero'), { ssr: false });

interface HomeProps {}

const Home = () => {
  return (
    <>
      <h1>Test</h1>
      <Hero />
      <h1>Test</h1>
    </>
  );
};

export default Home;

This code produces following output after being built (notice how the Hero component is completely missing): https://i.imgur.com/rotG9t0.png

[the-halfbloodprince]

I'm having the exact issue... It's happening with me in development also, when I inspect the page the component is completely missing. Have you been able to solve it?

[derjp]

Hi, I didn't solve it unfortunately

[tonyjaimep]

I came across this issue too, what happened was that I was getting an error but it was not being logged anywhere

until I logged the whole component using React DevTools:

Now the error is a bit clearer:

To see what it's about, I'd then go to Network > JS > 2.js

[silvaptk]

This comment helped me a lot! In my case, the error was being set as a prop (error prop) in the loading component (LoadableComponent child component) and it was a ReferenceError being thrown in a child component of the dynamic imported component

<DynamicImportedComponent>
  ... 
  <ChildComponent /> <-- Was throwing a `ReferenceError`
</DynamicImportedComponent>

Hope that it helps someone else!
I also think that Next team should work on the error handling system for dynamic imported components because no error was being thrown in the console or in the terminal

[rinorzek]

Having the same problem here

[batchor]

same problem.

[neoromantic]

Still have same problem. Setting ssr to false helps, but it's non option