[Bug] Got triggerDynamicRequireError when I try to integrate monaco-editor into Flipper

[buptfarmer]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Code

I am integrating monaco-editor into project Flipper(https://github.com/facebook/flipper)

I hope it could be used as an normal component, but it load with an error thrown. 
'ReferenceError: triggerDynamicRequireError' , it seems that in monaco-editor which use require internally. and Flipper made a intercept of require call.

I wonder how can I integrate this monaco-editor in to flipper project.

"error" event intercepted: ReferenceError: triggerDynamicRequireError is not defined
at configureLoader (http://localhost:3000/app/src/init.bundle?platform=web&dev=true&minify=false:448476:5)

at HTMLScriptElement.loaderScript.onload (http://localhost:3000/app/src/init.bundle?platform=web&dev=true&minify=false:448454:14)

### Actual Behavior


"error" event intercepted: ReferenceError: triggerDynamicRequireError is not defined
at configureLoader (http://localhost:3000/app/src/init.bundle?platform=web&dev=true&minify=false:448476:5)

at HTMLScriptElement.loaderScript.onload (http://localhost:3000/app/src/init.bundle?platform=web&dev=true&minify=false:448454:14)

### Expected Behavior

load success

### Additional Context

https://github.com/facebook/flipper/issues/3723

To Reproduce
integrate monaco-editor into Flipper with code snippet

// PPEditor.tsx

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 */

import {Layout, styled, colors} from '../ui';
import React, {useEffect} from 'react';
import {Tab, Tabs, _Sidebar, theme} from 'flipper-plugin';
import {Button, Card, Image} from 'antd';
import {QRCode, toDataURL, toCanvas} from 'qrcode';
// import {Editor} from './Editor';
import Editor, {DiffEditor, useMonaco, loader} from '@monaco-editor/react';

const MainContainer = styled(Layout.Container)({
  background: theme.backgroundWash,
  padding: `${theme.space.large}px ${theme.space.large}px ${theme.space.large}px 0`,
  overflow: 'hidden',
});

function handleClick(event: any) {
  console.log('editor clicked:', event);
  const ipAddress = '11.11.11.11';
  const port = '6666';
  const id = 123;
  const ppJsonUrl = 'http://' + ipAddress + ':' + port + '/powerpage?&id=' + id;

  const qrcodeContent =
    'jym://com.jym.mall/open?pageType=powerpage&pp_debugger=true&ppJsonUrl=' +
    encodeURIComponent(ppJsonUrl);

  toDataURL(qrcodeContent, function (err, url) {
    console.log(url);
  });
  toCanvas(
    document.getElementById('qrcodeCanvas'),
    qrcodeContent,
    {errorCorrectionLevel: 'H'},
    function (error) {
      if (error) console.error(error);
      console.log('success!');
    },
  );
}

export function PPEditor() {
  const monaco = useMonaco();

  useEffect(() => {
    if (monaco) {
      console.log('here is the monaco instance:', monaco);
    }
  }, [monaco]);

  return (
    <MainContainer>
      <Layout.Horizontal>
        <Layout.Container borderRight width={200}>
          <Button
            type="primary"
            shape="default"
            size="middle"
            loading={false}
            disabled={false}
            onClick={handleClick}>
            点击生成二维码
          </Button>
          <Card title="二维码内容" id="queryPowerPageByIdResult">
            空
          </Card>
          <Card title="二维码">
            <Image
              width={150}
              height={150}
              src="error"
              fallback="data:image/png;base64,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"></Image>
          </Card>

          <div color={colors.blackAlpha30}>
            <canvas
              id="qrcodeCanvas"
              width={200}
              height={200}
              color={colors.green}></canvas>
          </div>
        </Layout.Container>
        <Layout.Container width={800} height={400}>
          content
          {/* <Editor
            height="90vh"
            defaultLanguage="javascript"
            defaultValue="// some comment"
          /> */}
        </Layout.Container>
      </Layout.Horizontal>
    </MainContainer>
  );
}

Environment
// package.json
    "@monaco-editor/loader": "^1.3.1",
    "@monaco-editor/react": "^4.4.4",
    "monaco-editor": "^0.33.0",
    "qrcode": "^1.5.0",

I am using the latest code of Flipper from branch main, with commit
commit https://github.com/facebook/flipper/commit/71503308f0016029b0915c21cc3e323b74248162 (HEAD -> main)
Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed May 4 04:55:29 2022 -0700