microsoft / monaco-editor-webpack-plugin Goto Github PK
View Code? Open in Web Editor NEWMoved to https://github.com/microsoft/monaco-editor
Moved to https://github.com/microsoft/monaco-editor
I just updated to the latest version of monaco-editor
and monaco-editor-webpack-plugin
:
$ npm ls | grep monaco
├── [email protected]
├── [email protected]
webpack.config.js
:
new MonacoWebpackPlugin({
languages: ['javascript'],
}),
Usage of monaco:
import * as monaco from 'monaco-editor'
monaco.editor.create(document.getElementById('container'), {
value: 'console.log("Hello, world")\n',
language: 'javascript',
});
I only want to edit JavaScript code. When running with the versions mentioned above, there seems to be no language service running validating the document or providing any kind of service (IntelliSense etc.).
Looking at the network requests, the front end is requesting GET /undefined
, followed by an exception with the message Error: Unexpected usage
.
I suspect that this is the language service that is missing and the regression might be introduced in f86321e (only guessing at this point).
If the plugin config is changed to include all language services (new MonacoWebpackPlugin()
), it works and requests the TypeScript worker, as it should be. However, to reduce the bundle size, I only want the JS/TS service to be included (no CSS etc).
If TypeScript is added to the languages list:
new MonacoWebpackPlugin({
languages: ['javascript', 'typescript'],
})
Everything is also fine (this is the current workaround). It seems that somehow the information is lost that JS has the same LS as TS and is therefore not included in the bundle when only JS is included in the languages
option.
The compile time of my React project increases significantly after adding Monaco editor. Sometimes taking up to 1 min 30 s when it originally took max 30 s.
It's not a surprise since Monaco is a huge library, but I'm mainly wondering about these huge worker files in my optimized build. Have I misconfigured my project somehow, should these really be in the build?
I'm using a non-ejected create-react-app
"dependencies": {
"monaco-editor": "^0.18.1",
"monaco-editor-webpack-plugin": "^1.7.0",
"react-scripts": "^3.2.0",
...
},
"devDependencies": {
"react-app-rewired": "^2.1.1",
"typescript": "3.6.4",
...
}
After npm run build
I'm seeing
File sizes after gzip:
782.03 KB build/static/js/3.ce211eac.chunk.js
771.31 KB build/typescript.worker.js
380.22 KB build/static/js/4.bf8b073d.chunk.js
141.66 KB build/css.worker.js
74.64 KB build/html.worker.js
62.11 KB build/static/js/main.ccd17313.chunk.js
50.58 KB build/json.worker.js
36.02 KB build/static/css/3.d24b89e0.chunk.css
27.35 KB build/editor.worker.js
7.53 KB build/static/js/55.4ef47588.chunk.js
6.4 KB build/static/js/46.a7f63dcf.chunk.js
6.18 KB build/static/js/28.37eb30d6.chunk.js
5.89 KB build/static/js/53.f16faf7a.chunk.js
5.44 KB build/static/js/54.075b7483.chunk.js
5.01 KB build/static/js/25.8b8df476.chunk.js
4.78 KB build/static/js/31.35341305.chunk.js
4.35 KB build/static/js/45.f4b0a646.chunk.js
4.24 KB build/static/js/38.73ce43ba.chunk.js
3.93 KB build/static/js/56.a8645251.chunk.js
3.46 KB build/static/js/9.b03e1a9c.chunk.js
3.06 KB build/static/js/27.bcdf4d57.chunk.js
2.72 KB build/static/css/main.e91fbd6d.chunk.css
2.39 KB build/static/js/30.9b97ef65.chunk.js
2.35 KB build/static/js/39.b91312bd.chunk.js
2.08 KB build/static/js/36.6066c54c.chunk.js
2.05 KB build/static/js/5.a7d380cb.chunk.js
2.04 KB build/static/js/29.bdf41560.chunk.js
2.03 KB build/static/js/47.160c9222.chunk.js
2.02 KB build/static/js/0.8c14b08e.chunk.js
2.01 KB build/static/js/50.d8b3a839.chunk.js
1.93 KB build/static/js/24.de9281d7.chunk.js
1.92 KB build/static/js/49.57275bf1.chunk.js
1.75 KB build/static/js/6.85dbafd9.chunk.js
1.75 KB build/static/js/40.7be8b49c.chunk.js
1.73 KB build/static/js/43.fefb7384.chunk.js
1.72 KB build/static/js/11.484d1951.chunk.js
1.64 KB build/static/js/33.06e31445.chunk.js
1.6 KB build/static/js/48.1b72796f.chunk.js
1.6 KB build/static/js/runtime-main.5eb37952.js
1.47 KB build/static/js/37.409baca6.chunk.js
1.41 KB build/static/js/21.c5a2b14f.chunk.js
1.37 KB build/static/js/34.169baa6f.chunk.js
1.37 KB build/static/js/13.e44d95c5.chunk.js
1.37 KB build/static/js/32.4d9d0e5a.chunk.js
1.33 KB build/static/js/20.5ddcbacd.chunk.js
1.33 KB build/static/js/17.26b338e3.chunk.js
1.31 KB build/static/js/15.aa20b655.chunk.js
1.31 KB build/static/js/10.b8df5b16.chunk.js
1.26 KB build/static/js/23.6cc16668.chunk.js
1.23 KB build/static/js/52.7b5d5fb4.chunk.js
1.19 KB build/static/js/18.5445ab65.chunk.js
1.18 KB build/static/js/35.f05e0278.chunk.js
1.16 KB build/static/js/44.87f2eb91.chunk.js
1.15 KB build/static/js/16.aa3ebfcd.chunk.js
1.07 KB build/static/js/26.f75f89d2.chunk.js
958 B build/static/js/22.3251516f.chunk.js
899 B build/static/js/8.a46278cb.chunk.js
862 B build/static/js/41.117b1368.chunk.js
853 B build/static/js/42.b4e37f22.chunk.js
739 B build/static/js/14.251b34d3.chunk.js
659 B build/static/js/51.5e30f329.chunk.js
570 B build/static/js/19.8d9f6df8.chunk.js
563 B build/static/js/12.e019bf22.chunk.js
361 B build/static/js/7.e811826d.chunk.js
The project was built assuming it is hosted at /{redacted}/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
https://bit.ly/CRA-deploy
Even I set the languages
and features
options, the generated bundle will still include all languages & features:
new MonacoWebpackPlugin({
languages: ['java', 'json'],
features: ['find'],
})
webpack will use the module
field of package.json
as module entry:
"module": "./esm/vs/editor/editor.main.js",
When we deal it with our include.js
loader:
it will generate:
module.exports = require('editor.main.js');
But the editor.main.js
file will include all languages & features.
So I think we should replace it with editor.api.js
, something like:
`module.exports = require(${loaderUtils.stringifyRequest(
this,
`!!${remainingRequest.replace('editor.main.js', 'editor.api.js')}`
)});`,
Hello,
I want to add a custom language worker, I don't want to use the existing ones for ts,js, html...,I want to create a new worker for my own language which will communicate with my language service, also I don't want to use monaco-languageclient because it uses an old version of monaco.
### any help will be appreciated!
Thanks!
Now that the project is converted to typescript, installing from git source no longer works (the out
dir is not built).
Side note: when are you planning on cutting the next release? I mostly am interested in the graphql language support which I see landed in master 2 days ago (and to see if CORS improvements allow us to delete some code).
i have multiple times this warning when building. any idea what causes this?
388:12-397:17 Critical dependency: the request of a dependency is an expression
@ ./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js
@ ./node_modules/monaco-editor/esm/vs/editor/common/services/editorWorkerServiceImpl.js
@ ./node_modules/monaco-editor/esm/vs/editor/common/services/webWorker.js
@ ./node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneEditor.js
@ ./node_modules/monaco-editor/esm/vs/editor/editor.api.js
@ include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.api.js
@ ./node_modules/monaco-editor/esm/vs/language/typescript/monaco.contribution.js
@ include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.main.js
@ ./node_modules/react-monaco-editor/lib/editor.js
@ ./node_modules/react-monaco-editor/lib/index.js
@ ./Scripts/network/NetworkEditorServices.tsx
@ ./Scripts/network/networkadmin.tsx
@ multi (webpack)-dev-server/client?http://localhost:35280 webpack/hot/dev-server ./Scripts/network/networkadmin.tsx```
File: monaco-editor-webpack-plugin\index.d.ts
The exported plugin type does not implement the plugin type from @types/webpack
properly, which leads to such errors:
Type 'MonacoEditorWebpackPlugin' is not assignable to type 'Plugin'.
Property 'apply' is missing in type 'MonacoEditorWebpackPlugin'.
We use TypeScript even for webpack configs, but unfortunately this plugin doesn't have any type definitions:
webpack.config.ts(3,33): error TS7016: Could not find a declaration file for module 'monaco-editor-webpack-plugin'. '/[path]/node_modules/monaco-editor-webpack-plugin/index.js' implicitly has an 'any' type.
Even something as simple as declare module 'monaco-editor-webpack-plugin';
would be helpful. I could imagine you going as far as checking all options like the language list, if you were so inclined, but that wouldn't be blocking.
Any chance of getting at least the module definition in place? Thanks!
I'm using Webpack 4.6.0 to build my monaco-editor project. But got a "Critical Dependency" warning for editorSimpleWorker.js using require function to load dynamic module。
Can this warning be ignored, or how to fix it ?
// webpack config for my project
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const fs = require('fs');
var autoprefixer = require('autoprefixer'); // eslint-disable-line
const postCssConfig = (loader) => [
autoprefixer({
remove: false,
browsers: ['last 2 versions', 'ie > 8', 'safari > 7'],
}),
];
const babelConfig = {
babelrc: false,
presets: [
'babel-preset-react',
['babel-preset-es2015', { modules: false }],
'babel-preset-stage-0',
],
plugins: [
'babel-plugin-transform-decorators-legacy',
[require.resolve('babel-plugin-transform-runtime'), {
helpers: false,
polyfill: false,
regenerator: true,
moduleName: path.dirname(require.resolve('babel-runtime/package')),
}],
]
}
const config = {
mode: 'production',
entry: {
app: __dirname + '/src/index.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
context: path.resolve(__dirname, 'src'),
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: postCssConfig,
},
}],
}, {
test: /\.tsx?$/,
loader: 'ts-loader',
}, {
test: /\.jsx$/,
exclude: /node_modules/,
loaders: [{
loader: 'babel-loader',
options: babelConfig,
}]
}, {
test: /\.scss$/,
use: [{
loader: 'style-loader', // creates style nodes from JS strings
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'postcss-loader', // compiles Sass to CSS
options: {
ident: 'postcss',
plugins: postCssConfig,
},
}, {
loader: 'sass-loader',
}],
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
}, {
test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff',
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&minetype=application/octet-stream',
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&minetype=image/svg+xml',
}, {
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: ['url-loader?limit=8192'],
}, {
test: /\.swf$/,
use: 'file-loader?name=[name].[ext]',
}],
},
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
symlinks: false,
},
stats: {
colors: true,
modules: true,
reasons: true,
errorDetails: true,
},
plugins: [
new HtmlWebpackPlugin(),
new MonacoWebpackPlugin(),
new webpack.IgnorePlugin(
/^((fs)|(path)|(os)|(crypto)|(source-map-support))$/,
/vs\/language\/typescript\/lib/,
),
],
target: 'web',
resolveLoader: {
modules: [path.resolve(__dirname, 'node_modules')]
},
};
webpack(config, (err, stats) => {
if (err) {
console.log('Failed to compile.', [err]);
}
if (stats.compilation.errors.length) {
console.log('Failed to compile.', stats.compilation.errors);
}
if (stats.compilation.warnings.length) {
console.log(
'Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.',
stats.compilation.warnings,
);
}
const outputOptions = {
context: './src',
colors: { level: 2, hasBasic: true, has256: true, has16m: false },
chunks: true,
children: false,
performance: true,
};
process.stdout.write(stats.toString(outputOptions) + '\n');
});
Warning:
WARNING in /xxx/node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js
378:12-19 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
@ /xxx/node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js
@ /xxx/node_modules/monaco-editor/esm/vs/editor/common/services/editorWorkerServiceImpl.js
@ /xxx/node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneServices.js
@ /xxx/monaco-editor/esm/vs/editor/standalone/browser/standaloneLanguages.js
@ /xxx/node_modules/monaco-editor/esm/vs/editor/editor.api.js
@ /xxx/node_modules/monaco-editor/esm/vs/editor/edcore.main.js
@ /xxx/node_modules/monaco-editor/esm/vs/editor/editor.main.js
@ /xxx/src/index.js
I noticed that with monaco-editor-webpack-plugin, the build took significantly longer than with the config I had before. I noticed this logline:
[BABEL] Note: The code generator has deoptimised the styling of "/buildkite/builds/buildkite-agent-dd84f899d-lss4w/sourcegraph/.golang/sourcegraph/src/github.com/sourcegraph/sourcegraph/web/node_modules/monaco-editor/esm/vs/language/typescript/lib/typescriptServices.js" as it exceeds the max of "500KB".
Which means the (huge) file typescriptServices.js
(and probably all other languages too) was being piped through Babel and chunks generated from it, despite my config only specifying json
as a language:
new MonacoWebpackPlugin({
languages: ['json'],
features: [
'clipboard',
'comment',
'contextmenu',
'coreCommands',
'cursorUndo',
'dnd',
'find',
'format',
'hover',
'inPlaceReplace',
'iPadShowKeyboard',
'linesOperations',
'links',
'parameterHints',
'quickCommand',
'quickFixCommands',
'smartSelect',
'suggest',
'wordHighlighter',
'wordOperations',
],
}),
On Windows, I got this error:
ERROR in ./node_modules/monaco-editor/esm/vs/language/typescript/lib/typescriptServices.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\felix\src\github.com\sourcegraph\sourcegraph\web\node_modules\monaco-editor\esm\vs\language\typescript\lib'
Again, despite typescript not being specified as a language.
I would expect the plugin to include only the files needed for the given languages and not compile all the languages into chunks that are never loaded.
I'm trying to add the Monaco Editor, but when I add the plugin and run webpack dev-server, I get
Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes.
simpleWorker.js:32 Failed to construct 'Worker': Script at 'http://localhost:3020/my-app/js/typescript.worker.js' cannot be accessed from origin 'http://www.local.app.com'
VM2033:37 Error: Unexpected usage
at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:391)
at webWorker.js:38
at ShallowCancelThenPromise.CompletePromise_then [as then] (winjs.base.js:1587)
at MonacoWebWorkerImpl._getForeignProxy (webWorker.js:37)
at MonacoWebWorkerImpl.getProxy (webWorker.js:61)
at WorkerManager.webpackJsonp.1711.WorkerManager._getClient (workerManager.js:53)
at WorkerManager.webpackJsonp.1711.WorkerManager.getLanguageServiceWorker (workerManager.js:72)
at DiagnostcsAdapter.worker [as _worker] (tsMode.js:39)
at DiagnostcsAdapter.webpackJsonp.1712.DiagnostcsAdapter._doValidate (languageFeatures.js:144)
at onModelAdd (languageFeatures.js:103)
at Array.forEach (<anonymous>)
at new DiagnostcsAdapter (languageFeatures.js:135)
at setupMode (tsMode.js:50)
at Object.setupJavaScript (tsMode.js:14)
at monaco.contribution.js:154
at Object.notifySuccess [as _notify] (winjs.base.js:1191)
Then if I use the Editor I get
FATAL - Uncaught Error: Unexpected usage
Error: Unexpected usage
at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule (http://localhost:3020/my-app/my-app.js:188462:103)
at http://localhost:3020/my-app/my-app.js:192459:30
at ShallowCancelThenPromise.CompletePromise_then [as then] (http://localhost:3020/my-app/my-app.js:5624:49)
at MonacoWebWorkerImpl._getForeignProxy (http://localhost:3020/my-app/my-app.js:192458:143)
at MonacoWebWorkerImpl.getProxy (http://localhost:3020/my-app/my-app.js:192482:21)
at WorkerManager.webpackJsonp.1711.WorkerManager._getClient (http://localhost:3020/my-app/4.js:127:34)
at WorkerManager.webpackJsonp.1711.WorkerManager.getLanguageServiceWorker (http://localhost:3020/my-app/4.js:146:44)
at DiagnostcsAdapter.worker [as _worker] (http://localhost:3020/my-app/4.js:52:48)
at DiagnostcsAdapter.webpackJsonp.1712.DiagnostcsAdapter._doValidate (http://localhost:3020/my-app/4.js:329:14)
at onModelAdd (http://localhost:3020/my-app/4.js:288:19)
at Array.forEach (<anonymous>)
at new DiagnostcsAdapter (http://localhost:3020/my-app/4.js:320:35)
at setupMode (http://localhost:3020/my-app/4.js:63:5)
at Object.setupJavaScript (http://localhost:3020/my-app/4.js:27:24)
at http://localhost:3020/my-app/my-app.js:69160:57
at Object.notifySuccess [as _notify] (http://localhost:3020/my-app/my-app.js:5228:59) in:
http://localhost:3020/my-app/my-app.js:3657 col:27
My webpack configuration is:
{
"entry":{
"my-app":[
"webpack-dev-server/client?http://localhost:3020",
"webpack/hot/only-dev-server",
"./src/ts/index.tsx"
]
},
"output":{
"path":"/path/to/dist/js",
"filename":"[name].js",
"publicPath":"http://localhost:3020/my-app/js/"
},
"module":{
"rules":[
// giant rules for Tyepscript, JSON, CSS, LESS, and Monaco that the plugin adds
]
},
"resolve":{
"extensions":[
".js",
".jsx",
".json",
".less",
".css",
".ts",
".tsx",
],
},
"plugins":[
{
"definitions":{
"ENV_DEV":"true",
"ENV_PROD":"false",
"process.env.NODE_ENV":"\"development\""
}
},
/* Monaco Plugin is loaded -- not showing it cause it's giant */
],
"devtool":"#source-map",
"devServer":{
"headers":{
"Access-Control-Allow-Origin":"*"
},
"host":"localhost",
"port":3020,
"publicPath":"http://localhost:3020/my-app/js/",
"hot":true,
"inline":true,
"contentBase":"/path/to/base"
}
}
With the amd method, I can use require to load vue language feature as below:
amdRequire(
['vs/editor/editor.main'],
() => {
// Load Vue language extension
amdRequire(['vs/language/vue/monaco.contribution'], () => {
resolve(window.monaco);
});
});
how I can use esm method to load my language feature(vue)?
I got this error, when I use npm start
to start my app.
webpack version: "3.8.1",
"monaco-editor": "^0.15.6",
"monaco-editor-webpack-plugin": "^1.7.0",
hjm-mac:react hjm$ npm start
> [email protected] start /Users/hjm/Documents/code/educode/educoder/eduplus2/public/react
> node scripts/start.js
Failed to compile.
Cannot read property 'output' of undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node scripts/start.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/hjm/.npm/_logs/2019-01-11T06_34_13_165Z-debug.log
repro: https://github.com/tamayika/monaco-webpack-test
commands:
npm i
npm run build
result:
PS F:\work\node\monaco-webpack-test> npm run build
> [email protected] build F:\work\node\monaco-webpack-test
> webpack --config webpack.config.js
F:\work\node\monaco-webpack-test\node_modules\webpack-cli\bin\webpack.js:448
throw err;
^
Error: Cannot find module 'monaco-editor\esm\vs\editor\contrib\quickFix\quickFixCommands'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15)
at Function.require.resolve (F:\work\node\monaco-webpack-test\node_modules\v8-compile-cache\v8-compile-cache.js:162:23)
at resolveMonacoPath (F:\work\node\monaco-webpack-test\node_modules\monaco-editor-webpack-plugin\index.js:35:18)
at use.options.pre.featurePaths.map (F:\work\node\monaco-webpack-test\node_modules\monaco-editor-webpack-plugin\index.js:110:51)
at Array.map (<anonymous>)
at createLoaderRules (F:\work\node\monaco-webpack-test\node_modules\monaco-editor-webpack-plugin\index.js:110:31)
at MonacoWebpackPlugin.apply (F:\work\node\monaco-webpack-test\node_modules\monaco-editor-webpack-plugin\index.js:64:19)
at webpack (F:\work\node\monaco-webpack-test\node_modules\webpack\lib\webpack.js:37:12)
at processOptions (F:\work\node\monaco-webpack-test\node_modules\webpack-cli\bin\webpack.js:436:16)
at yargs.parse (F:\work\node\monaco-webpack-test\node_modules\webpack-cli\bin\webpack.js:512:3)
at Object.parse (F:\work\node\monaco-webpack-test\node_modules\yargs\yargs.js:552:18)
at F:\work\node\monaco-webpack-test\node_modules\webpack-cli\bin\webpack.js:217:8
at Object.<anonymous> (F:\work\node\monaco-webpack-test\node_modules\webpack-cli\bin\webpack.js:514:3)
at Module._compile (internal/modules/cjs/loader.js:654:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3)
at Module.require (internal/modules/cjs/loader.js:598:17)
at require (internal/modules/cjs/helpers.js:11:18)
at Object.<anonymous> (F:\work\node\monaco-webpack-test\node_modules\webpack\bin\webpack.js:80:2)
at Module._compile (internal/modules/cjs/loader.js:654:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:695:10)
at startup (internal/bootstrap/node.js:201:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:516:3)
I found some esm monaco-editor module disappeared compared to 0.12.0.
features.js must be changed or monaco-editor emit bug?
Any reason why "@types/webpack": "^4.4.19" is a Dependency and not a Dev-Dependency?
node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:509
if (this.done && (request.request.endsWith('.ts')
TypeError: Cannot read property 'request' of null
Hi, gays:
editor.api
vs/editor/contrib/referenceSearch/referenceSearch
is not imported, which makes it that Reference Search is not in the context menu.
Hello everyone,
I am using react-monaco-editor with the monaco-editor-webpack-plugin to load the editor with webpack 4.20.2.
When I compile my code, each language generates its own bundle even though I passed as options of the plugin the array ["javascript", "typescript"].
How can I prevent this and only create bundles for the languages I want to use?
Thank you very much
Node 6 LTS has no support for the Object spread, like in index.js#L40:
[id, ...(language.alias || [])].map((label) => [label, { label, ...language }])
Would it be possible to change it to Object.assign
in order to maintain node 6 LTS support?
The problem we are facing at work, is that VSCode plugins are not able to parse the module. VSCode is currently based electron 1.7.12, which is based on node@7, which has the problem described above.
Our issues here and here:
The plugin requires 'loader-utils' from '/loaders/include.js' but 'loader-utils' is not listed as a dependency in the package json. This phantom dependency causes issues with package managers such as pnpm that do not create a flat node_modules structure.
We've made good use of this plugin in nteract/nteract#2779. We're running into one major issue though -- when we host our app on a subpath it appears that Monaco's webworkers aren't loading based on the __webpack_public_path__
, instead relying only on the static publicPath
in the webpack config.
What would we need to do to make monaco recognize the dynamic public path?
cc @yuvipanda
This is about two requestion.
1、I want use monaco-editor-textmate replace built-in monaco-editor languages features, for better syntaxic coloring using Textmate grammars. In documentation of monaco-editor-textmate:
To get monaco-editor-textmate working with monaco-editor, you're advised to use Webpack with monaco-editor-webpack-plugin which allows you to control which of "built-in" languages should monaco-editor use/bundle, leaving the rest. With that control you must exclude any/all languages for which you'd like to use TextMate grammars based tokenization instead.
I'm try to delete 'typescript' 'css' 'json' 'html' 'javascript' 'scss' 'less' 'handlebars' in languages array
new MonacoWebpackPlugin({
languages: ['bat', 'coffee', 'cpp', 'csharp', 'csp', 'dockerfile', 'fsharp', 'go', 'ini', 'java', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'shell', 'solidity', 'sql', 'st', 'swift', 'vb', 'xml', 'yaml']
})
but when i was open javascript/typescript file, i get some error :
It's look like still load default language features, maybe my understanding is wrong.
2、I successfully let TypeScript LSP work for my editor,but in some event, like hover
, it's will render two hover tips,one contains the documentation, another one just simple type of hint, some part is same. so i want know how to disabled default typescriptLanguageServices of tsWorker.
maybe it's same requestion, i hope get some answers, thanks very much.
Hi, is it possible to specify a locale/language (for instance french) ? I'd like to use the editor in french, but the only example of localization I've found is an AMD loading using requirejs (https://github.com/Microsoft/monaco-editor-samples/blob/master/browser-amd-localized/index.html)
Many thanks !
Howdy folks,
Very new to React / Babel / etc here so please bear with me!
Using:
Chrome 72.0.3626.121
"monaco-editor": "^0.15.6",
"monaco-editor-webpack-plugin": "^1.7.0",
"webpack": "^4.28.4",
Attempting to load the monaco editor via React, I can get the editor to load up in a web page but there is no highlighting; this is for the PHP language. Webpack creates a bundle file just fine.
Looking at the dev console, I see this error message:
errors.js:22 Uncaught Error: Cannot read property 'wrap' of undefined
TypeError: Cannot read property 'wrap' of undefined
at loader (php.contribution.js:16)
at _loadLanguage (_.contribution.js:14)
at loadLanguage (_.contribution.js:22)
at eval (_.contribution.js:31)
at eval (standaloneLanguages.js:80)
at Emitter.fire (event.js:509)
at ModeServiceImpl._getOrCreateMode (modeServiceImpl.js:117)
at ModeServiceImpl._createModeAndGetLanguageIdentifier (modeServiceImpl.js:105)
at LanguageSelection.eval [as _selector] (modeServiceImpl.js:92)
at new LanguageSelection (modeServiceImpl.js:37)
at eval (errors.js:22)
The specific line in php.contribution.js is this:
loader: function () { return _monaco.Promise.wrap(__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./php.js */ "./node_modules/monaco-editor/esm/vs/basic-languages/php/php.js"))); }
});
_monaco.Promise is undefined! I had suspected I need some kind of babel polyfill for the Promise. Tried fiddling with babel/preset-env but without success.
Tried a different language, javascript, ran into the same issue.
Here's the package.json file:
"name": "projectname",
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-monaco-editor": "^0.25.1"
},
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"babel-plugin-transform-function-bind": "^6.22.0",
"css-loader": "^2.1.1",
"monaco-editor": "^0.15.6",
"monaco-editor-webpack-plugin": "^1.7.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.3"
},
"scripts": {
"build": "webpack"
}
}
The babelrc file:
{
"presets": [
"@babel/preset-react",
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
],
"plugins": ["transform-function-bind"]
}
and webpack.config.js:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');
const MONACO_EDITOR_DIR = path.resolve(__dirname, './node_modules/react-monaco-editor');
module.exports = {
entry: [ __dirname + '/public/js/react/react-config-monaco.js'],
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
include: [MONACO_DIR, MONACO_EDITOR_DIR],
use: ['style-loader', 'css-loader']
}
]
},
output: {
filename: 'react-output.js',
path: __dirname + '/public/js/dist'
},
plugins: [
new MonacoWebpackPlugin({
languages: ['php']
})
]
};
I'm hoping I'm just overlooking something very simple to fix!
Thank you for your time and attention!
Drew
Does the paste command not work in any way for anyone else? I'm using this plugin with vue cli and a very vanilla example with 0.13.1 or 0.13.0 and paste does not work in any way?
Right now, after webpack build, the worker files have names like <language>.worker.js
even thought chunkhash
has been passed in webpack options. This won't help in cache busting. I think this plugin should use the output
option provided in webpack config to build the worker and language files too.
I get the webpack.config.js by using angular-cli command ng eject --force, and add this plugin into the plugins section, but when I run npm start it throws the following exception, how could I solve this.
TypeError: Cannot read property 'make' of undefined
at AddWorkerEntryPointPlugin.apply (E:\user\vscprojects\monaco-editor\node_modules\monaco-editor-webpack-plugin\plugins\AddWorkerEntryPointPlugin.js:16:20)
at plugins.forEach (E:\user\vscprojects\monaco-editor\node_modules\monaco-editor-webpack-plugin\index.js:82:12)
at Array.forEach ()
at addCompilerPlugins (E:\user\vscprojects\monaco-editor\node_modules\monaco-editor-webpack-plugin\index.js:80:11)
at MonacoWebpackPlugin.apply (E:\user\vscprojects\monaco-editor\node_modules\monaco-editor-webpack-plugin\index.js:67:5)
at Compiler.apply (E:\user\vscprojects\monaco-editor\node_modules\tapable\lib\Tapable.js:375:16)
at webpack (E:\user\vscprojects\monaco-editor\node_modules\webpack\lib\webpack.js:33:19)
at startDevServer (E:\user\vscprojects\monaco-editor\node_modules\webpack-dev-server\bin\webpack-dev-server.js:367:16)
at processOptions (E:\user\vscprojects\monaco-editor\node_modules\webpack-dev-server\bin\webpack-dev-server.js:350:5)
at Object. (E:\user\vscprojects\monaco-editor\node_modules\webpack-dev-server\bin\webpack-dev-server.js:495:1)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Function.Module.runMain (module.js:676:10)
In order to use monaco in electron, we need the fs
module. We noticed that this module is being ignored by monaco-editor-webpack-plugin in https://github.com/Microsoft/monaco-editor-webpack-plugin/blob/v1.1.0/index.js#L8. How do we not ignore fs
in our webpack builds?
I am maintaining the react bindings for Monaco and I'm having some issues with my demo and the latest Monaco. If I update the demo, I get an error Uncaught TypeError: Cannot read property 'jsonDefaults' of undefined
.
To reproduce this issue, clone https://github.com/react-monaco-editor/react-monaco-editor.
Then run yarn && yarn build
before going into example
. yarn && yarn start
will work fine but if you update monaco-editor
to ^0.17.1
and then run yarn && yarn start
, you will see the error.
Do you have any suggestions for what I need to change to update Monaco? Thanks!
After creating a new project:
npm init
npm install --save webpack monaco-editor monaco-editor-webpack-plugin style-loader css-loader
If I run the example code from the main page, I get the following in the browser console:
Error: Unexpected usage
at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:407)
at eval (webWorker.js:42)
at ShallowCancelThenPromise.CompletePromise_then [as then] (winjs.base.js:1591)
at MonacoWebWorkerImpl._getForeignProxy (webWorker.js:41)
at MonacoWebWorkerImpl.getProxy (webWorker.js:65)
at WorkerManager._getClient (workerManager.js:55)
at WorkerManager.getLanguageServiceWorker (workerManager.js:74)
at DiagnostcsAdapter.worker [as _worker] (tsMode.js:46)
at DiagnostcsAdapter._doValidate (languageFeatures.js:158)
at onModelAdd (languageFeatures.js:117)
the editor appears, and typing works, but after every keypress I get:
Error: Unexpected usage
at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:407)
at eval (webWorker.js:42)
at ShallowCancelThenPromise.CompletePromise_then [as then] (winjs.base.js:1591)
at MonacoWebWorkerImpl._getForeignProxy (webWorker.js:41)
at MonacoWebWorkerImpl.getProxy (webWorker.js:65)
at WorkerManager._getClient (workerManager.js:55)
at WorkerManager.getLanguageServiceWorker (workerManager.js:74)
at SuggestAdapter.worker [as _worker] (tsMode.js:46)
at SuggestAdapter.provideCompletionItems (languageFeatures.js:216)
at SuggestAdapter.provideCompletionItems (standaloneLanguages.js:482)
at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:407)
at eval (webWorker.js:42)
at ShallowCancelThenPromise.CompletePromise_then [as then] (winjs.base.js:1591)
at MonacoWebWorkerImpl._getForeignProxy (webWorker.js:41)
at MonacoWebWorkerImpl.getProxy (webWorker.js:65)
at WorkerManager._getClient (workerManager.js:55)
at WorkerManager.getLanguageServiceWorker (workerManager.js:74)
at SuggestAdapter.worker [as _worker] (tsMode.js:46)
at SuggestAdapter.provideCompletionItems (languageFeatures.js:216)
at SuggestAdapter.provideCompletionItems (standaloneLanguages.js:482)
If I change language: 'javascript'
to c
, java
, there are no errors on console (and coloring works). json
, javascript
, typescript
gives the error (coloring kind of works. some keywords are colored).
In webpack.config.js
it is new MonacoWebpackPlugin()
The plugin builds everything fine, but when using with an ejected CRA application, bundles are built but the webworkers are still referring to their actual filename. My knowledge of webpack internals is pretty limited, so I imagine I am just doing something wrong.
The main.js file is still looking for a relative work path i.e. localhost:1234/editor.worker.js
I tweaked the
compiler.hooks.make.tapAsync('AddWorkerEntryPointPlugin', (compilation, callback) => {
to
compiler.plugin('make', (compilation, callback) => {
so it would actually run on webpack 3.8
Any insight into what I can do to get this going?
EDIT: Did some further research, and managed to get a bit further, but now I get
No dependency factory available for this dependency type: SingleEntryDependency
I haven't found any references to this issue, I am assuming I still am doing something that doesn't work in webpack 3, but I am not entirely sure.
It would be nice if there was support for webpack 3 as well. This is a requirement for me as I am using create-react-app. The below comment also mentions that vue uses webpack 3 as well.
This comment mentions the problem code. I made the fix as per timkendrick's following comment but ran into issues with webpack.webworker
being undefined. I changed the way that the SingleEntryPlugin
, LoaderTargetPlugin
and WebWorkerTemplatePlugin
get required and this fix works for me locally. It would be great if this could make it into the repo somehow.
Below is my working local version of AddWorkerEntryPointPlugin.js
const singleEntry = require('webpack/lib/SingleEntryPlugin');
const loaderTarget = require('webpack/lib/LoaderTargetPlugin');
const webworker = require('webpack/lib/webworker/WebWorkerTemplatePlugin');
class AddWorkerEntryPointPlugin {
constructor({
id,
entry,
filename,
chunkFilename = undefined,
plugins = undefined,
}) {
this.options = { id, entry, filename, chunkFilename, plugins };
}
apply(compiler) {
const { id, entry, filename, chunkFilename, plugins } = this.options;
compiler.plugin('make', (compilation, callback) => {
const outputOptions = {
filename,
chunkFilename,
publicPath: compilation.outputOptions.publicPath,
// HACK: globalObject is necessary to fix https://github.com/webpack/webpack/issues/6642
globalObject: 'this',
};
const childCompiler = compilation.createChildCompiler(id, outputOptions, [
new webworker(),
new loaderTarget('webworker'),
new singleEntry(compiler.context, entry, 'main'),
]);
plugins.forEach((plugin) => plugin.apply(childCompiler));
childCompiler.runAsChild(callback);
});
}
}
module.exports = AddWorkerEntryPointPlugin;
Using Webpack 4.17, webpack-dev-server 3.1.7, react.
No matter what I do, when I include the editor via import, it adds at least 4 MB to my bundle size. All I need is JSON Editor with Hover Error Hinting.
Tried copying setup from https://github.com/Microsoft/monaco-editor-samples/blob/master/browser-esm-webpack-small
webpack.config.js
entry: {
main: "./src/index.js",
"editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js",
"json.worker": "monaco-editor/esm/vs/language/json/json.worker"
},
...
plugins: [
htmlPlugin,
new MonacoWebpackPlugin({
languages: ["json"],
features: ["find"]
})
]
In my React Component
...
import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import 'monaco-editor/esm/vs/language/json/monaco.contribution';
...
initMonaco() {
// workers is an object that has the file names for all the workers
let workers = {
json: "/json.worker.HASH.bundle.js",
editor: "/editor.worker.HASH.js"
}
window.MonacoEnvironment = {
getWorkerUrl: function(moduleId, label) {
if (label === "json") {
// return "/json.worker.bundle.js";
return workers.json;
}
return workers.editor;
}
};
monaco.editor.create(this.containerElement, {
language: "json"
});
}
monaco-editor version: 0.15.5
monaco-editor-webpack-plugin version: 1.6.0
monaco-languages version: 1.6.0
webpack version: 4.25.1
vue version: 2.5.17
Browser: Chrome
OS: Windows 10
Steps to reproduce the issue:
Setup monaco-editor as described below and set the language to "razor":
I did it as simple as descriped here with "Option 1".
/*Initialistation in my ts-file*/
this.monacoEditor = monaco.editor.create(this.monacoEditorContainer, {
value: "",
language: "razor",
wordWrap: "on",
autoIndent: true,
formatOnPaste: true,
formatOnType: true,
scrollBeyondLastLine: true
});
...
/* vue.config.ts */
...
module.exports = {
...
configureWebpack: {
node: {
process: true,
},
performance: {
maxEntrypointSize: 5242880,
maxAssetSize: 1048576
},
devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map',
output: {
devtoolModuleFilenameTemplate: info => {
var $filename = 'sources://' + info.resourcePath;
if (info.resourcePath.match(/\.vue$/) && !info.allLoaders.match(/type=script/)) {
$filename = 'webpack-generated:///' + info.resourcePath + '?' + info.hash;
}
return $filename;
},
devtoolFallbackModuleFilenameTemplate: 'webpack:///[resource-path]?[hash]'
},
module: {
rules: [...]
},
plugins: [
new MonacoWebpackPlugin()
]
}
}
...
Result
The editor works and the highlighting for "razor" looks good, but I get instantly those error messages which I don't understand where they are from:
I believe the worker could not be created, because the third error is in the file "undefined" which looks like some broken bootstrapping html from webpack. If I look into the origin where the file is from it is close to "json.worker.js" and "css.worker.js" - just an idea.
Also thought it has to do with #32, too - but none of the solutions have worked for me.
Any help would be great. If I missed any information don't hesitate to ask.
Thank you in advance
Lucas
When I use monaco-editor-webpack-plugin
in electron project, I got 2 errors. It takes me a few days to investigate, but still cannot figure it out.
First error is in the command line.
warning in ./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js
Critical dependency: the request of a dependency is an expression
Second error is in the "Developer Tools->Console"
errors.js?fdcc:58 Uncaught Error: Cannot find module 'vs/language/typescript/tsWorker'
Error: Cannot find module 'vs/language/typescript/tsWorker'
at webpackEmptyContext (eval at ./node_modules/monaco-editor/esm/vs/editor/common/services sync recursive (
You can reproduce the bug use the code in https://github.com/wenbinke/monaco-editor-electron.
yarn
yarn serve:electron
======================================================================
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
export default {
configureWebpack: {
plugins: [
new MonacoWebpackPlugin(),
],
},
};
import { Component, Vue } from "vue-property-decorator";
import * as monaco from "monaco-editor";
@Component
export default class Home extends Vue {
public $refs!: {
container: HTMLElement;
}
public mounted() {
monaco.editor.create(this.$refs.container, {
value: 'console.log("Hello, world")',
language: "javascript"
});
}
}
Hi,
First of all thanks for this great plugin. I was testing different features combinations and it ocurred to me to provide a way of excluding default features.
Example:
{features: ['!codelens']}
Prefixing them with a ! will exlude that feature.
It would make no sense to include and exclude so in that case only the exclusions would be computed.
I'd make a pull request with the change if needed.
Thanks
In createLoaderRules
, the MonacoEnvironment
global variable is defined as a string which uses an ES6 arrow function:
const globals = {
'MonacoEnvironment': `((paths) => ({ getWorkerUrl: (moduleId, label) => paths[label] }))(${
JSON.stringify(workerPaths, null, 2)
})`,
};
That arrow function is then written to the generated chunk, which causes the loader to fail on IE 11.
I manually modified the plugin to generate ES5 compatible code, but is there any other solution?
How is it different from importing the monaco editor directly?
Does the direct import include everything unconditionally and this plugin lets you pick and choose?
File: monaco-editor-webpack-plugin\index.d.ts
Members of IMonacoEditorWebpackPluginOpts
need to be optional, and the plugin should overwrite with the defaults when not present. For example, not providing features
should include all. The current version does not support that.
When using MonacoDiffEditor, it doesn't highlight the differences (red, green color).
monaco-editor: 0.17.1
monaco-editor-webpack-plugin: 1.7.0
react-monaco-editor: 0.30.1
webpack plugin:
new MonacoWebpackPlugin()
TypeScript code:
import { MonacoDiffEditor } from 'react-monaco-editor';
<MonacoDiffEditor
original="a"
value="b"
options={{
renderSideBySide: true,
readOnly: false, //true,
glyphMargin: true,
ariaLabel: 'ribbonDiffMonacoEditor'
}}
width="100%"
/>
Setup overview:
monaco-editor
^0.15.6monaco-editor-webpack-plugin
^1.7.0I'm getting the following errors when running webpack:
ERROR in ./node_modules/monaco-editor/esm/vs/basic-languages/html/html.contribution.js 14:54
Module parse failed: Unexpected token (14:54)
You may need an appropriate loader to handle this file type.
| aliases: ['HTML', 'htm', 'html', 'xhtml'],
| mimetypes: ['text/html', 'text/x-jshtm', 'text/template', 'text/ng-template'],
> loader: function () { return _monaco.Promise.wrap(import('./html.js')); }
| });
|
@ ./node_modules/monaco-editor/esm/vs/editor/editor.api.js (include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.api.js) 61:0-55
@ ./app/portal/modules/admin/onlineForms/editor/OnlineFormEditor.ts
@ ./app/portal/modules/admin/onlineForms/editor/onlineFormEditor.module.ts
@ ./app/portal/modules/admin/onlineForms/onlineForms.module.ts
@ ./app/portal/modules/admin/admin.module.ts
@ ./app/portal/portal.module.ts
@ multi angular ./app/portal/portal.module.ts
ERROR in ./node_modules/monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js 16:54
Module parse failed: Unexpected token (16:54)
You may need an appropriate loader to handle this file type.
| aliases: ['JavaScript', 'javascript', 'js'],
| mimetypes: ['text/javascript'],
> loader: function () { return _monaco.Promise.wrap(import('./javascript.js')); }
| });
|
@ ./node_modules/monaco-editor/esm/vs/editor/editor.api.js (include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.api.js) 64:0-67
@ ./app/portal/modules/admin/onlineForms/editor/OnlineFormEditor.ts
@ ./app/portal/modules/admin/onlineForms/editor/onlineFormEditor.module.ts
@ ./app/portal/modules/admin/onlineForms/onlineForms.module.ts
@ ./app/portal/modules/admin/admin.module.ts
@ ./app/portal/portal.module.ts
@ multi angular ./app/portal/portal.module.ts
ERROR in ./node_modules/monaco-editor/esm/vs/language/json/monaco.contribution.js 59:31
Module parse failed: Unexpected token (59:31)
You may need an appropriate loader to handle this file type.
| // --- Registration to monaco editor ---
| function getMode() {
> return monaco.Promise.wrap(import('./jsonMode.js'));
| }
| monaco.languages.register({
@ ./node_modules/monaco-editor/esm/vs/editor/editor.api.js (include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.api.js) 63:0-50
@ ./app/portal/modules/admin/onlineForms/editor/OnlineFormEditor.ts
@ ./app/portal/modules/admin/onlineForms/editor/onlineFormEditor.module.ts
@ ./app/portal/modules/admin/onlineForms/onlineForms.module.ts
@ ./app/portal/modules/admin/admin.module.ts
@ ./app/portal/portal.module.ts
@ multi angular ./app/portal/portal.module.ts
ERROR in ./node_modules/monaco-editor/esm/vs/language/html/monaco.contribution.js 86:31
Module parse failed: Unexpected token (86:31)
You may need an appropriate loader to handle this file type.
| // --- Registration to monaco editor ---
| function getMode() {
> return monaco.Promise.wrap(import('./htmlMode.js'));
| }
| monaco.languages.onLanguage(htmlLanguageId, function () {
@ ./node_modules/monaco-editor/esm/vs/editor/editor.api.js (include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.api.js) 62:0-50
@ ./app/portal/modules/admin/onlineForms/editor/OnlineFormEditor.ts
@ ./app/portal/modules/admin/onlineForms/editor/onlineFormEditor.module.ts
@ ./app/portal/modules/admin/onlineForms/onlineForms.module.ts
@ ./app/portal/modules/admin/admin.module.ts
@ ./app/portal/portal.module.ts
@ multi angular ./app/portal/portal.module.ts
My webpack.config.js
file:
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackOnBuildPlugin = require('on-build-webpack');
const fs = require('fs');
const StringReplacePlugin = require('string-replace-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
var ExclusionRegexs = [
/node_modules/
];
const config = function (env, argv) {
console.log("mode", argv.mode);
return {
entry: {
portal: [
'angular',
'./app/portal/portal.module.ts'
],
onlineform: [
'angular',
'./app/online-form/onlineForm.module.ts'
]
},
output: {
path: path.join(__dirname, './wwwroot'),
filename: "[name].js"
},
resolve: {
modules: ["node_modules"],
extensions: [".ts", ".tsx", ".js", ".html", ".css", ".scss", ".svg", ".ttf", ".png", ".json"]
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: "ng-annotate-loader"
},
{
loader: "ts-loader",
options: {
//onlyCompileBundledFiles : true
}
}
],
},
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
]
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
moment: "moment",
"window.jQuery": "jquery"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[name].css"
}),
new StringReplacePlugin(),
argv.mode === 'production' ? new OptimizeCssAssetsPlugin({
cssProcessorOptions: { discardComments: { removeAll: true } }
}) : false,
new MonacoWebpackPlugin({
output: "/monaco",
languages: ['html', 'json', 'javascript'],
//features: ['accessibilityHelp', 'bracketMatching', 'caretOperations', 'clipboard', 'codeAction', 'colorDetector', 'comment', 'contextmenu', 'coreCommands', 'cursorUndo', 'dnd', 'find', 'folding', 'fontZoom', 'format', 'gotoError', 'gotoLine', 'hover', 'inPlaceReplace', 'inspectTokens', 'linesOperations', 'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickOutline', 'referenceSearch', 'smartSelect', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'wordHighlighter', 'wordOperations', 'wordPartOperations']
}),
].filter(Boolean),
optimization: {
minimizer: [argv.mode === 'production' ? new TerserPlugin() : false].filter(Boolean),
splitChunks: {
cacheGroups: {
vendor: {
name: "vendor",
test: (module) => {
const context = module.context;
// Exclude monaco-editor
return context && context.indexOf("node_modules") >= 0 && context.indexOf("monaco-editor") <= 0;
},
chunks: "all",
enforce: true
},
vendormonaco: {
name: "vendormonaco",
test: (module) => {
const context = module.context;
// Only include monaco-editor
return context && context.indexOf("node_modules") >= 0 && context.indexOf("monaco-editor") >= 0;
},
chunks: "all",
enforce: true
},
common: {
name: "common",
test: /[\\/]app[\\/]common[\\/]/,
chunks: "all",
enforce: true
},
},
}
}
}
};
module.exports = config;
"dependencies": {
"@empactis/empactis-angular": "~2.4.0",
"@progress/kendo-ui": "^2019.1.220",
"@uirouter/angularjs": "^1.0.22",
"angular": "^1.7.7",
"angular-animate": "^1.7.7",
"angular-cookies": "^1.7.7",
"angular-loading-bar": "~0.9.0",
"angular-marked": "~1.2.2",
"angular-recursion": "~1.0.5",
"angular-sanitize": "^1.7.7",
"angularjs-scroll-glue": "~2.2.0",
"angularjs-toaster": "~3.0.0",
"applicationinsights-js": "^1.0.20",
"core-js": "~2.6.5",
"jquery": "~3.3.1",
"moment": "~2.24.0",
"moment-timezone": "^0.5.21",
"monaco-editor": "^0.15.6",
"oclazyload": "~1.1.0",
"restangular": "~1.6.1",
"simple-ajax-uploader": "~2.5.5",
"ui-select": "~0.19.8"
},
"devDependencies": {
"@types/angular": "^1.6.54",
"@types/core-js": "^2.5.0",
"@types/jquery": "^3.3.9",
"@types/restangular": "^1.5.44",
"copy-webpack-plugin": "^5.0.0",
"file-loader": "^3.0.1",
"mini-css-extract-plugin": "^0.5.0",
"monaco-editor-webpack-plugin": "^1.7.0",
"ng-annotate-loader": "^0.6.1",
"node-sass": "^4.9.3",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"raw-loader": "^1.0.0",
"rimraf": "^2.6.2",
"sass-loader": "^7.1.0",
"string-replace-webpack-plugin": "^0.1.3",
"style-loader": "^0.23.0",
"tslint": "^5.12.1",
"typescript": "^3.3.3",
"webpack": "^4.29.5",
"webpack-bundle-analyzer": "^3.0.4",
"webpack-cli": "^3.2.3",
"terser-webpack-plugin": "^1.2.2",
"on-build-webpack": "~0.1.0",
"ts-loader": "^5.3.3"
},
"peerDependencies": {
"acorn": "^6.0.0"
},
/// <reference types="../../../../../../node_modules/monaco-editor/esm/vs/editor/editor.api" />
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
It looks like Promise.wrap()
isn't being recognised. even though it's defined in monaco-editor/esm/vs/editor/editor.api.d.ts
Any help would be much appreciated. Thanks.
Hello,
I'm currently running into an issue where I'm not sure what to do. Monaco is loading fine, giving language support for HTML and CSS but for JS I'm getting this exception from the typescript worker as soon as I type in the editor or hover over any keywords:
Uncaught Error: Debug Failure. False expression: Node must have a real position for this operation
Error: Debug Failure. False expression: Node must have a real position for this operation
which stems from this check
return t.prototype.assertHasRealPosition = function(n) {
e.Debug.assert(!e.positionIsSynthesized(this.pos) && !e.positionIsSynthesized(this.end), n || "Node must have a real position for this operation")
}
Added via the plugins in the webpack config - like this new MonacoWebpackPlugin()
- without specifying any languages (which should give me support for all of them if I read it correctly). I'm not doing anything fancy otherwise - just importing and creating, pretty much as shown in the docs.
Version:
"monaco-editor": "0.18.1",
"monaco-editor-webpack-plugin": "1.7.0",
Has anyone encountered this error before?
Thanks
Hello there!
The current version of the monaco-editor-webpack-plugin supports monaco-editor of version 0.15.1
. However, the latest version of the monaco editor is 0.17.0
.
Could you please update the monaco-editor-webpack-plugin to support the latest version monaco editor?
Thank you very much!
https://github.com/Microsoft/monaco-editor-webpack-plugin/blob/master/index.js#L89 should check if compiler
object has a defined options
attribute.
Monaco-editor-webpack-plugin, language configuration lacks graphql, file is located in monaco-editor-webpack-plugin/languages.js
I have set up the plugin using webpack.config.js:
"use strict";
// Required packages
const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
// Variables
const rootOutputDir = "wwwroot/js";
module.exports = {
entry: "./Scripts/Build/Pages/Home/Index.js",
output: {
filename: '[name].js',
path: path.resolve(__dirname, rootOutputDir)
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
resolve: {
alias: {
'monaco-editor': 'monaco-editor/esm/vs/editor/editor.api.js'
}
},
plugins: [
new CleanWebpackPlugin([rootOutputDir]),
new MonacoWebpackPlugin({
languages: ["xml"],
features: ['wordHighlighter']
})
]
};
This generated the following files in 'wwwroot/js':
0.js
editor.worker.js
main.js
I thought the point of this plugin and webpack in general was to bundle all the required modules into a single file. I have attempted to just load 'main.js' but it gives the following console errors:
GET https://localhost:44303/0.js net::ERR_ABORTED 404
It seems to be looking for the file in the root directory of my server rather than the place where it is generated which would be https://localhost:44303/js/0.js.
If I include all 3 scripts in my page everything is fine. So I have the following questions:
We use Webpack's dynamic public path feature to set the URL from which we fetch our static resources at runtime. This allows us to programmatically enable/disable use of our CDN. Unfortunately, loading cross-origin workers is not allowed for security reasons so it's important that we continue to load worker files from the page origin even when the CDN is enabled.
In order to make this possible, a publicPath
option could be introduced that overrides the normal Webpack dynamic/compilation public paths if specified. This option is already supported by worker-loader, mini-css-extract-plugin, and other similar tools.
Hello everybody !
While using monaco-editor-webpack-plugin
with create-react-app
we can see the following error below.
This seems to be because of an incompatibility in the Webpack configuration with thread-loader
ERROR in ./node_modules/monaco-editor/esm/vs/editor/editor.main.js
Module build failed: Thread Loader (Worker 4)
Cannot read property 'userRequest' of undefined
at Object.pitch (C:\Repos\project-ui\node_modules\monaco-editor-webpack-plugin\loaders\include.js:9:61)
@ ./src/index.js 3:0-40
@ multi ./node_modules/project-devutils/config/polyfills.js ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/index.js
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.