Monaco-editor в React с использованием TypeScript -> не может найти модуль «monaco-editor»
Я пытался интегрировать 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 импортируется в файл .tsx компонента React как import * as monaco from 'monaco-editor';
Когда я запускаю эту команду: npm run start которая использует webpack-dev-server, все сделано хорошо, и я могу видеть свое приложение в браузере.
Однако, когда я запускаю эту команду: npm run server, которая использует ts-узел для выполнения файла server.tsx, я получаю эту ошибку:
Error: Cannot find module 'monaco-editor'
Require stack:
- D:\Development\Workstation\VividCodes.UI_OLD\src\components\TestMonaco.tsx
- D:\Development\Workstation\VividCodes.UI_OLD\src\components\App.tsx
- D:\Development\Workstation\VividCodes.UI_OLD\server.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.info(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.info(`Server started on port: ${port}`));
Мой план состоял в том, чтобы использовать правильный пользовательский сервер для динамического рендеринга моих компонентов, чем делать это на стороне клиента.
Спасибо за ваш комментарий. Неохота использовать другую стороннюю библиотеку. react-monaco-editor выглядит как чей-то личный проект, и я не уверен, что это хорошая идея для производства.
Как установить типы для monaco-editor, не используя чужую библиотеку?
Таким образом, вы можете установить определение типов из Microsoft, но замечено, что редактор react-monaco имеет собственное объявление типа. Смотрите там: npmjs.com/package/@types/react-monaco-editor
Да, я знаю, что у react-monaco-editor есть собственное объявление типа, согласно вашему совету. Честно говоря, я не фанат этой библиотеки. Мне нужно выяснить, как я могу решить проблему, связанную с «типами», которую вы посоветовали ранее, без использования каких-либо других библиотек. Полагаться на личные проекты для производства — не лучшая практика.
Я не думаю, что дело в файле типизации, ведь он хорошо работает с npm run start. Я подозреваю, что зависимость monaco-editor не упакована для использования с npm run server (как это сделал бы webpack).
Спасибо за ваш комментарий, Майк, я потратил некоторое время, пытаясь понять это. Да, это не связано с типизацией, вместо этого он не все правильно отображает/упаковывает. Чего-то не хватает
Ответы 1
Monaco-editor не поддерживает рендеринг на стороне сервера. Он не может выполнить повторную привязку к существующему узлу DOM. К сожалению, это должно быть сделано на стороне клиента. И в настоящее время нет планов по реализации функций рендеринга на стороне сервера.
Тем не менее, для тех, у кого такая же проблема, если Webpack — это то, что вы используете для объединения, убедитесь, что вы установили для параметра минимизации значение «true». Таким образом, ваши связанные файлы JS будут намного меньше. Кроме того, существует минимальная версия monaco-editor, которую можно использовать для производства; но он основан на AMD.
Я думаю, вам нужно установить типы для Monaco-editor. Попробуйте установить react-monitor-editor, у него свои объявления типов