monaco-languageclient
monaco-languageclient copied to clipboard
integrate with @monaco-editor/react
I was able to make the code compile without error by
- add
"type": "module"to thepackagage.jsonofmonica-editor - add this to
next.config.js
module.exports = {
reactStrictMode: false,
typescript: {
// !! WARN !!
// Dangerously allow production builds to successfully complete even if
// your project has type errors.
// !! WARN !!
ignoreBuildErrors: true,
},
webpack: (config, { dev }) => {
// config.module.rules = config.module.rules.filter((r) => !r.oneOf);
config.module.rules.push({
test: /\.css$/i,
use: ["style-loader", "css-loader"],
});
const rule = config.module.rules
.find((rule) => rule.oneOf)
.oneOf.find(
(r) =>
// Find the global CSS loader
r.issuer && r.issuer.include && r.issuer.include.includes("_app")
);
if (rule) {
rule.issuer.include = [
rule.issuer.include,
// Allow `monaco-editor` to import global CSS:
/[\\/]node_modules[\\/]monaco-editor[\\/]/,
];
}
if (config.module.generator?.asset?.filename) {
if (!config.module.generator["asset/resource"]) {
config.module.generator["asset/resource"] = config.module.generator.asset;
}
delete config.module.generator.asset;
}
return config;
},
};
- Import
MonacoServicewith this:
const MonacoServices = dynamic(
() => import("monaco-languageclient").then((module: any) => module.MonacoServices),
{ ssr: false }
);
The problem I run into now is MonacoServices is not loaded at all. It is not filled with the object from monaco-languageclient when I access it. Wonder if this is the same problem as one described in here https://github.com/TypeFox/monaco-languageclient/issues/412#issuecomment-1227289713.
Appreciate any help here. Thanks.