i did : npm install #nuxtjs/onesignal
modules: [
'#nuxtjs/axios',
'#nuxtjs/onesignal',
'#nuxtjs/pwa',
],
oneSignal: {
init: {
appId: '19023887-4044-4db8-90ec-9c5ff515xxx',
allowLocalhostAsSecureOrigin: true,
welcomeNotification: {
disable: false
}
}
},
issue 1:
it keeps reloading my page ....
issue 2:
no notification is coming..
issue 3: _this.$OneSignal.isPushNotificationsEnabled is not a function
Related
I created my first vue3, ts, vuetify project, using vite (4.1.1).
vite => server is fine, no error, no warning
vite build => no error, no warning, files are generated as expected in dist and work as expected.
But but, when I run build in console, it is stuck after generation, the process never ends. And without the process ending, I cannot deploy the solution :$.
Any idea of what could prevent it from finishing ?
tsconfig.json
{
"$schema": "https://json.schemastore.org/tsconfig.json",
"files": [],
"compilerOptions": {
"newLine": "lf"
},
"references": [
{ "path": "./tsconfig.config.json" },
{ "path": "./tsconfig.app.json" }
]
}
tsconfig.app.json
{
"$schema": "https://json.schemastore.org/tsconfig.json",
"extends": "#vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"#/*": ["./src/*"]
},
"lib": ["ESNext", "DOM", "DOM.Iterable"],
"types": ["vuetify"]
}
}
tsconfig.app.json
{
"$schema": "https://json.schemastore.org/tsconfig.json",
"extends": "#vue/tsconfig/tsconfig.node.json",
"include": [
"vite.config.*"
],
"compilerOptions": {
"composite": true,
"types": ["node"]
}
}
vite.config.ts
import { defineConfig, type UserConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';
import { checker } from 'vite-plugin-checker';
import vue from '#vitejs/plugin-vue';
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
import { fileURLToPath, URL } from 'node:url';
import fs from 'node:fs';
/**
* Vite Configure
*
* #see {#link https://vitejs.dev/config/}
*/
export default defineConfig(async ({ command, mode }): Promise<UserConfig> => {
const config: UserConfig = {
// https://vitejs.dev/config/shared-options.html#base
base: './',
// https://vitejs.dev/config/shared-options.html#define
define: { 'process.env': {} },
plugins: [
// Vue3
vue({
template: {
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin#image-loading
transformAssetUrls,
},
}),
// Vuetify Loader
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin#vite-plugin-vuetify
vuetify({
autoImport: true,
styles: { configFile: 'src/styles/settings.scss' },
}),
// vite-plugin-checker
// https://github.com/fi3ework/vite-plugin-checker
checker({
typescript: true,
vueTsc: true,
eslint: {
lintCommand:
'eslint . --fix --cache --cache-location ./node_modules/.vite/vite-plugin-eslint', // for example, lint .ts & .tsx
},
}),
],
// https://vitejs.dev/config/server-options.html
server: {
fs: {
// Allow serving files from one level up to the project root
allow: ['..'],
},
},
// Resolver
resolve: {
// https://vitejs.dev/config/shared-options.html#resolve-alias
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url)),
'~': fileURLToPath(new URL('./node_modules', import.meta.url)),
},
extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
},
// Build Options
// https://vitejs.dev/config/build-options.html
build: {
// Build Target
// https://vitejs.dev/config/build-options.html#build-target
target: 'esnext',
// Minify option
// https://vitejs.dev/config/build-options.html#build-minify
minify: 'esbuild',
// Rollup Options
// https://vitejs.dev/config/build-options.html#build-rollupoptions
rollupOptions: {
// #ts-ignore
output: {
manualChunks: {
// Split external library from transpiled code.
vue: ['vue', 'pinia'],
vuetify: [
'vuetify',
'vuetify/components',
'vuetify/directives'
],
materialdesignicons: ['#mdi/font/css/materialdesignicons.css'],
},
plugins: [
mode === 'analyze'
? // rollup-plugin-visualizer
// https://github.com/btd/rollup-plugin-visualizer
visualizer({
open: true,
filename: 'dist/stats.html',
})
: undefined,
],
},
},
},
esbuild: {
// Drop console when production build.
drop: command === 'serve' ? [] : ['console'],
},
};
// Write meta data.
fs.writeFileSync(
fileURLToPath(new URL('./src/Meta.ts', import.meta.url)),
`import type MetaInterface from '#/interfaces/MetaInterface';
// This file is auto-generated by the build system.
const meta: MetaInterface = {
version: '${require('./package.json').version}',
date: '${new Date().toISOString()}',
};
export default meta;
`
);
return config;
});
vite build --mode analyze : does build and opens the stat html so means the build is actually finished ? But still, it is stuck in console.
I checked circular dependencies.
I have working grunt watch and grunt-alert to post push messages via Slack. Can I combine the to push notifications of errors and warnings?
watch: {
styles: {
files: ['less/**/*.less'],
tasks: ['less'],
options: {
livereload: true,
},
}
},
alert: {
slack: {
type: 'slack',
webhookUrl: 'HOOCK_HERE',
channel: '#somechanel', //optional
username: 'some user', //optional
iconUrl: '', //optional
iconEmoji: ':ghost:', //optional
message: 'Ya\'ll suck. The build just failed with this error: %s',
log: 'somefile.log' //optional
}
}
I'm making a website by using next.js.
After deploying my project by Vercel, login api gives me 502 error.
const nextConfig = {
reactStrictMode: true,
images: {
domains: [process.env.ORIGINAL_DATA, process.env.CONVERT_DATA]
},
swcMinify: true,
env: {
ORIGINAL_DATA : `https://${process.env.ORIGINAL_DATA}`,
CONVERT_DATA : `https://${process.env.CONVERT_DATA}`,
},
async rewrites() {
return [
{
source: "/api/:path*",
destination: `http://${process.env.API}api/:path*`,
},
{
source: "/video/:filename*",
destination: `https://${process.env.CONVERT_DATA}:filename*`,
}
]
},
}
My config codes are here.
In development mode, it does work.
Does anyone know why this is happening??
is there something wrong in rewrites fnc??
I double checked env variables...
I've cleaned cache and cookies...
I'm trying to build a Nuxt SSR application using #nuxtjs/firebase and #nuxtjs/pwa
My authentication works as expected when online but when when the user is offline I get this error in console
asyncToGenerator.js:8 Uncaught (in promise) t {code: "auth/network-request-failed", message: "A network error (such as timeout, interrupted connection or unreachable host) has occurred.", a: null}
Here's the screenshot of the error message:
This error freezes my app (my navigation hamburger menu doesn't respond)
PWA config in nuxt.config.js:
pwa: {
manifest: {
lang: 'en',
background_color: '#000000',
},
meta: {
nativeUI: true,
appleStatusBarStyle: 'black',
theme_color: '#000000',
},
config: {
enabled: true
},
workbox: {
importScripts: [
'/firebase-auth-sw.js'
],
dev: process.env.NODE_ENV === 'development',
}
}
Here is my Firebase config in nuxt.config.js
firebase: {
config: {
apiKey: process.env.apiKey,
authDomain: process.env.authDomain,
databaseURL: process.env.databaseURL,
projectId: process.env.projectId,
storageBucket: process.env.storageBucket,
messagingSenderId: process.env.messagingSenderId,
appId: process.env.appId,
measurementId: process.env.measurementId
},
services: {
auth: {
ssr: true,
initialize: {
// use authData from action in custom mutation
// onAuthStateChangedMutation: 'ON_AUTH_STATE_CHANGED_MUTATION',
onAuthStateChangedAction: 'onAuthStateChangedAction'
}
}
}
}
My onAuthStateChangedAction in store/index.js:
async onAuthStateChangedAction({ dispatch, commit }, { authUser }) {
if(!authUser) return commit(MUTATION_TYPE.REMOVE_USER)
// if user is already authenticated
// get authenticated user profile from firestore
dispatch('getUser', authUser)
if(process.browser) commit(MUTATION_TYPE.SET_TOKEN, localStorage.token)
}
Has anyone gotten SystemJS and SignalR to work together?
I have been trying to use SystemJS (from jspm) to load SignalR, but no matter what I do, there is always a race condition with the async loader. About half the times that it loads, SignalR is not loaded by the time my initialization code runs.
System.config({
baseURL: '/Scripts',
map: {
'jquery': '/bundles/jquery',
'jquery.ui.widget': 'jquery-ui-1.10.4.js',
},
meta: {
'/signalr/hubs': {
deps: ['jquery.signalR-2.2.0.min.js']
}
}
});
Promise.all([
System.import('jQuery.FileUpload/jquery.fileupload.js'),
System.import('knockout-3.1.0.debug.js'),
System.import('/signalr/hubs')
])
.then(function (libs, gg) {
var ko = libs[1];
//My init code
var chat = $.connection.jobProgress;
// Throws '$.connection is undefined' about half the time
})
Try this using signalr package config.
System.config({
baseURL: 'Scripts',
map: {
"signalr-jquery": "Scripts/jquery.signalR-2.2.0",
"signalr": "signalr",
"jquery": "/bundles/jquery" //I would pull it from jspm also
},
meta: {
"jquery": {
"format": "cjs"
},
"signalr-jquery": {
"format": "global",
"deps": ["jquery"]
}
},
packages: {
"signalr": {
"format": "global",
"defaultExtension": false,
"meta": {
"hubs": {
"format": "global",
"deps": ["signalr-jquery"]
}
}
}
}
})
and import hubs
System.import('signalr/hubs').then(function(hubs) {
})
I was able to load it with this configuration:
System.config({
map: {
'jquery': 'node_modules/jquery/dist/jquery.js',
'signalrJquery': 'jquery.signalR-2.2.0.js',
'signalrHubs': 'jquery.signalR-2.2.0.Hubs.js'
},
meta: {
"jquery-1.10.2.js": { exports: "$" },
signalrJquery: {exports: "$"},
signalrHubs: {
deps: ['jquery-1.10.2.js', 'signalrJquery'],
exports: "$"
}
});
Then fetch it like this:
import * as $ from 'signalrHubs';
or
var $ = require('signalrHubs');
Notice that the jquery version in the dependencies is the version that signalr depends on. The rest of the website can use a newer version if desired.