Our great sponsors
-
-
webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
lerna
:dragon: Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
A few weeks ago, I ran into an interesting problem. At Superbet, we were attempting to extract some VueJS reactive code into a separate utility library, using TypeScript. I thought I knew what was waiting for us, and expected it to be a quick and simple thing. I was gravely mistaken. Vue reactivity broke, and investigating what happened was no easy task. However, it also involved a process of discovery that was interesting enough to write about!
Luckily, the fix for that is straightforward enough - we just needed to tell the build tool to exclude those dependencies from the bundle. With Webpack, you can specify the externals field like so:
A few weeks ago, I ran into an interesting problem. At Superbet, we were attempting to extract some VueJS reactive code into a separate utility library, using TypeScript. I thought I knew what was waiting for us, and expected it to be a quick and simple thing. I was gravely mistaken. Vue reactivity broke, and investigating what happened was no easy task. However, it also involved a process of discovery that was interesting enough to write about!
In this article, I'd like to introduce a development process for external libraries that rely on Vue as a peer dependency, warn you about the potential pitfalls, and share how it applies to other JavaScript ecosystems as well (such as ReactJS). I'll take you through the experiences we've had step by step, share the difficulties we've encountered, and help you avoid them.
That is to say, that would be it, unless you happen to be using peer dependencies and happen to be relying on a single instance of some object to exist in code, as happens to be the case with both VueJS and React. In this case, though the code would work fine if it were built and published, it will not resolve correctly with npm-link. There are a number of ways around it, some based on yarn, others specific to Webpack, or resolved by using Lerna. However, there are two fairly generic ways of handling it, as well.