vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.87k stars 26.66k forks source link

dynamic import with ssr:false behavior #4161

Closed ghost closed 6 years ago

ghost commented 6 years ago

Hi all,

I have integrated material-ui and aphrodite in my current project, merging those two exemples https://github.com/mui-org/material-ui/tree/v1-beta/examples/nextjs https://github.com/zeit/next.js/tree/canary/examples/with-aphrodite

so far so good, everything renders properly on the server and the client.

Recently I've integrated react-map-gl (a mapbox-gl wrapper for react). Of course, when importing the project, I get an error on the Window object since this package needs to be render on the client. So I've used a dynamic import using ssr: false, ant it works in dev and production, great.

However, I've tried to see how google bot sees it (I use page speed insight instead of fetch and render as google), and I've notices the nextJS error message : 'an unexpected error has occured'.

After further investigations, I found out that, by removing _document.js (used to integrate aphrodite and material-ui), the map renders without error with google bot (showing only the dynamic import loading component).

So my questions are :

Thanks a lot.

ghost commented 6 years ago

my bad, just found out about the sentry example... I'm going to configure that.