Parcel breaks when import react-syntax-highlighter

[arivanandan]

Current Behavior

This is with tsdx watch.
Importing libraries such as remark-prism or react-syntax-highlighter breaks the app. I don't see anything in the console. All I see is a white screen. If I delay the import (remove it from being a top level import), make it a require inside application logic and try to console log it, it breaks after that. The react root disappears (guessing this is what happens when React breaks) but tsdx is unable to show me the react errors that pop?

Expected behavior

These plugins / libraries work with a normal React project / CRA installation.

Suggested solution(s)

Something with imports / ESM modules maybe?
No clue what's happening. Would love to provide additional information when I know where to look.

Additional context

I'm not running anything special. Ultimately, I'd be using these with react-markdown, but these imports break the app outside, before I can get them inside react-markdown. This is probably irrelevant.

Your environment

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz
    Memory: 3.90 GB / 15.49 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 88.0.1
  npmPackages:
    tsdx: ^0.14.1 => 0.14.1 
    typescript: ^4.1.2 => 4.2.4 
  npmGlobalPackages:
    typescript: 4.1.2

[arivanandan]

This has something to do with how parcel bundles and one of react-syntax-highlighter's requires

swagger-api/swagger-ui#6285
parcel-bundler/parcel#3176