Material UI in a Webview

Development Plugins
1

I found a way to do react in a webview, but I can't get material UI to work.

  1. Create the plugin: yo joplin
  2. Install react:
npm i react
npm i react-dom
  1. Make a src/webview/webview.ts file:
import * as ReactDOM from "react-dom";
import * as React from "react";

console.log("reacting",ReactDOM);
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<h2>reacted</h2>);
console.log("reacted",root);
  1. Add the src/index.ts:
import joplin from 'api';

joplin.plugins.register({
	onStart: async function() {
		//Create the panel
		const panels = joplin.views.panels;
		const panel = await panels.create("react_starter");
		await panels.setHtml(panel, `<html>
<body>
    Here's the div:
    <div id="app"></div>
</body>
</html>`);
		await panels.addScript(panel, "./webview/webview.js");
		await panels.show(panel, true);
	},
});
  1. Add the webview.tx to plugin.config.json file:
{
	"extraScripts": ["webview/webview.tsx"]
}
  1. Update webpack.config.js:
function resolveExtraScriptPath(name) {
	...
		return {
		entry: relativePath,
		output: {
			filename: `${nameNoExt}.js`,
			path: distDir
			// path: distDir,
			// library: 'default',
			// libraryTarget: 'commonjs',
			// libraryExport: 'default',
		},
	};
}

See Plugin: unable to use bundled external scripts · Issue #5000 · laurent22/joplin · GitHub why this has to be commented out.

But when I try to import Button from "@mui/material/Button"; in the webview.tsx:

    ERROR in C:\Users\solomonson\git\joplin-plugin-react-starter\node_modules\@mui\system\Unstable_Grid\GridProps.d.ts
    [tsl] ERROR in C:\Users\solomonson\git\joplin-plugin-react-starter\node_modules\@mui\system\Unstable_Grid\GridProps.d.ts(95,90)
          TS1005: '>' expected.

When I upgrade to the latest typescript and types/node, it says something like:

    ERROR in ./src/index.ts
    Module build failed (from ./node_modules/ts-loader/index.js):
    Error: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.
        at Object.resolveTypeReferenceDirective (C:\Users\solomonson\git\joplin-plugin-react-starter\node_modules\typescript\lib\typescript.js:43192:18)

How can I get this to compile?