diff --git a/src/widget.tsx b/src/widget.tsx index 7a1995a..d898dcc 100644 --- a/src/widget.tsx +++ b/src/widget.tsx @@ -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"; +import * as ReactReconciler from "react-reconciler"; import * as ReactDOM from 'react-dom'; // @ts-ignore import * as ReactDOMClient from 'react-dom/client'; @@ -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) { @@ -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);