Failed to import some react libraries

[hatemhosny]

Thank you for such a great project.

I noticed that importing some react libraries fails with such errors:

Uncaught TypeError: Cannot read properties of null (reading 'useState')

Examples for failing modules

• tldraw: https://www.npmjs.com/package/tldraw (https://tldraw.dev/)
• @xyflow/react: https://www.npmjs.com/package/@xyflow/react (https://reactflow.dev/)

I tried these code snippets (from official websites of packages) in the playground and they give the same errors

import React from 'https://esm.sh/react'
import { Tldraw } from 'https://esm.sh/tldraw'
// import 'tldraw/tldraw.css'

export default function () {
	return <Tldraw />
}

import React from 'https://esm.sh/react';
import { ReactFlow } from 'https://esm.sh/@xyflow/react';
 
// import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
 
export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges} />
    </div>
  );
}

Additional info

• esm.sh version: latest (135)
• Browser version: latest chrome

[hatemhosny]

The problem was importing multiple instances of react.

this can be fixed by specifying dependencies as external, e.g.:
import { Tldraw } from 'https://esm.sh/tldraw?external=react,react-dom'