ReferenceError: monaco is not defined

Getting “ReferenceError: monaco is not defined”, though editor works fine with syntax highlight.

When component is destroyed, getting another error:

even though I can mount the component again and it works as expected.

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from "./app";

window.MonacoEnvironment = {
    getWorkerUrl(moduleId, label) {
        if (label === 'yaml') {
            return '../yaml.worker.bundle.js';
        }
        return '../editor.worker.bundle.js';
    },
};

ReactDOM.render(<App />, document.getElementById('root'));

YAMLEditor.js

import React, {useEffect, useState} from 'react';
import PropTypes from "prop-types";
import MonacoEditor from 'react-monaco-editor';
import 'monaco-yaml/esm/monaco.contribution';
import {languages} from 'monaco-editor/esm/vs/editor/editor.api';
import 'monaco-editor';

const {yaml} = languages || {};

const YAMLEditor = (props) => {
    const [value, setValue] = useState(props.yamlData);
    useEffect(() => {
        yaml &&
        yaml.yamlDefaults.setDiagnosticsOptions({
            validate: true,
            enableSchemaRequest: true,
            hover: true,
            completion: true
        });
    }, []);

    return (
        <MonacoEditor
            width="800"
            height="600"
            language="yaml"
            value={value}
            onChange={setValue}
        />
    );
};

YAMLEditor.propTypes = {
    // eslint-disable-next-line react/forbid-prop-types
    yamlData: PropTypes.any
};

export default YAMLEditor;

Usages in a lazy loaded component

<YAMLEditor yamlData={this.state.yamlRawContent} />

webpack entry and output:

entry: {
        main: './src/index.js',
        'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
        'yaml.worker': 'monaco-yaml/esm/yaml.worker.js',
        'polyfill': '@babel/polyfill'
}

output: {
        path: path.resolve(__dirname, 'dist'),
        globalObject: 'this',
        publicPath: '/',
        filename: '[name].bundle.js'
}

package.json

"devDependencies": {
    "@babel/core": "7.2.2",
    "@babel/plugin-proposal-class-properties": "7.3.3",
    "@babel/plugin-transform-modules-commonjs": "7.4.0",
    "@babel/plugin-transform-runtime": "7.3.4",
    "@babel/preset-env": "7.7.1",
    "@babel/preset-react": "7.0.0",
    "babel-cli": "6.6.5",
    "babel-core": "6.26.3",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.5",
    "compression-webpack-plugin": "^3.1.0",
    "copy-webpack-plugin": "^5.0.3",
    "cors": "^2.8.5",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.1",
    "enzyme": "3.9.0",
    "enzyme-adapter-react-16": "^1.11.2",
    "eslint": "^5.15.3",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-react": "^7.12.4",
    "eslint-watch": "^5.0.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "gulp": "^4.0.2",
    "gulp-connect": "^5.5.0",
    "gulp-nodemon": "^2.2.1",
    "html-webpack-plugin": "^3.2.0",
    "http-server": "^0.12.3",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.5.0",
    "jest-puppeteer": "^4.1.0",
    "json-update": "^4.0.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "npm-run-all": "^4.1.5",
    "postcss-loader": "2.0.7",
    "puppeteer": "^1.13.0",
    "react-loadable": "^5.5.0",
    "react-test-renderer": "^16.8.6",
    "redux-mock-store": "^1.5.3",
    "sass-loader": "6.0.6",
    "scss-loader": "0.0.1",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.19.1",
    "webpack-async-chunk-names-plugin": "^0.1.1",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.2",
    "axios": "^0.18.0",
    "file-loader": "^3.0.1",
    "font-awesome": "^4.7.0",
    "history": "^4.9.0",
    "immutable": "^4.0.0-rc.12",
    "material-table": "1.34.2",
    "material-ui-slider": "^3.0.8",
    "monaco-yaml": "^2.4.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "monaco-editor": "^0.20.0",
    "react-monaco-editor": "^0.34.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-slick": "^0.25.2",
    "react-swipeable-views": "^0.13.1",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.10.0",
    "redux-saga": "^1.0.2",
    "slick-carousel": "^1.8.1",
    "throttle-debounce": "^2.1.0",
    "yaml-js": "^0.2.3"
  }