search

ajaxorg / ace

Ace (Ajax.org Cloud9 Editor)
https://ace.c9.io
Other
26.66k stars 5.28k forks source link

Importing `ace-builds/esm-resolver` or `ace-builds/webpack-resolver` breaks NextJS #5456

Open taheramr opened 11 months ago

taheramr commented 11 months ago

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.

whazor commented 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.

nightwing commented 10 months ago

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");
taheramr commented 9 months ago

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.

nightwing commented 9 months ago

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.

amrtaher1234 commented 8 months ago

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?