Imports not finding modules and namespaces with react-monaco-editor in typescript files in Electron

问题

I am trying to use the react-monaco-editor npm package component to import the monaco editor into my react application. These are the version of the packages I downloaded from npm:

"react-monaco-editor": "^0.13.0",
"@types/react-monaco-editor": "^0.10.0"

Everything seems to be working great (Less, html, javascript and even doing requires in javascript), except I am getting syntax errors saying that I can't find modules I am importing or namespaces (such as Electron). This is an example error of one of the typescript files trying to import a module and also the error for not being able to find the Electron namespace.

This is the same code in VS Code with their usage of the monaco editor:

This is the example of the code I am using where I am referencing the MonacoEditor component.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import MonacoEditor from 'react-monaco-editor';

import { IEditorFile, IEditorFilePassedProps, IEditorFileReduxProps } from './editor-file-interfaces';
import { IReduxState } from '../../shared/interfaces/redux-state';

import './editor-file.less';

class EditorFile extends Component<IEditorFile, any> {
    editor = null;

    constructor(props: IEditorFile) {
        super(props);

        this.state = {
            code: this.props.file.content
        };
    }

    componentWillReceiveProps(nextProps: any) {
        if (typeof nextProps.file !== undefined) {
            this.setState({ code: nextProps.file.content });
        }
    }

    render() {
        const code = this.state.code;
        const options = {
            selectOnLineNumbers: true,
            roundedSelection: false,
            readOnly: false,
            cursorStyle: 'line',
            automaticLayout: false
        };

        return (
            <div>
                <div className='file-content-container'>
                    <MonacoEditor
                        language={this.props.file.fileType}
                        value={code}
                        theme='vs-dark'
                        options={options}
                    />
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state: IReduxState): IEditorFileReduxProps => {
    return {
        fileExplorerInfo: state.fileExplorer
    };
};

export default connect<IEditorFileReduxProps, null, IEditorFilePassedProps, IReduxState>(mapStateToProps)(EditorFile);

The language that is being passed into the MonacoEditor component is "typescript" for the tsx/ts files. I am not sure how to go about this so any help is greatly appreciated!

来源：https://stackoverflow.com/questions/48698674/imports-not-finding-modules-and-namespaces-with-react-monaco-editor-in-typescrip

标签

javascript

node.js

reactjs

ecmascript-6

monaco-editor