monaco-react: Uncaught TypeError: Cannot read property 'config' of undefined

Describe the bug A clear and concise description of what the bug is.

To Reproduce

window.require (discussed below) is undefined. Is there something about this webpack config that would be problematic? How/where is window.require defined?

Webpack Config

{
  mode: 'development',
  entry: './src/client/index',
  output: {
    filename: '[name].js',
    libraryTarget: 'system',
    path: '/Users/pmikitsh/git/apps/packages/data-query/dist',
    uniqueName: 'data-query',
    devtoolNamespace: 'data-query',
    publicPath: 'http://0.0.0.0:9010/'
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)x?$/,
        exclude: /node_modules/,
        use: {
          loader: '/Users/pmikitsh/git/apps/node_modules/babel-loader/lib/index.js'
        }
      },
      {
        test: /\.css$/i,
        include: [ /node_modules/, /src/ ],
        use: [
          {
            loader: '/Users/pmikitsh/git/apps/node_modules/style-loader/dist/cjs.js'
          },
          {
            loader: '/Users/pmikitsh/git/apps/node_modules/css-loader/dist/cjs.js',
            options: { modules: false }
          }
        ]
      },
      {
        test: /\.(bmp|png|svg|jpg|jpeg|gif|webp)$/i,
        exclude: /node_modules/,
        type: 'asset/resource'
      },
      {
        test: /\.html$/i,
        exclude: /node_modules/,
        type: 'asset/source'
      },
      { test: /\.ttf$/, use: [ 'file-loader' ] }
    ]
  },
  devtool: 'source-map',
  devServer: {
    compress: true,
    historyApiFallback: true,
    headers: { 'Access-Control-Allow-Origin': '*' },
    firewall: false,
    client: { host: 'localhost' },
    port: 9010,
    https: false
  },
  externals: [],
  plugins: [
    BundleAnalyzerPlugin {
      opts: {
        analyzerMode: 'disabled',
        analyzerHost: '127.0.0.1',
        reportFilename: null,
        reportTitle: [Function (anonymous)],
        defaultSizes: 'parsed',
        openAnalyzer: true,
        generateStatsFile: false,
        statsFilename: 'stats.json',
        statsOptions: null,
        excludeAssets: null,
        logLevel: 'info',
        startAnalyzer: true,
        analyzerPort: 8888
      },
      server: null,
      logger: Logger {
        activeLevels: Set(4) { 'info', 'warn', 'error', 'silent' }
      }
    },
    SystemJSPublicPathWebpackPlugin {
      options: {
        systemjsModuleName: '@platform-ui/data-query',
        rootDirectoryLevel: undefined
      }
    },
    HtmlWebpackPlugin { userOptions: {}, version: 5 },
    StandaloneSingleSpaPlugin {
      options: {
        isParcel: false,
        activeWhen: [ '/' ],
        importMap: { imports: {} },
        disabled: true,
        HtmlWebpackPlugin: [class HtmlWebpackPlugin] {
          version: 5,
          getHooks: [Function: getHtmlWebpackPluginHooks],
          createHtmlTagObject: [Function: createHtmlTagObject]
        },
        appOrParcelName: '@platform-ui/data-query'
      }
    },
    ForkTsCheckerWebpackPlugin {
      options: { typescript: { mode: 'write-references' } }
    }
  ],
  resolve: {
    extensions: [
      '.mjs',  '.js',
      '.jsx',  '.wasm',
      '.json', '.ts',
      '.tsx'
    ],
    fallback: {
      assert: '/Users/pmikitsh/git/apps/node_modules/assert/assert.js',
      buffer: '/Users/pmikitsh/git/apps/node_modules/buffer/index.js',
      child_process: false,
      cluster: false,
      console: '/Users/pmikitsh/git/apps/node_modules/console-browserify/index.js',
      constants: '/Users/pmikitsh/git/apps/node_modules/constants-browserify/constants.json',
      crypto: '/Users/pmikitsh/git/apps/node_modules/crypto-browserify/index.js',
      dgram: false,
      dns: false,
      domain: '/Users/pmikitsh/git/apps/node_modules/domain-browser/source/index.js',
      events: '/Users/pmikitsh/git/apps/node_modules/events/events.js',
      fs: false,
      http: '/Users/pmikitsh/git/apps/node_modules/stream-http/index.js',
      https: '/Users/pmikitsh/git/apps/node_modules/https-browserify/index.js',
      module: false,
      net: false,
      os: '/Users/pmikitsh/git/apps/node_modules/os-browserify/browser.js',
      path: '/Users/pmikitsh/git/apps/node_modules/path-browserify/index.js',
      punycode: '/Users/pmikitsh/git/apps/node_modules/node-libs-browser/node_modules/punycode/punycode.js',
      process: '/Users/pmikitsh/git/apps/node_modules/process/browser.js',
      querystring: '/Users/pmikitsh/git/apps/node_modules/querystring-es3/index.js',
      readline: false,
      repl: false,
      stream: '/Users/pmikitsh/git/apps/node_modules/stream-browserify/index.js',
      _stream_duplex: '/Users/pmikitsh/git/apps/node_modules/readable-stream/duplex.js',
      _stream_passthrough: '/Users/pmikitsh/git/apps/node_modules/readable-stream/passthrough.js',
      _stream_readable: '/Users/pmikitsh/git/apps/node_modules/readable-stream/readable.js',
      _stream_transform: '/Users/pmikitsh/git/apps/node_modules/readable-stream/transform.js',
      _stream_writable: '/Users/pmikitsh/git/apps/node_modules/readable-stream/writable.js',
      string_decoder: '/Users/pmikitsh/git/apps/node_modules/string_decoder/lib/string_decoder.js',
      sys: '/Users/pmikitsh/git/apps/node_modules/node-libs-browser/node_modules/util/util.js',
      timers: '/Users/pmikitsh/git/apps/node_modules/timers-browserify/main.js',
      tls: false,
      tty: '/Users/pmikitsh/git/apps/node_modules/tty-browserify/index.js',
      url: '/Users/pmikitsh/git/apps/node_modules/url/url.js',
      util: '/Users/pmikitsh/git/apps/node_modules/node-libs-browser/node_modules/util/util.js',
      vm: '/Users/pmikitsh/git/apps/node_modules/vm-browserify/index.js',
      zlib: '/Users/pmikitsh/git/apps/node_modules/browserify-zlib/lib/index.js'
    }
  },
  stats: 'errors-warnings'
}

