I'm using #nuxtjs/composition-api in my Nuxt application with Vuetify. I have a composable file like this:
// composables/dialog.js
// https://www.npmjs.com/package/vuetify-dialog
import { useContext } from '#nuxtjs/composition-api'
export function useDialog () {
const { $dialog } = useContext() // for some reason $dialog is undefined here
const { message, error, info, warning, notify } = $dialog
function showInfo (title, text) {
return info({ title, text })
}
function messageSuccess (text) {
return message.success(text)
}
// ... some other functions with message, error, info, warning
return {
$dialog,
showInfo,
messageSuccess,
// ...
}
}
The module $dialog is correctly registered in nuxt.config.js: $dialog docs
{
modules: [
// Simple usage
'vuetify-dialog/nuxt',
// ... other modules
]
}
When I access first a page that doesn't use this composable and then navigate to another page that uses the composable, it works fine. However, if I directly open the page that uses the composable, it shows the error cannot destructure property 'message' of '$dialog' as it is undefined. It happens in production and local env.
import { useDialog } from '~/composables/dialog'
const { showInfo, messageSuccess } = useDialog()
Is there any limitation with composable files and #nuxtjs/composition-api ?
Github Issue
Related
Is there a good way to do display a maintenance page when visiting any route of my SvelteKit website?
My app is hosted on Vercel, for those who want to know.
What I've tried so far:
Set an environment variable called MAINTENANCE_MODE with a value 1 in Vercel.
For development purposes I've set this in my .env file to VITE_MAINTENANCE_MODE and called with import.meta.env.VITE_MAINTENANCE_MODE.
Then inside +layout.server.js I have the following code to redirect to /maintenance route
import { redirect } from "#sveltejs/kit";
export async function load({ url }) {
const { pathname } = url;
// Replace import.meta.env.VITE_MAINTENANCE_MODE with process.env.MAINTENANCE_MODE in Production
if (import.meta.env.VITE_MAINTENANCE_MODE == 1) {
if (pathname == "/maintenance") return;
throw redirect(307, "/maintenance");
} else {
if (pathname == "/maintenance") {
throw redirect(307, "/");
};
};
};
What I've also tried is just throwing an error in +layout.server.js with the following:
import { error } from "#sveltejs/kit";
export async function load() {
if (import.meta.env.VITE_MAINTENANCE_MODE == 1) {
throw error(503, "Scheduled for maintenance");
};
};
However this just uses SvelteKit's static fallback error page and not +error.svelte. I've tried creating src/error.html in the hope to create a custom error page for +layout.svelte but couldn't get it to work.
I would like to use a custom page to display "Down for maintenance", but I don't want to create an endpoint for every route in my app to check if the MAINTENANCE_MODE is set to 1.
Any help is appreciated
You could use a handle server hook, e.g. src/hooks.server.ts:
import { env } from '$env/dynamic/private';
import type { Handle } from '#sveltejs/kit';
export const handle: Handle = async ({ event, resolve }) => {
if (env.MAINTENANCE_MODE == '1' && event.routeId != '/maintenance')
return new Response(undefined, { status: 302, headers: { location: '/maintenance' } });
// <other logic>
// Default response
return await resolve(event);
}
And on the maintenance page you can prevent all further navigation:
import { beforeNavigate } from '$app/navigation';
beforeNavigate(async ({ cancel }) => {
cancel();
});
(Possibly add some periodic checks via fetch calls to navigate elsewhere once the site is back online.)
You can also use +layout.ts to hook up for the maintenance mode. You can even make this conditional for some parts of the site (have frontpage still up and running).
Here is the trick we use:
import type { LayoutLoad } from './$types';
import { chainsUnderMaintenance } from '$lib/config';
import { error } from '#sveltejs/kit';
export const load: LayoutLoad = ({ params }) => {
// Check chain maintenance status; if under maintenance, trigger error (see +error.svelte)
const chainName = chainsUnderMaintenance[<string>params.chain];
if (chainName) {
throw error(503, `Chain under maintenance: ${chainName}`);
}
};
I'd like to use Google One Tap in my Angular 11 app. Following the documentation I added <script async defer src="https://accounts.google.com/gsi/client"></script> to my html and then used the following code in my app.component.html:
<div id="g_id_onload"
data-client_id="MY_GOOGLE_CLIENT_ID"
data-callback="handleCredentialResponse",
data-cancel_on_tap_outside="false">
</div>
The popup works fine, though I can't seem to log in. If I create a function handleCredentialResponse in app.component.ts, I get the following error: [GSI_LOGGER]: The value of 'callback' is not a function. Configuration ignored.
If I instead try to use the JavaScript API, Typescript throws the following error: Property 'accounts' does not exist on type 'typeof google'
What should I do to be able to using Google One Tap in Angular?
I had a similar problem when I used the HTML API approach, so I ended up using the JavaScript API instead.
Here's what I did:
First, make sure to install the #types/google-one-tap package.
As you mentioned, I'm also importing the script in my index.html file, like so:
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<app-root></app-root>
</body>
Now, moving on to your main component which in my case is app.component.ts, import the following first:
import { CredentialResponse, PromptMomentNotification } from 'google-one-tap';
Then, you can add this on the ngOnInit(). Make sure to read the documentation to get more details on the onGoogleLibraryLoad event:
// #ts-ignore
window.onGoogleLibraryLoad = () => {
console.log('Google\'s One-tap sign in script loaded!');
// #ts-ignore
google.accounts.id.initialize({
// Ref: https://developers.google.com/identity/gsi/web/reference/js-reference#IdConfiguration
client_id: 'XXXXXXXX',
callback: this.handleCredentialResponse.bind(this), // Whatever function you want to trigger...
auto_select: true,
cancel_on_tap_outside: false
});
// OPTIONAL: In my case I want to redirect the user to an specific path.
// #ts-ignore
google.accounts.id.prompt((notification: PromptMomentNotification) => {
console.log('Google prompt event triggered...');
if (notification.getDismissedReason() === 'credential_returned') {
this.ngZone.run(() => {
this.router.navigate(['myapp/somewhere'], { replaceUrl: true });
console.log('Welcome back!');
});
}
});
};
Then, the handleCredentialResponse function is where you handle the actual response with the user's credential. In my case, I wanted to decode it first. Check this out to get more details on how the credential looks once it has been decoded: https://developers.google.com/identity/gsi/web/reference/js-reference#credential
handleCredentialResponse(response: CredentialResponse) {
// Decoding JWT token...
let decodedToken: any | null = null;
try {
decodedToken = JSON.parse(atob(response?.credential.split('.')[1]));
} catch (e) {
console.error('Error while trying to decode token', e);
}
console.log('decodedToken', decodedToken);
}
I too had the same problem in adding the function to the angular component.
Then i found a solution by adding JS function in appComponent like this:
(window as any).handleCredentialResponse = (response) => {
/* your code here for handling response.credential */
}
Hope this help!
set the div in template to be rendered in ngOnInit
`<div id="loginBtn" > </div>`
dynamically inject script tag in your login.ts as follows
constructor(private _renderer2: Renderer2, #Inject(DOCUMENT) private _document: Document){}
ngAfterViewInit() {
const script1 = this._renderer2.createElement('script');
script1.src = `https://accounts.google.com/gsi/client`;
script1.async = `true`;
script1.defer = `true`;
this._renderer2.appendChild(this._document.body, script1);
}
ngOnInit(): void {
// #ts-ignore
window.onGoogleLibraryLoad = () => {
// #ts-ignore
google.accounts.id.initialize({
client_id: '335422918527-fd2d9vpim8fpvbcgbv19aiv98hjmo7c5.apps.googleusercontent.com',
callback: this.googleResponse.bind(this),
auto_select: false,
cancel_on_tap_outside: true,
})
// #ts-ignore
google.accounts!.id.renderButton( document!.getElementById('loginBtn')!, { theme: 'outline', size: 'large', width: 200 } )
// #ts-ignore
google.accounts.id.prompt();
}
}
async googleResponse(response: google.CredentialResponse) {
// your logic goes here
}
Google One Tap js library tries to find callback in the global scope and can't find it, because your callback function is scoped somewhere inside of your app, so you can attach your callback to window, like window.callback = function(data) {...}.
Also, since you are attaching it to window, it's better to give the function a less generic name.
I want to override an action from cart module store. I am trying to extend this CartModule by following this link
Extending and Overriding Modules Doc
I have created a file /src/modules/cart/index.ts with following code
import { VueStorefrontModuleConfig, extendModule, VueStorefrontModule } from '#vue-storefront/core/lib/module'
import { CartModule } from '#vue-storefront/core/modules/cart'
import { cartModule } from './store'
const cartExtend: VueStorefrontModuleConfig = {
key: 'cart',
store: {modules: [{key: 'cart', module: cartModule}]},
afterRegistration: function () {
console.log('Cart module extended')
}
}
extendModule(cartExtend)
export const registerModules: VueStorefrontModule[] = [CartModule]
I am getting error that CarModule type does not match with VueStorefrontModule
Also I don't know what to do next in order to make it effective. Docs are not clear about it. Please help. Thanks
If you want to overwrite action of module you don't want to extend module but store.
Here is example:
Vuestorefront has CartModule (in core) and you need to change code of action refreshTotals.
Code your in file /src/modules/cart/index.ts:
import {StorefrontModule} from '#vue-storefront/core/lib/modules';
import {extendStore} from '#vue-storefront/core/helpers';
const cartModule = {
action: {
async refreshTotals({dispatch}, payload) {
//
// your new (and better!) code ;-)
//
}
},
}
export const MyAwesomeCart: StorefrontModule = function () {
extendStore('cart', cartModule);
}
In last step register this your new module under /src/modules/client.ts:
..
...
import {CartModule} from '#vue-storefront/core/modules/cart';
import {MyAwesomeCart} from "modules/cart/index";
export function registerClientModules() {
registerModule(CartModule); // original module
registerModule(MyAwesomeCart); // your new overwiritng module
...
..
I am only able to get this to work for issues at the application level, if an error is thrown from any package in the node_modules, it is not captured.
below is my GlobalErrorHandler, i have imported this into my app.js file at the top of my application so was expecting it to capture any exception in the application.
the expected behaviour would be for the this.test() exception to be thrown and from node_modules/AnotherUIDependency and captured by the globalErrorHandler
app.js
...
import { GlobalErrorHandler } from 'MASKED/globalErrorHandler'
...
globalErrorHandler.js
import { Alert } from 'react-native'
import { GlobalStrings } from 'MASKED'
import RNExitApp from 'react-native-exit-app'
import {
setJSExceptionHandler,
setNativeExceptionHandler
} from 'react-native-exception-handler'
errorHandler = (e, isFatal) => {
Alert.alert(
GlobalStrings.globalErrorHandler.title,
// eslint-disable-next-line no-undef
errorMessage(e, isFatal, __DEV__),
[
{
text: GlobalStrings.globalErrorHandler.exit,
onPress: () => {
RNExitApp.exitApp()
}
}
],
{ cancelable: false }
)
}
errorMessage = (e, isFatal, isDev) => {
let val = null
if (isDev) {
val =
GlobalStrings.globalErrorHandler.error +
`: ${isFatal ? GlobalStrings.globalErrorHandler.fatal : ''}` +
'\n\n' +
e.name +
':' +
e.message
} else {
if (!isFatal) {
val = GlobalStrings.globalErrorHandler.exceptionMessage
} else {
val = GlobalStrings.globalErrorHandler.nonFatal + ': ' + e
}
}
return val
}
setJSExceptionHandler(errorHandler, true)
setNativeExceptionHandler(errorString => {
Alert.alert(
GlobalStrings.globalErrorHandler.nativeExceptionMessage + ': ' + errorString
)
})
node_modules/AnotherUIDependency
...
export default class myComponent extends Component {
render(
return{
this.test() // expected globalErrorHandler capture
...
}
)
}
I think it may be my usage, however, i found that i had to import my globalErrorHandler at the top of the index file of each package in my project.
I found that even if i implemented it as the docs suggest, it was not truly global as it still would not capture node_module level exceptions. I would seem that the handler only picks up exceptions where it can follow the imports to the file where the exception occurs.
In my case, we have some weird referencing going on which i think is preventiung this. I have the same issue even if i use the React-Native ErrorUtils global
You're wrong about how to get the module in.
Usage
To catch JS_Exceptions
import {setJSExceptionHandler, getJSExceptionHandler} from 'react-native-exception-handler';
.
.
// For most use cases:
// registering the error handler (maybe u can do this in the index.android.js or index.ios.js)
setJSExceptionHandler((error, isFatal) => {
// This is your custom global error handler
// You do stuff like show an error dialog
// or hit google analytics to track crashes
// or hit a custom api to inform the dev team.
});
//=================================================
// ADVANCED use case:
const exceptionhandler = (error, isFatal) => {
// your error handler function
};
setJSExceptionHandler(exceptionhandler, allowInDevMode);
// - exceptionhandler is the exception handler function
// - allowInDevMode is an optional parameter is a boolean.
// If set to true the handler to be called in place of RED screen
// in development mode also.
// getJSExceptionHandler gives the currently set JS exception handler
const currentHandler = getJSExceptionHandler();
To catch Native_Exceptions
import { setNativeExceptionHandler } from "react-native-exception-handler";
//For most use cases:
setNativeExceptionHandler(exceptionString => {
// This is your custom global error handler
// You do stuff likehit google analytics to track crashes.
// or hit a custom api to inform the dev team.
//NOTE: alert or showing any UI change via JS
//WILL NOT WORK in case of NATIVE ERRORS.
});
//====================================================
// ADVANCED use case:
const exceptionhandler = exceptionString => {
// your exception handler code here
};
setNativeExceptionHandler(
exceptionhandler,
forceAppQuit,
executeDefaultHandler
);
// - exceptionhandler is the exception handler function
// - forceAppQuit is an optional ANDROID specific parameter that defines
// if the app should be force quit on error. default value is true.
// To see usecase check the common issues section.
// - executeDefaultHandler is an optional boolean (both IOS, ANDROID)
// It executes previous exception handlers if set by some other module.
// It will come handy when you use any other crash analytics module along with this one
// Default value is set to false. Set to true if you are using other analytics modules.
I have a page pages/login.js looks like:
function fillAndSubmitLogin(email, password) {
return this
.waitForElementVisible('#emailInput')
.setValue('#emailInput', email)
.setValue('#passwordInput', password)
.waitForElementVisible('#loginSubmitButton')
.click('#loginSubmitButton');
}
export default {
commands: [
fillAndSubmitLogin
],
elements: {
emailInput: 'input#email',
passwordInput: 'input[type=password]',
TFAInput: 'input#token',
loginSubmitButton: '.form-actions button.btn.btn-danger'
}
};
I have another page pages/hompage.js homepage.js attempts to include pages/login.js as a section
import login from "./login.js";
module.exports = {
url: 'http://localhost:2001',
sections: {
login: {
selector: 'div.login-wrapper',
...login
}
}
};
I then have a test case that attempts to login on the hompage section
'Homepage Users can login': (client) => {
const homepage = client.page.homepage();
homepage
.navigate()
.expect.section('#login').to.be.visible;
const login = homepage.section.login;
login
.fillAndSubmitLogin('user#test.com', 'password');
client.end();
}
This test then fails with the following error
TypeError: login.fillAndSubmitLogin is not a function
at Object.Homepage Users can login (/Users/kevzettler//frontend/test/nightwatch/specs/homepage.spec.js:32:6)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:182:7)
login.fillAndSubmitLogin is not a function
at Object.Homepage Users can login (/Users/kevzettler//frontend/test/nightwatch/specs/homepage.spec.js:32:6)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:182:7)
According to the Nightwatch docs, any commands that are exported in page objects should be plain JavaScript objects with a key being a command name and the value being a function. For example:
var googleCommands = {
submit: function() {
this.api.pause(1000);
return this.waitForElementVisible('#submitButton', 1000)
.click('#submitButton')
.waitForElementNotPresent('#submitButton');
}
};
module.exports = {
commands: [googleCommands],
elements: //...etc ...
// etc...
}
In this example, the module exports googleCommands, which is a command object which has a key (submit) and a corresponding function. I believe you should refactor your code as follows:
function fillAndSubmitLogin = {
fillAndSubmitLogin: function(email, password) {
return this
.waitForElementVisible('#emailInput')
.setValue('#emailInput', email)
.setValue('#passwordInput', password)
.waitForElementVisible('#loginSubmitButton')
.click('#loginSubmitButton');
}
};
Of course, you don't have to make the command name the same in both places (as the example shows (googleCommands/submit). This allows you to expose a variety of functions in one command. Hope that answers the question!