DEV Community

Cover image for How to fix the Error in data(): "TypeError: Cannot read properties of null (reading 'config')", Vue2 composition API warning
Tray Northern
Tray Northern

Posted on

3 3

How to fix the Error in data(): "TypeError: Cannot read properties of null (reading 'config')", Vue2 composition API warning

If you've been using the @vue/composition-api plugin to add composable scripts to develop your Vue2 packages, I'm sure you've ran into this warning when using your library.
Image description

So.. What's the deal?

Well, chances are, your libraries' package.json contains the @vue/composition-api.

 "dependencies": {
    "@vue/composition-api": "^1.4.5"
  },
Enter fullscreen mode Exit fullscreen mode

If the consuming application also contains this dependency, you will have run into this error as Vue can't decide what the @vue/composition-api is since there's 2 different versions installed.

So what's the fix?

There's multiple ways to fix this.

If you are bundling your package with rollup, in your rollup.config.js or rollup.config.ts, add it as an external so that rollup doesn't bundle it, e.g.:

{
  input: 'src/yourinputfile.js',
  external: ['vue', '@vue/composition-api'],
  plugins [...]
}
Enter fullscreen mode Exit fullscreen mode

Another option is to add @vue/composition-api as a dev dependency in your library

"devDependencies": {
  "@vue/composition-api": "^1.4.5"
},
"peerDependencies": {
  "@vue/composition-api": "^1.4.5" // if you have specific features from newer versions, you can use a peer dependency to tell the consuming app to use this version
}
Enter fullscreen mode Exit fullscreen mode

That's it!

For more such insights, checkout my blog website https://trayvonnorthern.com

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series