Custom node_modules fail to render with googlebot and legacy browsers if they use es2015 or later syntax

[sheerun]

Bug report

Next.js applications that use packages using recent ES6 builtins, like include crash when google bot wants to render them. Google bot uses chrome 41 that is missing some built-ins that are available in node and are more and more popular within JS community, especially universal packages.

Bug can be reproduced with https://github.com/sheerun/with-apollo The app is available at https://sheerun-with-apollo.now.sh/ though you need to deploy it by yourself if you want to test it with https://www.google.com/webmasters/tools/googlebot-fetch-details

The error happens when app imports https://github.com/sheerun/awesome-includes package I've created that uses [].includes internally (there are other npm packages that do similar things). Apollo has nothing to do with this bug (though it used some builtins before that caused similar crash).

The workaround is to transcompile final bundles for production build and embed builtins in within them. I wrote targets-webpack-plugin to fix this but I suspect it'll be too heavy to embed within next.js by default as it uses babel for generating imports for used builtins +rollup for actually injecting builtins, which can cause high memory usage. I hope next.js team will find more lightweight solution.

As shown in reproduction I use newest available next.js 7.

This is continuation of #3205 which only partially fixed the problem.

EDIT: I think ideally next.js would have webpack plugin that discovers builtins used by application and its dependencies and injects their shims into common javascript bundle.

[Enalmada]

Thank you for taking the time to do this. I too hope next.js team could provide a built in solution to reduce the chances that google isn't actually indexing our sites because of something like this that is so easy not to notice.

[timneutkens]

Closing this in favor of #706 and #3056