I am trying to use format-unicorn npm package in my Nuxt app. But after importing it inside my Vue page I get the following errors:
Client: Missing stack frames
Server: [Vue warn]: Error in render: "TypeError: this.currencyFormat.formatUnicorn is not a function"
Initial approach
The following approach should work according to the plugins documentation:
Another way to use
packagewithout installing the module is by importingpackagedirect in the<script>tag.
// Product.vue
<template>
<div class="product">
<p>Price: {{ localizedPrice }}</p>
</div>
</template>
<script>
require('format-unicorn')
export default {
data() {
return {
currencyFormat: '{c}{p}',
currency: '$',
price: 12.99
}
},
computed: {
localizedPrice: {
get() {
return this.currencyFormat.formatUnicorn({c: this.currency, p:this.price})
}
}
}
}
</script>
Unfortunately this approach gives me an error:
Missing stack frames (and no other useful info).
And in the node console: [Vue warn]: Error in render: "TypeError: this.currencyFormat.formatUnicorn is not a function"
But what is weird, is that this page actually opens without any error if I navigate with Nuxtlink there. But as soon as I hit refresh, the error persists.
Utilizing plugins approach
By creating format-unicorn.js file inside plugins directory I was still getting the same error:
//// plugins/format-unicorn.js
require('format-unicorn');
//// nuxt.config.js
// ...
plugins: [
'~/plugins/format-unicorn.js'
// applying mode: 'client' or 'server' doesn't help as well
],
// ...
Naive plugins appproach
I wanted to know if it's going to work at all, so I just pasted code from package repo there (And it worked) :
//// plugins/format-unicorn.js
String.prototype.formatUnicorn = function () {
let str = this.toString()
if (arguments.length) {
const type = typeof arguments[0]
const args = type === 'string' || type === 'number' ? Array.prototype.slice.call(arguments) : arguments[0]
for (const arg in args) str = str.replace(new RegExp(`\\{${arg}\\}`, 'gi'), args[arg])
}
return str
}
//// nuxt.config.js
// ...
plugins: [
'~/plugins/format-unicorn.js'
],
// ...
Conclusion
By this point you probably realize I am not satisfied with naive approach since I want to extend my app with 3rd party packages in future. And my question here is what am I doing wrong? Is there anything special in trying to extend a prototype from Nuxt plugin or I just missing something?
