I’ve integrated Builder with my Next.js app and created some custom components that use GreenSock, an animation library (https://greensock.com/). The library is imported within my code and bundled in the normal way as part of my Next.js app.
Let’s say that I wanted to use GreenSock within the Visual Editor. What’s the best way to expose the library to custom JS?
This old, unlinked doc explains how to import a third-party library into custom JS, but I believe that approach is deprecated. At any rate, it would mean importing the same library twice: once in my Next.js bundle and once as part of custom JS. The user would have to download the same library twice, which isn’t great.
Is the true answer perhaps that custom JS isn’t intended to handle advanced use cases like importing libraries?
Hey @ersin! Importing third party libraries into custom JS is not best practice and that feature will likely be deprecated. Rather, we recommend passing libraries, data, and functions to Builder content through the data and context props using one of our SDKs. Or depending on your use case, it might make more sense to create a custom component that wraps the feature you need from the library, register it, and use it in Builder that way. If you really need to import your library in custom JS, you can try using System.import() but it would be ideal to avoid this altogether.