Microbundle: Optional Chaining Breaks Without No Compress Flag

[pkrawc]

Running microbundle --jsx React.createElement will break on the following component unless --no-compress is passed

import * as React from "react"
import { createPortal } from "react-dom"

export default function Portal({ children, type = "avail-portal" }) {
  const portalNode = React.useRef(null)
  const mountNode = React.useRef(null)
  const [s, update] = React.useState({})
  React.useLayoutEffect(() => {
    if (typeof window === "undefined" || !mountNode.current) return
    const owner = mountNode?.current?.ownerDocument
    portalNode.current = owner.createElement(type)
    owner.body.appendChild(portalNode.current)
    update({})
    return () => {
      if (portalNode?.current?.ownerDocument) {
        portalNode?.current?.ownerDocument?.body?.removeChild(
          portalNode.current,
        )
      }
    }
  }, [mountNode])
  return portalNode.current ? (
    createPortal(children, portalNode.current)
  ) : (
    <aside ref={mountNode} />
  )
}

[developit]

I believe this is because we're using @babel/preset-modules for the modern builds, which does not currently include stage-4 transforms like Nullish Coalescing and Optional Chaining. We need to switch to @babel/preset-env now that it has the bugfixes:true option.

FWIW --no-compress is just passing through the optional chaining syntax, which is definitely not something most folks would be expecting to find in an npm package. For now you could enable it by adding a .babelrc containing the following:

{
  "plugins": [
    [
      "@babel/plugin-proposal-optional-chaining",
      {
        "loose": true
      }
    ]
  ]
}

[pkrawc]

Thanks @developit for the workaround for now. Will microbundle consume babel.config.js the same way as a .babelrc?

[pkrawc]

I assume yes but I've only ever seen .babelrc mentioned in the documentation.

[wardpeet]

@pkrawc we should also support babel.config.js if not mistaken.