Open yuramag opened 1 year ago
Similar problem with Blazorise.Bootstrap 1.2.1 and BlazorMonaco 3.0.0
Error: Microsoft.JSInterop.JSException: Can only have one anonymous define call per script file Error: Can only have one anonymous define call per script file at s.enqueueDefineAnonymousModule (https://localhost:59356/_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js:8:5413) at g (https://localhost:***/_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js:9:1857) at https://localhost:***/_content/Blazorise/vendors/sha512.js?v=1.2.1.0:9:17673 at https://localhost:***/_content/Blazorise/vendors/sha512.js?v=1.2.1.0:9:17703 at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at Blazorise.Modules.BaseJSModule.InvokeSafeVoidAsync(String identifier, Object[] args) at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
Also having the same issue after upgrading to Blazorise 1.2.2
and BlazorMonaco 3.0.0
. Has anyone found a workaround?
Stuck here as well...
I have the same problem
BlazorMonaco version 3.0.0 Blazorise (bootstrap and other dependecies) version 1.0.7 Any update?
no expert on JS, but after some digging I think the problem stems from Blazorise using ESM and Monaco using AMD.
I have a working application using Blazorise 0.9.3.5 and BlazorMonaco 2.0.0, but I can't upgrade, because it breaks with the same error message you got.
Found this and played around according to the suggestions, unsuccessfully unfortunately: https://github.com/microsoft/monaco-editor/issues/2283
Stuck as well
Having the same issue here too. Should we expect to see this issue addressed or will we need to look for alternative solutions?
Edit: I was able to find a solution here.
According to the solution in #59, you can replace the following scripts:
- <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
- <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/monaco-yaml-prebuilt/dist/monaco-editor.min.js"></script>
@gt-jkinter - This is great, thanks for sharing!
I have solved this by replacing the way the JavaScript is bundled. It works in all combinations of Blazorise and Monaco.
Advantage: Full control of code and can be bundled locally (with LigerSharp or similar), no external repo calls!
Steps:
{
"name": "my.app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.9.0",
"file-loader": "^6.2.0",
"monaco-editor-webpack-plugin": "^7.1.0",
"style-loader": "^3.3.4",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4"
},
"dependencies": {
"monaco-editor": "^0.45.0"
}
}
This includes the original monaco editor sources.
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'wwwroot/assets/vendor/monaco-editor'),
filename: 'editor.js'
},
module: {
rules: [
{`const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'wwwroot/assets/vendor/monaco-editor'),
filename: 'editor.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.ttf$/,
use: ['file-loader']
}
]
},
plugins: [new MonacoWebpackPlugin()]
};`
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.ttf$/,
use: ['file-loader']
}
]
},
plugins: [new MonacoWebpackPlugin()]
};
npx webpack
. A lot output appears<script src="/assets/vendor/monaco-editor/editor.js"></script>
<script src="_content/BlazorMonaco/jsInterop.js"></script>
Put the BlazorMonaco script afterwards!
This bundle uses a different loader and is fully compatible with Blazorise. Also, I run this with Syncfusion and this works too.
Tried to make this work as well. I followed the steps by @joergkrause , but it wasn't fully working for me yet. A few changes I made:
{
"version": "1.0.0",
"name": "my-app",
"main": "index.js",
"private": true,
"devDependencies": {
"css-loader": "6.10.0",
"file-loader": "6.2.0",
"monaco-editor-webpack-plugin": "7.1.0",
"style-loader": "3.3.4",
"webpack": "5.90.3",
"webpack-cli": "5.1.4"
},
"dependencies": {
"monaco-editor": "0.46.0"
}
}
webpack.config.js
: Note that this differs from the original code, found this example at https://github.com/microsoft/monaco-editor/blob/main/samples/browser-esm-webpack-monaco-plugin/webpack.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');
// See https://github.com/microsoft/monaco-editor/blob/main/samples/browser-esm-webpack-monaco-plugin/webpack.config.js
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'wwwroot/vendor/monaco-editor'),
filename: 'editor.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.ttf$/,
use: ['file-loader']
}
]
},
plugins: [
new MonacoWebpackPlugin({
languages: ['csharp' ]
})
]
};
./src/index.js
(but not sure about the content, what should go in here?):import * as monaco from 'monaco-editor';
window.monaco = monaco;
Compile using npx webpack
, creates the files in wwwroot/vendor/monaco-editor
Add this on the top of the page where the editor is used:
<script src="/assets/vendor/monaco-editor/editor.js"></script>
<script src="/assets/vendor/monaco-editor/editor.worker.js"></script>
<script src="_content/BlazorMonaco/jsInterop.js"></script>
Having the same issue, as @gt-jkinter said, use this CDN fix the issue:
<script src="https://cdn.jsdelivr.net/npm/monaco-yaml-prebuilt/dist/monaco-editor.min.js"></script>
Will this ever get fixed within the NuGet package itself?
I'm getting this error together with Bootstrap:
Error: Can only have one anonymous define call per script file
at c.enqueueDefineAnonymousModule (loader.js:8:4917)
at p (loader.js:9:1802)
at bootstrap.js:8:48
at bootstrap.js:10:3
Would be awesome if this would work out of the box 😊
When adding Monaco Editor to a project that already contains Blazorise I get the following exception in the browser console:
Here is a basic project to reproduce the issue: https://github.com/yuramag/BlazoriseWithMonaco
Seems like there is some sort of conflict between the JS code backing
Tooltip
component andBlazorMonaco
internals. Any suggestion on how to address this problem?