Taking care of next/babel preset

[valentinpalkovic]

Resolves #20087
Resolves #21027

What I did:

Moved next/babel preset into codebase to be able to make changes, because it seems that next/babel will not be maintained anymore in favour of swc/Turbopack. Also:

• Fixed inconsistent propTypes handling between dev + build modes in NextJs.
• Removed precompiled @babel/typescript-preset package from next and use the latest one.

Background:

The Next.js babel plugin next/babel behaves differently in development and production modes. It removes React propTypes in production, which is bad because Storybook relies on them to correctly infer the right argTypes. I opened a discussion here at @vercel/nextjs to be able to conditionally still output the proptypes even for a production build. For almost two months nobody replied to this. I assume, that they will not work on any babel-related stuff, because the future at Next.js is Turbopack.

Essentially the plugin-transform-react-remove-prop-types plugin applied here should not be applied on production.

I tried different approaches:

1. My first approach was flattening all plugins in next/babel preset and removing the superfluous plugin-transform-react-remove-prop-types plugin if it is present. The issue is that as soon as I want to look up the babel configuration, I cannot identify a plugin by a specific ID or name, because of how the plugins are set up in next/babel (direct require call).

2. The final approach I have decided on, and which was discussed with @shilman, was to actually copy next/babel and all of its dependencies to modify that one line and reference the modified next/babel preset instead. I really don't like this approach, but I can't think of another solution.

Therefore actually, only the changes in code/frameworks/nextjs/src/preset.ts matter. The other files are more or less copied over with some slight type adjustments.

How to test

The chromatic changes introduced here
https://www.chromatic.com/build?appId=634ff0454a50407deedde524&number=205
should be reverted by
https://www.chromatic.com/build?appId=634ff0d0ec053b270775979d&number=2459

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[kasperpeulen]

Great!