Unable to run using Next.js

[zenorocha]

I was able to run Firepad successfully using plain React, but unfortunately, I couldn't execute it using Next.js

Here's a running example without Firepad: https://codesandbox.io/s/react-moncao-editor-nextjs-without-firepad-u8p4k

And here's what happens when you import the package: https://codesandbox.io/s/react-moncao-editor-nextjs-with-firepad-4ny9s

It would be amazing if we could get this fixed.

[Shubham567]

Editor Not working, Use

The problem which you demonstrated is not actually with firepad, but monaco-editor. Problem is NextJs is trying to do SSR, where it fails, as there is restriction of importing global CSS only from _app.js, There are a few legacy plugins for webpack which deals with this issue. But there is a better library which deals with it in a much better way.

https://www.npmjs.com/package/@monaco-editor/react

Above will get your editor running. But

There is problem in current implementation of firepad and it still wont support NextJs.

Right now firepad implementation has monaco-editor as a peer dependency, which is problematic to use with NextJs, (issue which you faced rn).

Currently firepad uses monaco instance by directly importing global monaco-editor as dependency, To make it work we need to be able to pass monaco instance to fromMonaco method circumvent this problem, which will require a big rewrite. @Progyan1997 can tell whether if that will be a viable option.

There might be another solution with webpack, Things to keep in mind that Next 11 has now moved to webpack 5 but Next10 is and older still remain very popular till date. I am not a webpack expert to be able to figure that out.

I too faced same issue, I had to move quickly with the project, so I choose to create a Reactjs project and import it using just used an iframe to render it inside my NextJs project, with interframe communication. Its almost imperceptible except for some unwanted reloads when I change language.

Here is the React implementation which I use inside iframe. https://cpd.skillcounty.com?lang=python

[0xTheProDev]

Hi @zenorocha, as @Shubham567 already mentioned you need to a bit of hardlifting to get monaco work with NextJS. To address the second concern, you have couple of options you might want to try to circumvent the requirement of monaco-editor package directly from Firepad. One is to alias it in Webpack Config using resolve.alias property, or if you are having a TypeScript package use paths in tsconfig.json. Or you can perform some pre-build transformation to modify the import statement into one that helps.