Week-3 Installing and Configuring Libraries

Overview

The main goal of this week-3 was to install and configure the yjs and socket.io libraries to Music Blocks. I started with the standard way Music Blocks uses to install the libraries. I encountered a few problems, took the help of Mentors, and finally was able to install and configure the libraries.

In this article, I will also write the approach that worked for me so that future contributors can save time installing the libraries in Music Blocks.

Objectives

The core object was to install and configure the yjs and y-socket.io libraries in Music Blocks.

Approach

Initially, I installed libraries using npm and tried importing using both import and require syntax. But both methods failed. while using import syntax ( ES Module ), I got the below error.

Uncaught SyntaxError: Cannot use import statement outside a module

While using require syntax ( commonJS ), I got this error.

require is not defined

After discussing with mentors, I got the idea that in Music Blocks, libraries are installed by bundling them in UMD format, adding them into the lib folder of the Music Blocks, and finally using script tags in the index.html file to add the library as a global variable into the browser environment (to be used by the client code).

Following that, I set up a dummy project, installed the webpack bundler, and installed the libs I needed to bundle. I bundled the yjs and y-socket.io libraries and added them to Music Blocks in the manner I described above.

On testing, I found out that one instance of the Yjs in the Yjs library was conflicting with another instance of the Yjs installed in y-socket.io lib.

Yjs was already imported. This breaks constructor checks and will lead to issues!

So here comes the question “How to install a constant instance of Yjs across all the libraries?”.

Its answer was in using Rollup as it combines two libraries by using the tree-shaking mechanism to remove the duplicate code and ensure that there is only one instance of a library.

After setting up a Rollup project and installing Yjs and y-socket.io libraries, I created a bundle that contains both Yjs and y-socket.io. I tested it separately and it worked. But still, there was a problem with y-socket.io.

Though I was getting an instance of y-socket.io, that instance was empty. It had no methods or properties. So I did some more testing with the y-socket.io bundle alone and found out that the bundle version of this library doesn’t work ( probably, it's a wrapper of Yjs and socket.io libs ). Following that I installed and bundled the socket.io itself and added them into the Music Blocks lib folder as yjs.min.js and socket.io.min.js.

After that, I imported the newly added libs using script tags in the index.html file and tested them. Still, there was an error and it was related to the libs not being loaded correctly. I tinkered with the script tags and removed the defer attribute from the tags as they affect the loading process of the library. After this, Installation worked.

Conclusion

Finally, I was able to successfully install the Yjs and socket.io libraries in the Music Block. After this, the Next goal is to finish up an MVP of the project. I hope the steps I described above are clear to guide anyone who wants to install a new lib in Music Blocks. If you still have any doubt on this, feel free to comment. I’ll try to help.

Thanks for reading!