Expected behavior A clear and concise description of what you expected to happen.

No runtime error is thrown

Screenshots If applicable, add screenshots to help to explain your problem.

Desktop (please complete the following information):

OS: [e.g. iOS] Mac
Browser [e.g. chrome, safari] Chrome
Version [e.g. 22] Latest

Additional context Add any other context about the problem here.

In file node_modules/@monaco-editor/loader/lib/es/loader/index.js:

function configureLoader() {
  var state = getState(function (_ref3) {
    var config = _ref3.config,
        resolve = _ref3.resolve,
        reject = _ref3.reject;
    return {
      config: config,
      resolve: resolve,
      reject: reject
    };
  });
  var require = window.require;

  require.config(state.config);

I am observing that window.require is undefined.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 16 (4 by maintainers)

Most upvoted comments

@petermikitsh I see, the problem is that systemJS define function is conflicting with monaco-loader define function. To avoid it one option is doing something like this. So, try this instead of index.js of your example:

import React from "react";
import ReactDOM from "react-dom";
import Editor from "@monaco-editor/react";

const systemJsDefine = window.define;
window.define = null;

function App() {
  function handleEditorMount() {
    window.define = systemJsDefine;
  }

  return (
    <Editor
      height="90vh"
      onMount={handleEditorMount}
    />
  )
}

const mount = document.createElement("div");
document.body.appendChild(mount);

ReactDOM.render(<App />, mount);

Check the monaco-loader source. Search for if (typeof AMDLoader.global.define !== 'function' || !AMDLoader.global.define.amd) {. The existing global.define doesn’t let it to initialize the monaco-loader

suren-atoyan on May 23, 2021

I help maintain SystemJS - here’s an issue where I discussed a similar problem with other systemjs users. Deleting window.define and reinstating it later is a good option, or deleting the entire amd.js extra if you can.

joeldenning on May 27, 2021