Error : " Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension."
while importing y-websocket in a plain js file like so
import { WebsocketProvider } from 'y-websocket';
Fix
inserting "type" : "module" in package.json seems to make it working.
I don’t if its a fix or just a way around but this seems to removed the problem.
Hi @shreyas,
This is indeed a bug. The new convention was forming after I initially published this package. I’m going to fix this in the next major release. The issue is tracked here: https://github.com/yjs/y-websocket/issues/72
y-websocket should still work when you turn on “automatic module detection” in your bundler. Btw, which one do you use?
I am not a full time dev yet, so was just exploring CRDTs for a project and found yjs.
So answering “which one do you use?” would be vague but have used browserfiy in past and so will use that with yjs.
Btw can you comment on the stability of yjs and its use for some application,
and also any resoucres to study its implementation in any project or code repo using yjs other than mentioned here as they all are some kind of editor and which are intergerated with yjs, i wanted to explore it beyond that with my own frontend.
Thanks!!
and Cheers!! for such a great work.
Also when i use import * as Y from 'yjs'; i’m required to specify type module in my projects package.json file to make the import work.
Is there a way to do this without doing this.
No problem. npm modules by itself are not usable on the web. Generally, you need to somehow bundle them to a single javascript file that the browser understands. When you use create-react-app, for example, you automatically use the webpack bundler. Browserify, brocolli, rollup, fuzebox, and parcel are other bundlers that people use (seriously, there are hundreds of them). The error message you sent me was produced by one of the bundlers, I just wanted to know which one you currently use in your project so I can debug the issue.
Maybe that’s not important right now. I recommend to use webpack, because it is very easy to setup.
Your starting point should be here: https://docs.yjs.dev/ This website also contains a list of companies that use Yjs. There are many others that I didn’t list. Yjs is the most downloaded shared editing solution right now. If you are looking for an editor, I recommend to look into TipTap (https://www.tiptap.dev/) or Remirror. Both of them use Yjs as the default collaborative editing engine.
There is an “internals” section on the website where I documented some of the internal information. The algorithm is explained in the linked CRDT paper. There is also walkthrough of the codebase. However, this is a very complicated topic. So I recommend to first get a general idea about CRDTs on https://crdt.tech before looking into the advanced model that Yjs implements.
That is also a bundler specific error. Webpack, for example, doesn’t complain when you do that.
In the JavaScript world there are two competing module formats. The CommonJS format (mainly used by Nodejs) does imports like this const Y = require('yjs'). EcmaScript modules do imports like this import * as Y from 'yjs' or import {Doc} from 'yjs'. EcmaScript modules are far more advanced and slowly take over even the nodejs ecosystem. If your current project is a commonjs project, you can just do const Y = require('yjs').
However, if you are developing a web application, I recommend to use the EcmaScript module format so you don’t have to relearn everything in a few years.