Блог

Главная - Вопросы по программированию - monaco-редактор в React с использованием TypeScript -> не удается найти модуль ‘monaco-editor’

monaco-редактор в React с использованием TypeScript -> не удается найти модуль ‘monaco-editor’

#reactjs #typescript #webpack-dev-server #monaco-editor

#reactjs #typescript #webpack-dev-server #monaco-редактор

Вопрос:

Я пытался интегрировать monaco-editor в приложение React. Я добился успеха, но все еще сталкиваюсь с проблемами. Ниже я предоставил подробную информацию о моей настройке разработки.

У меня есть файл tsconfig.json, настроенный следующим образом:

 {
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "lib": ["dom", "es5", "es2015.collection", "es2015.promise", "dom.iterable"],
    "jsx": "react",
    "sourceMap": true,
    "checkJs": false,
    "outDir": "./dist",
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "./node_modules",
    "typeRoots": ["node_modules/@types"],
    "allowJs": true,
    
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,

    "preserveConstEnums": true,    
    "isolatedModules": true
  },

  "include": ["./src/**/*"],
  "exclude": ["node_modules"]  
}

И в моем package.json скрипты настроены следующим образом:

 "scripts": {
    "test": "jest",
    "start": "webpack serve",
    "server": "nodemon --exec ts-node server.tsx",
    "build": "webpack -w --mode=development"
  }

Сценарий запуска использует webpack-dev-server, а сервер использует ts-node для запуска моего файла server.tsx.

Monaco-editor импортируется в файл React component .tsx как import * as monaco from 'monaco-editor';

Когда я запускаю эту команду: npm run start которая использует webpack-dev-server, все сделано хорошо, и я могу видеть свое приложение в браузере.

Однако, когда я запускаю эту команду: npm run server которая использует ts-node для выполнения файла server.tsx, я получаю эту ошибку:

 Error: Cannot find module 'monaco-editor'
Require stack:
- D:DevelopmentWorkstationVividCodes.UI_OLDsrccomponentsTestMonaco.tsx
- D:DevelopmentWorkstationVividCodes.UI_OLDsrccomponentsApp.tsx       
- D:DevelopmentWorkstationVividCodes.UI_OLDserver.tsx
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)

Это копия содержимого файла server.tsx:

 import express from 'express';
import * as React from 'react';
import ReactDOMServer from 'react-dom/server';

import App from './src/components/App';

const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');

const webpackHotMiddleware = require('webpack-hot-middleware');

const server = express();
const compiler = webpack(config);
const port = 3000;

server.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  })
);

server.use(webpackHotMiddleware(compiler));

server.get('/', (req: any, res: any) => {
  const initialMarkup = ReactDOMServer.renderToString(<App />);  
  console.log(initialMarkup);

  res.send(`
    <html>
      <head>
        <title>Monaco_Editor</title>
      </head>
      <body>
        <div id="mountNode">${initialMarkup}</div>
        <script src="/app.bundle.js"></script>
        <script src="/editor.worker.bundle.js"></script>
        <script src="/json.worker.bundle.js"></script>
        <script src="/css.worker.bundle.js"></script>
        <script src="/html.worker.bundle.js"></script>
        <script src="/ts.worker.bundle.js"></script>
      </body>
    </html>
  `)
});

server.listen(port, () => console.log(`Server started on port: ${port}`));

Мой план состоял в том, чтобы использовать правильный пользовательский сервер для динамического отображения моих компонентов, а не делать это на стороне клиента.

Комментарии:

1. Я думаю, вам нужно установить типы для Monaco-editor. Попробуйте установить react-monitor-editor, у него есть свои собственные объявления типов

2. Спасибо за ваш комментарий. Неохота использовать другую стороннюю библиотеку. react-monaco-editor выглядит как чей-то личный проект, и я не уверен, что это хорошая идея для производства.

3. Как я могу установить типы для monaco-editor, не используя чужую библиотеку?

4. Таким образом, вы можете установить определение типов от Microsoft, но замечено, что react-monaco-editor имеет собственное объявление типа. Смотрите там : npmjs.com/package/@types/react-monaco-editor

5. Да, я знаю, что у react-monaco-editor есть собственное объявление типа, согласно вашему совету. Честно говоря, я не поклонник этой библиотеки. Мне нужно выяснить, как я могу решить проблему, связанную с «типами», которую вы посоветовали ранее, без использования каких-либо других библиотек. Полагаться на личные проекты для производства не является хорошей практикой.

Ответ №1:

Monaco-editor не поддерживает рендеринг на стороне сервера. Он не может повторно привязаться к существующему DOM-узлу. К сожалению, это должно быть сделано на стороне клиента. И в настоящее время нет планов по реализации функциональности рендеринга на стороне сервера.

Однако для тех, у кого есть такая же проблема, если Webpack — это то, что вы используете для объединения, убедитесь, что вы установили для параметра минимизации значение «true». Таким образом, ваши связанные JS-файлы будут намного меньше. Кроме того, существует «минимальная» версия monaco-editor, которую можно использовать для производства, но она основана на AMD.