Редактор Монако In Electron с React

Question

Предисловие

Я не веб-разработчик. Я повторюсь, я не веб-разработчик. Я только начал знакомиться с миром npm, JS, TS, React и т. Д., Исходящим из очень ориентированного на мобильные устройства / десктоп фона. Пожалуйста, дайте какие-нибудь ответы в стиле Барни в знак признания этого.

конспект

Я пытаюсь заставить Microsoft Monaco Editor работать в Electron с React, используя Electron Forge. Однако я не понимаю полученную ошибку. Я читал кое-что о проблемах с нестандартными способами, которые Microsoft использует для загрузки AMD, с которыми у людей были проблемы в течение многих лет. Я не могу определить решение, основываясь на моих выводах. Ближайший пост, который я нашел, не имеет ответа. Я попробовал тот же процесс для Ace Editor, и он работал отлично; тем не менее, я бы предпочел использовать редактор Monaco в моем приложении, если это возможно.

---

Электрон + Реакт + Монако

$ electron-forge init electron-monaco-test --template=react
$ cd electron-monaco-test
$ yarn add react-monaco-editor

Затем я редактирую src/app.jsx для:

import React from 'react';
import MonacoEditor from 'react-monaco-editor';

export default class App extends React.Component {
  render() {
    return <MonacoEditor language='javascript' />;
  }
}

Затем:

$ npm start

Я получаю следующее сообщение об ошибке module.js:545:

Uncaught Error: Не удается найти модуль 'monaco-editor' в Module._resolveFilename (module.js:543:15) в Function.Module._resolveFilename (/Users/Zac/Dev/ электрон-монако-тест /node_modules/electronic /dist/Electron.app/Contents/Resources/electron.asar/common/reset-search-paths.js:35:12) в Function.Module._load (module.js:473:25) в Module.require (module.js:586:17) по требованию (внутренний /module.js:11:18) по объекту. (/Users/Zac/Dev/electron-monaco-test/node_modules/react-monaco-editor/lib/editor.js:11:21) в объекте. (/Users/Zac/Dev/electron-monaco-test/node_modules/react-monaco-editor/lib/editor.js:188:3) в Module._compile (module.js:642:30) в Object.require. расширения. (анонимная функция) [as .js] (/Users/Zac/Dev/electron-monaco-test/node_modules/electron-compile/lib/require-hook.js:77:14) в Module.load (модуль. JS:561:32)

Я также попытался добавить monaco-editor как прямая зависимость проекта, но это тоже не сработало.

---

Электрон + Реакт + Туз Редактор

Когда я применяю точно такой же процесс к Ace Editor, он просто работает.

$ electron-forge init electron-ace-test --template=react
$ cd electron-ace-test
$ yarn add react-ace

src/app.jsx:

import React from 'react';
import AceEditor from 'react-ace'

import 'brace/theme/github'
import 'brace/mode/javascript'

export default class App extends React.Component {
  render() {
    return (
      <AceEditor
        mode='javascript'
        theme='github' />
    );
  }
}

Затем:

$ npm start

---

Любые предложения о том, как исправить настройки для Монако?