Dynamic component hydrates to wrong component

[fverloop]

When wrapping components from a production library (built with Webpack), Monobase swaps out the static component for another dynamic component. The wrapped component uses the compiled component name as an identifier, maybe that's causing a naming conflict: data-component-props="["Component.e",{},[]]"?

See in action here: https://www.dropbox.com/s/3rr017zc53jeg0f/dynamic.m4v?dl=0

Here's how the production component is imported and wrapped:

import { Dynamic } from "monobase"
import * as fraction from "@framerjs/fraction"

export const Navigation = Dynamic(fraction.Navigation)

I've tried to make fraction use another identifier, but doesn't work:

import { Dynamic } from "monobase"
import * as fraction from "@framerjs/fraction"

const StaticNavigation = fraction.Navigation
export const Navigation = Dynamic(StaticNavigation)

[koenbok]

This is a minifying issue. You can see the component name becomes e. We should can likely tweak Terser to nog mangle class names:

--keep-classnames
--keep-fnames

[koenbok]

Hey weird, that's already in there: https://github.com/framer/monobase/blob/master/src/compiler.ts#L32