Skip to content

Commit

Permalink
fix: add more react modules to the import map
Browse files Browse the repository at this point in the history
My guess is this has changed in esm.sh, but we needed
react/jsx-runtime for mui to work
and the others seem to be needed for a package like
threejs-fiber.
  • Loading branch information
maartenbreddels committed Dec 19, 2023
1 parent a081714 commit b26a91f
Showing 1 changed file with 17 additions and 6 deletions.
23 changes: 17 additions & 6 deletions src/widget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import {

import * as React from 'react';
import { useEffect, useState } from 'react';
import * as ReactJsxRuntime from 'react/jsx-runtime';
import * as ReactReconcilerContants from "react-reconciler/constants";

Check failure on line 13 in src/widget.tsx

View workflow job for this annotation

GitHub Actions / build

Cannot find module 'react-reconciler/constants' or its corresponding type declarations.
import * as ReactReconciler from "react-reconciler";

Check failure on line 14 in src/widget.tsx

View workflow job for this annotation

GitHub Actions / build

Cannot find module 'react-reconciler' or its corresponding type declarations.
import * as ReactDOM from 'react-dom';
// @ts-ignore
import * as ReactDOMClient from 'react-dom/client';
Expand Down Expand Up @@ -66,7 +69,14 @@ let react16ESMUrls : any = null;
function ensureReactSetup(version: number) {
if(version == 18) {
if(react18ESMUrls == null) {
react18ESMUrls = {urlReact: expose(React), urlReactDom: expose(ReactDOM)};
react18ESMUrls = {
"react": expose(React),
"react-dom": expose(ReactDOM),
"react/jsx-runtime": expose(ReactJsxRuntime),
"react-dom/client": expose(ReactDOMClient),
"react-reconciler": expose(ReactReconciler),
"react-reconciler/constants": expose(ReactReconcilerContants),
};
}
return react18ESMUrls;
} else if(version == 16) {
Expand Down Expand Up @@ -202,18 +212,19 @@ export class ReactView extends DOMWidgetView {
setScope(compiledCode);
return;
}
const {urlReact, urlReactDom} = ensureReactSetup(this.model.get("react_version"));
const reactImportMap = ensureReactSetup(this.model.get("react_version"));
await ensureImportShimLoaded();
let finalCode = compiledCode;
// @ts-ignore
const importMapWidget = this.model.get("_import_map");
const importMap = {
"imports": {
"react": urlReact,
"react-dom": urlReactDom,
...importMapWidget["imports"]
...reactImportMap,
...importMapWidget["imports"],
},
"scopes": importMapWidget["scopes"]
"scopes": {
...importMapWidget["scopes"]
}
};
// @ts-ignore
importShim.addImportMap(importMap);
Expand Down

0 comments on commit b26a91f

Please sign in to comment.