Update to latest version of next.js

[rrrnld]

Roadmap:

• Fix automatically fixable dependency security issues via npm audit fix
• Update to most recent caniuse-lite browser database
• Update to most recent next.js version
• Update to webpack 5, because it will be the default in upcoming versions of next.js
• Update to react 17, because it will be the default in upcoming versions of next.js
• Test all components in the storybook
• See if this fixes issue Maps not rendered in Edge (v17) on Windows 10 #61

[github-actions]

Deploy preview for rbb-data-storybook ready!

✅ Preview
https://rbb-data-storybook-galz43vlh-errnesto.vercel.app
https://bugfixhousekeeping-tasks-rbb-data.errnesto.vercel.app

Built with commit e0c6387.
This pull request is being automatically deployed with vercel-action

[sophiamersmann]

Note: I just updated next.js to version 10 on a starter-based project and got an error that was related to the css-loader. I haven't investigated further, so not entirely sure this was caused by upgrading next (I didn't get this error when upgrading next on the Geburtskliniken project). Well.. thought this might be useful :)

[rrrnld]

Webpack 5 support is still experimental in storybook even though it seems to work fine in next. I'd postpone the webpack update until it becomes more stable, running two separate webpack versions at the same time actually sounds pretty close to what I imagine hell to be like.

[sophiamersmann]

I tested this in Lambdatest on Windows 10 + Edge v17

• The map is now rendered ✅
• The storybook doesn't load (the main layout is outlined but the spinner just keeps spinning). Looking in the dev tools gives Object doesn’t support property or method ‘attachShadow’ as one of many errors but I believe this is the root error. I guess, we'll need a polypfill then (z.B. https://www.npmjs.com/package/@webcomponents/shadydom ? or https://github.com/webcomponents/polyfills ?) but it appears this problem persists only in development (IE11, development, HMR: Object doesn't support property or method 'attachShadow'.  vercel/next.js#13231) Actually, I ran this again and now get another error: SCRIPT1028: Expected identifier, string or number which could be... pretty much anything. 🤷🏻‍♀️ We will probably need to add in some more babel plugins though (storybook not working (IE11 & chromium) storybookjs/storybook#9242 or Storybook interface not loading on IE11 storybookjs/storybook#8884 (these are IE issues but they seem to be related to ours))

[rrrnld]

Fair enough! To be honest, rendering the storybook is not a priority in IE. The storybook is part of the developer experience, and I don't see IE playing an important role in that any time soon.