Open taheramr opened 11 months ago
I verified that indeed ace-builds and NextJS are incompatible at the moment.
Instead, I recommend to use ace-code
with a manual module loader, like in this codesandbox: https://codesandbox.io/p/sandbox/funny-heisenberg-r7ptjs?file=%2Fcomponents%2Fcode-editor.jsx%3A9%2C31
For dynamically loading themes, I adjusted the module loader a bit, but there would still be some manual work if you want to support all possible themes.
Also, note that your example has a broken NextJS/React implementation as your layout.jsx is missing <html>
and <body>
, which stops the useEffect
from being executed at all.
Looks like nextjs gets stuck while parsing files for xquery and jsoniq modes. Perhaps we should remove these from the common mode list.
Btw ace-code also can be used with its esm-loader.js instead of manual module loader, because it does not have the xquery and jsoniq modes.
const ace = await import("ace-code");
await import("ace-code/esm-resolver");
any updates on this? we are currently using ace-code
instead of ace-build
to resolve this but ace code does have problems with error handling in our code-editor and seems like using ace-build is the way to go here.
By "problems with error handling" do you mean that it doesn't display errors in gutter? If yes, it can be fixed with adding https://github.com/mkslanc/ace-linters which is the new and improved replacement for deprecated workers that are present in ace-builds.
yes, thats what I mean. I'll give it a try.
As for the initial issue with ace-build
and its usage for Next, is there any updates on that?
I'm using NextJS with the new app directory, importing the ace-builds resolvers ( either the ESM or Webpack ) makes the building phase stuck and it never finishes.
I was able to reproduce this in this codesandbox as well: https://codesandbox.io/p/sandbox/modest-hawking-c5mzf9?file=%2Fcomponents%2Fcode-editor.jsx%3A40%2C32
To reproduce, run
npm run build
and notice that the build get stuck in the optimisation phase, is there a recommended way on how to import ace builds resolvers given the fact that we might not know which theme exactly we want to use?This is currently blocking our migration to NextJS, I'm also ready to provide any help if needed.