I have Navigation component in my nuxt application and it use window object and I know it has problem with SSR.
I have imported this component in default layout. But I commented this component in default.vue layout, but still gives error and freezing!
error message:
window is not defined
I'm confused.
Try it with this:
if (process.client) {
// put your code that should be executed on the client side here
}
Related
I am writing custom plugin and need to create CSS custom properties from inside of it. In SPA mode everything is fine, but SSR mode is where the troubles coming. What I need is just to put my method inside of a mounted() hook. Is it possible?
export default {
install(app, options) {
createCSSVariables()
function createCSSVariables(options) {
const root = document.documentElement // this can't be working on server side :(
root.style.setProperty('--font-family', options.font_family)
root.style.setProperty('---accent', options.colors.accent)
}
}
}
I am using nuxt and could just use 'client' flag in plugin, but since it is for UI library, this will not help much - in this scenario all the elements would flicker right after mount
I would like to create a viewer PDF files into electron/vuejs application.
I need to use the pdfjs librarie.
For that I installed this package : "pdfjs-dist": "2.6.347"
and in my component vuejs I try to used this by doing this :
import pdfjsLib from "pdfjs-dist/webpack";
This import instruction seeems to be running good. But If a start used this like this :
created()
{
pdfjsLib.getDocument()
}
I throw this error :
Cannot read property 'getDocument' of undefined"
I try lot of tricks but I don't find any solution for use this library in my component.
Anyone have a vuejs project with pdfjslib for viewing pdf ?
This seems to work:
import("pdfjs-dist").then((pdfjsLib) => {
pdfjsLib.getDocument();
});
It can be used inside either created() or mounted(). I'd personally use it in mounted.
Working demo here.
Also note calling getDocument() with no arguments seems to trigger some lib error (but that's outside the scope of current question):
Invalid parameter in getDocument, need either Uint8Array, string or a parameter object
I am using vue.js and created a webcomponent with stencil.js. I don't want to publish the webcomponent to npm, which is why I simply include it in the src/assets directory in my vue project.
However I get the error
[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in --->
<App> at src/app.vue
<Root>
It works without problems with another component I already have in the assets directory.
It also doesn't help to use
Vue.config.ignoredElements = ['my-component'];
since the component is still empty when I run it locally.
Thanks for your help!
If you're including the web component locally, you can use #vue/web-component-wrapper:
import Vue from 'vue'
import wrap from '#vue/web-component-wrapper'
const Component = {
// any component options
}
const CustomElement = wrap(Vue, Component)
window.customElements.define('my-element', CustomElement)
just in case, for me that was a version issue:
my components were defined like that:
export default class Foo extends ScopedElementsMixin(LitElement) {
...
}
And in the vue I did
customElements.define('foo', Foo);
I started received that error when I updated scoped-elements 1.x.x -> 2.x.x.
So when I put everything back to 1.x.x the error just gone.
I have set up Vue so that I have a top level AppLayout component which just includes a Navigation Menu component, the router-view and, which uses v-if to optionally display an ErrorDisplay component if the error data item is set. I set this from an err state variable in the Vuex store.
That is where I want to get to. However, I think the problem is more fundamental.
In a lower component, I have a submit function that gets called when I click the submit button. To test error handling I have put
throw new Error('Cannot Submit');
In my Main.js I have
handlers for window.orerror, window.addEventListner, Vue.config.errorhandler, Vue.config.warnhandler
All of these should just call the errHandler function, which just calls an action to update the err variable in the state. The hope being that this will then result in the ErrorDisplay component showing on my top level component.
However, I have console.log statements as the first statement in all the above handlers and in my errHandler function. None of these console.logs are getting executed.
In the Console in Chrome, I am just seeing
[vue warn]: Error in v-on handler: "Error: Cannot Submit"
So it is getting the text from my throw, but none of the error handlers seem to be capturing this?
Vue provides Global configuration config.errorHandler to capture error inside Vue components Globally.
As per Official Docs
Assign a handler for uncaught errors during component to render function and watchers. The handler gets called with the error and the Vue instance.
This is how it can be used:
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` is a Vue-specific error info, e.g. which lifecycle hook
// the error was found in. Only available in 2.2.0+
}
Official docs
Hope this helps!
Did more research and I think someone may have already raised a bug report with Vue for this
PR on Vue
https://github.com/vuejs/vue/pull/5709
So it looks like the problem is that the way that I am trying to test this isn't being caught.
[edit - I thought I was using Hot Reloading, but I am actually using Live Reload]
I have a native plugin that needs to do some clean up each time it is finished with. Basically I want to prevent these errors:
Calling JS function after bridge has been destroyed: RCTDeviceEventEmitter.emit(..)
componentWillUnmount() doesn't get called.
Live reloading will restart the app and load the app back to the initial route when a file changes. ComponentWillUnmount won't be called.
When you reload, what happens behind the scenes is that the react context is getting destroyed, and a new one is being created.
That error get's thrown whenever a Native Module is trying to do work, by using the old react context.
You could use something like this:
Error Boundary in react
Just wrap the error prone code inside the ErrorBoundary component, e.g.
<ErrorBoundary><childComponentCausingError></ErrorBoundary>
And in the ErrorBoundary component, you could just catch the error in componentDidCatch = (error, info) => {
}
componentDidCatch() is a lifecycle method in React.