Comments (2)
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
from firepad-x.
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.
from firepad-x.
Related Issues (12)
- Remove Karma and related dependencies from package.json
- Error while importing {fromMonaco} HOT 3
- sendOperation() called with invalid operation HOT 2
- An API to change firebase reference? HOT 5
- Cross-platform collaboration breaks on monaco due to CRLF HOT 7
- Headless usage? HOT 9
- Firepad.TextOperation.fromJSON or something like it? HOT 3
- Assertion Failed: Both operations have to have the same base length HOT 1
- Firebase V9 HOT 2
- Allow setting arbitrary user properties HOT 1
- Add multi-files support for project based. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from firepad-x.