[英]Strange Unresolved dependencies to 'vscode' when wrapping monaco-editor and monaco-languageclient as a react component
我需要創建一個集成了 Microsoft 的 Monaco 編輯器和 TypeFox 的 monaco-languageclient 的 React 組件。 目標是讓該組件能夠通過語言服務器協議與語言服務器進行通信。
import React, { useEffect, useRef, useState } from 'react'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import _ from 'lodash'
import { listen } from 'vscode-ws-jsonrpc';
import {
CloseAction,
createConnection,
ErrorAction,
MonacoLanguageClient,
MonacoServices
} from 'monaco-languageclient';
import normalizeUrl from 'normalize-url';
import ReconnectingWebSocket from 'reconnecting-websocket';
function createLanguageClient(connection) {
return new MonacoLanguageClient({
name: "Sample Language Client",
clientOptions: {
// use a language id as a document selector
documentSelector: [ 'json' ],
// disable the default error handler
errorHandler: {
error: () => ErrorAction.Continue,
closed: () => CloseAction.DoNotRestart
}
},
// create a language client connection from the JSON RPC connection on demand
connectionProvider: {
get: (errorHandler, closeHandler) => {
return Promise.resolve(createConnection(connection, errorHandler, closeHandler))
}
}
});
}
function createUrl(path) {
// const protocol = 'ws';
return normalizeUrl("ws://localhost:3000/sampleServer")
// return normalizeUrl(`${protocol}://${location.host}${location.pathname}${path}`);
}
function createWebSocket(url) {
const socketOptions = {
maxReconnectionDelay: 10000,
minReconnectionDelay: 1000,
reconnectionDelayGrowFactor: 1.3,
connectionTimeout: 10000,
maxRetries: Infinity,
debug: false
};
return new ReconnectingWebSocket(url, undefined, socketOptions);
}
const ReactMonacoEditor = ({ initialText, ...props }) => {
let localRef = useRef(null)
const [ value, setValue ] = useState(initialText)
useEffect(() => {
monaco.languages.register({
id: 'json',
extensions: [ '.json', '.bowerrc', '.jshintrc', '.jscsrc', '.eslintrc', '.babelrc' ],
aliases: [ 'JSON', 'json' ],
mimetypes: [ 'application/json' ],
});
const model = monaco.editor.createModel(value, 'json', monaco.Uri.parse('inmemory://model.json'))
const editor = monaco.editor.create(localRef.current, {
model,
glyphMargin: true,
lightbulb: {
enabled: true
}
});
editor.onDidChangeModelContent(_.debounce(e => {
setValue(editor.getValue())
}, 100))
MonacoServices.install(editor);
// create the web socket
const url = createUrl('/sampleSer ver')
const webSocket = createWebSocket(url);
// listen when the web socket is opened
listen({
webSocket,
onConnection: connection => {
// create and start the language client
const languageClient = createLanguageClient(connection);
const disposable = languageClient.start();
connection.onClose(() => disposable.dispose());
}
});
return () => editor.dispose()
}, [])
return (
<div ref={localRef} style={{ width: 800, height: 600 }}/>
)
}
export default ReactMonacoEditor
包.json
{
"name": "prima-monaco",
"version": "0.1.0",
"author": "sosa corp",
"publisher": "sosacorp",
"private": true,
"engines": {
"vscode": "^1.1.18"
},
"dependencies": {
"lodash": "^4.17.11",
"monaco-editor": "^0.17.0",
"monaco-languageclient": "^0.9.0",
"normalize-url": "^4.3.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"reconnecting-websocket": "^4.1.10",
"vscode-ws-jsonrpc": "^0.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
我期待組件呈現。 相反,我得到
Failed to compile.
./node_modules/vscode-base-languageclient/lib/workspaceFolders.js
Module not found: Can't resolve 'vscode' in '.../node_modules/vscode-base-languageclient/lib'
Waiting for the debugger to disconnect...
不知道如何繼續。
我在同一個問題上掙扎了幾個小時。 最終我在 monaco-languageclient的更新日志中發現了以下評論:
vscode-compatibility 應該在運行時用作 vscode 模塊的實現。 使用 webpack 調整模塊分辨率:
解決:{別名:{'vscode':require.resolve('monaco-languageclient/lib/vscode-compatibility')}}
將該別名添加到我的 webpack 配置(在我的情況下為 quasar.conf)后,編譯成功。
因此,事實上 monaco-languageclient 並不像錯誤消息所暗示的那樣依賴於 vscode 模塊,而是應該使用包本身內部的兼容性存根。
看起來monaco-languageclient
與vscode-base-languageclient
存在依賴問題,但不清楚如何解決。 我建立了一個與你的類似 package.json 的項目,這個問題特別出在monaco-languageclient
(如果你注釋掉導入它編譯正常)這是我能找到的最接近的問題: https : //github.com/theia -ide/theia/issues/2589#issuecomment-414035697
看起來您使用create-react-app
構建了您的項目,默認情況下它沒有 tsconfig 。 您可以添加一個,或者您可以使用create-react-app your-project --typescript
設置一個新應用create-react-app your-project --typescript
來設置一個打字稿應用程序。 你可以試試他描述的skipLibCheck
選項,希望對你有幫助!
使用以下代碼添加 extra-webpack.config.js
module.exports = { "resolve": { "alias": { 'vscode': require.resolve('monaco-languageclient/lib/vscode-compatibility') } }, "node": { "fs": "empty", "global": true, "crypto": "empty", "tls": "empty", "net": "empty", "process": true, "module": false, "clearImmediate": false, "setImmediate": true }, }
編輯 package.json
"serve": { "builder": "@angular-builders/custom-webpack:dev-server", "options": { "browserTarget": "angular-monaco-languageclient:build" }, "configurations": { "production": { "browserTarget": "angular-monaco-languageclient:build:production" } } },
它將消除錯誤
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.