How (Not) to Bundle a Component Library in Vue 3

Diary of a Broken Dev: Entry #1

Hello, I refuse to introduce myself any further even though this is my first official post. The topic at hand today is to make sense of the last 3 days at my current job, and (hopefully) justifying why they pay me.

isCE: Not a Boolean Failing to Adhere to Semantic Variable Declaration

Narratives are unimportant, what matters is that our custom component library was refusing to play nice. After building it and attempting to import it into any other project, regardless of configuration, we were met with the following error:

Uncaught TypeError: Cannot read properties of null (reading 'isCE')

Well isn't that grand? Googling for possible leads led nowhere fast. We were pretty much on our own in the vast open (shit) sea without a mast.

Not All Build Configurations are Created Equal

Poring over the Vue CLI docs led me to an ambiguously worded statement.

Note on Vue Dependency

In lib mode, Vue is externalized. This means the bundle will not bundle Vue even if your code imports Vue. If the lib is used via a bundler, it will attempt to load Vue as a dependency through the bundler; otherwise, it falls back to a global Vue variable.

To avoid this behavior provide --inline-vue flag to build command.

Like any able-minded individual, I did what was only natural: contact my brother who is a linguist and has a background in programming. He confirmed that the statement was, in fact, worded ambiguously. Being that he is a non-prescriptivist, he went on to explain the importance of context and the democratization of language. This led me much closer to a solution than the previous 48 hours did.

If it Makes Sense But Doesn't Work, You're a Programmer

I actually just ended up removing the --inline-vue flag, created a vue.config.js file and added the following:

configureWebpack: {
  output: {
    libraryExport: "default",
  },
}

What does this do? Fuck if I know. At this point, I couldn't care less. After that, in the host project, I created another vue.config.js file and code-bae'd some:

module.exports = {
  chainWebpack(config) {
    config.resolve.alias.set("vue", 
    path.resolve("./node_modules/vue"));
  },
};

Fortunately, I actually know what this does. This is something-something prevents double Vue import.

Takeaways and Lessons Learned

Hope management doesn't see this devlog and fire me, such that I might save enough money to buy a farm and stop doing this to myself for a living.