Issues with tree-shaking on tldraw

[mrn3]

🐛 bug report

Parcel has a runtime error even though I build fine. This only happens after adding the tldraw library.

Uncaught TypeError: Cannot read properties of undefined (reading 'key')
  at W (index.9f8f1ec8.js:sourcemap:91:58393) at Array.forEach (<anonymous>) 
  at c (index.9f8f1ec8.js:sourcemap:91:45866) at Object.<anonymous> (index.9f8f1ec8.js:sourcemap:91:43275) 
  at 1 (react.22dff9ba.js:sourcemap:1:402) at Object.<anonymous> (index.9f8f1ec8.js:sourcemap:91:20307)
  at 1 (react.22dff9ba.js:sourcemap:1:402) at Object.<anonymous> (index.9f8f1ec8.js:sourcemap:91:4150)
  at 1 (react.22dff9ba.js:sourcemap:1:402) at Object.<anonymous> (index.9f8f1ec8.js:sourcemap:85:2988) 

🎛 Configuration (.babelrc, package.json, cli command)

{
  "presets": [
    ["@babel/env", {
      "bugfixes": true
    }],
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-export-default-from"
  ]
}

🤔 Expected Behavior

It should render the page properly

😯 Current Behavior

That error is thrown and it doesn't render the UI

💁 Possible Solution

So a workaround I have found is to add the --no-scope-hoist to the yarn build and it works. So basically if we bypass the tree-shaking, it works, so there must be some bug in the tree-shaking logic.

🔦 Context

I am not able to render the UI with this bug. As soon as I add https://www.npmjs.com/package/tldraw to my project, it creates this problem, so perhaps there is some dependency in there that is causing the tree-shaking algorithm in parcel some issues.

If we don't have tree-shaking, it makes the bundle go from 50 kB to 2.5 MB!

manewman@Matts-MacBook-Pro athena % yarn size
yarn run v1.22.22
$ size-limit
  
  Package size limit has exceeded by 2.42 MB
  Size limit: 100 kB
  Size:       2.52 MB brotlied

💻 Code Sample

import { Flex } from '@adobe/react-spectrum';
import React from 'react';
import { Tldraw } from 'tldraw';
import { getAssetUrls } from '@tldraw/assets/selfHosted';
import { useSyncDemo } from '@tldraw/sync';
import 'tldraw/tldraw.css';

const assetUrls = getAssetUrls({
  baseUrl: process.env.NODE_ENV === 'production' ? process.env.PUBLIC_PATH : '/'
});

const Whiteboard = (props: WhiteboardProps) => {
  const { imsToken } = props;
  console.log('imsToken', imsToken);
  const store = useSyncDemo({ roomId: 'hello' });

  return (
    <Flex direction="column" width="100%" height="100%">
      <Tldraw store={store} assetUrls={assetUrls} />
    </Flex>
  );
};

export { Whiteboard };

🌍 Your Environment

Software	Version(s)
Parcel	2.13.2
Node	20
npm/Yarn	1.22.22
Operating System	macOS