I attempt to get a websocket in a Next.js app.
I'm getting an Error and I'm not sure if it is a Bug in RxJS or if there's something wrong in my setup.
The Error Message:
ReferenceError: WebSocket is not defined
at new WebSocketSubject (/myApp/node_modules/rxjs/dist/cjs/internal/observable/dom/WebSocketSubject.js:63:42)
at Object.webSocket (/myApp/node_modules/rxjs/dist/cjs/internal/observable/dom/webSocket.js:6:12)
at eval (webpack-internal:///./pages/_app.tsx:19:61)
at ./pages/_app.tsx (/myApp/.next/server/pages/_app.js:22:1)
at __webpack_require__ (/myApp/.next/server/webpack-runtime.js:33:42)
at __webpack_exec__ (/myApp/.next/server/pages/_app.js:64:39)
at /myApp/.next/server/pages/_app.js:65:28
at Object.<anonymous> (/myApp/.next/server/pages/_app.js:68:3)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
The code at WebSocketSubject.js:63
if (!config.WebSocketCtor && WebSocket) {
config.WebSocketCtor = WebSocket;
}
I wasn't able to find these two variables defined anywhere - not sure if that's the matter, or if these arrive in a fancy JS way.
When changing WebSocket to webSocket it doesn't help either (that was an assumption as I was able to see a difference in my code below.
// nextauth
import './styles.css';
import * as rxws from 'rxjs/webSocket';
console.log('websocket as own import', rxws);
//websocket as own import { webSocket: [Getter], WebSocketSubject: [Getter] }
console.log('websocket lowercase', rxws.webSocket);
//websocket lowercase [Function: webSocket]
console.log('websocket uppercase', rxws.WebSocket);
//websocket uppercase undefined
const socket$ = rxws.webSocket(
"ws://ws.ifelse.io"
);
function App({ Component, pageProps }: AppProps): JSX.Element {
return (
<div>
Hello
</div>
);
}
export default App;
parts of package.json
"next": "^11.0.0",
"redux-observable": "^2.0.0",
"rxjs": "^7.5.5",
"ws": "^8.7.0"
What's your 2ct on that?
Related
I want to use vue-device-detector in my project. in this plugin docs it says to register with Vue.use(device) so how am i supposed to do this with inertiajs createInertiaApp.
App Versions:
Laravel: 9.44.0
Vue: 3.2.31
inertiajs/inertia: 0.11.0
inertiajs/inertia-vue3: 0.6.0
I have tried .use(device) on createApp in app.js. getting this error in console
main.ts:87 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting '$device').
Project is created with laravel jetstream starter kit.
EDIT 1:
Here is my app.js code. i am don't know how i can register plugin here. (Because inertia mount the app here so i suppose global plugin also needs to be registered here!!)
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
PS: Thank you for reading my question, and please excuse any errors
Good talk yesterday at the Firebase Summit about emulators! I was able to get the Functions emulator to work with AngularFire 6. I can't get the Firestore emulator or the Functions emulator to work with AngularFire 7. Here's my app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { initializeApp,provideFirebaseApp } from '#angular/fire/app';
import { environment } from '../environments/environment';
import { provideFirestore,getFirestore } from '#angular/fire/firestore';
import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '#angular/fire/compat/functions';
import { USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '#angular/fire/compat/functions';
import { FormsModule } from '#angular/forms';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore()),
],
providers: [
{ provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 8080] : undefined },
{ provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ? ['localhost', 5001] : undefined }
],
bootstrap: [AppComponent]
})
export class AppModule { }
There's a smell here. I'm initializing Firebase using AngularFire 7 but I'm importing the emulator from AngularFire 6.1.0. Firebase can be initialized with AngularFire 6 or AngularFire 7 but not both, i.e., you can't mix AngularFire 6 and 7.
How do I import the emulators without using AngularFire 6?
In environments.ts I made a property useEmulators:
export const environment = {
firebase: {
projectId: 'my-awesome-project',
appId: '1:234567890:web',
storageBucket: 'my-awesome-project.appspot.com',
apiKey: 'ABCdef',
authDomain: 'my-awesome-project.firebaseapp.com',
messagingSenderId: '0987654321',
},
production: false,
useEmulators: true
};
My Cloud Function runs great in the cloud but doesn't run in the emulators.
Each time I make a change in a Cloud Function, deploy the update to the cloud, wait a minute for the deploy to propagate, test my function, and wait for the logs to show up in the Firebase Console is ten minutes. I'm looking forward to using the emulators to speed up this development cycle.
Here's the rest of my code. I doubt there's anything wrong with these files.
The Cloud Function triggers from writing a message to Firestore, changes the message to uppercase, and writes the uppercase message to a new field in the document.
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
exports.uppercaseMe = functions.firestore.document('Triggers/{docId}').onCreate((snap, context) => {
var original = snap.data().message;
functions.logger.log('Uppercasing', context.params.docId, original);
var uppercase = original.toUpperCase();
return snap.ref.set({ uppercase }, { merge: true });
});
The HTML view has a form for submitting a message. It displays the data that was written to Firestore and then displays the results from the Cloud Function.
<form (ngSubmit)="triggerMe()">
<input type="text" [(ngModel)]="message" name="message" placeholder="Message" required>
<button type="submit" value="Submit">Submit</button>
</form>
<div>{{ data$ }}</div>
<div>{{ upperca$e }}</div>
The app.component.ts controller writes the message to Firestore, reads back the message from Firestore, then sets up a document listener to wait for the cloud function to write a new field to the document.
import { Component } from '#angular/core';
import { Firestore, doc, getDoc, collection, addDoc, onSnapshot } from '#angular/fire/firestore';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
data$: any;
docSnap: any;
message: string | null = null;
upperca$e: string | null = null;
unsubMessage$: any;
constructor(public firestore: Firestore) {}
async triggerMe() {
try {
// write to Firestore
const docRef = await addDoc(collection(this.firestore, 'Triggers'), {
message: this.message,
});
this.message = null; // clear form fields
// read from Firestore
this.docSnap = await getDoc(doc(this.firestore, 'Triggers', docRef.id));
this.data$ = this.docSnap.data().message;
// document listener
this.unsubMessage$ = onSnapshot(doc(this.firestore, 'Triggers', docRef.id), (snapshot: any) => {
this.upperca$e = snapshot.data().uppercase;
});
} catch (error) {
console.error(error);
}
}
}
Firebase emulators work independently of Angular or other apps! I reread the documentation and learned that you just spin up the emulators,
firebase emulators:start
open your browser to http://localhost:4000, and you can write data in Firestore and then see the results of your function appear in Firestore. You can also read the logs. This only works with triggerable functions, not with callable functions.
Amazing what you can learn by reading the documentation. :-)
I'm creating a Laravel/Vue3 app and wanted to completely separate the Laravel router from the SPA router.
In order to achieve this I created a dashboard.blade.php file which contains the following content:
<x-app-layout>
<div id="app"></div>
</x-app-layout>
Vue then simply mounts on top of that div and the app is started.
My webpack.mix.js:
const mix = require("laravel-mix");
mix.ts("resources/js/app.ts", "public/js")
.vue({ version: 3 })
.postCss("resources/css/app.css", "public/css", [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
]);
The app.ts file is also quite simple:
import { createApp } from 'vue';
import App from './App';
createApp(App).mount('#app');
Which is great, but my holdup is that for subsequent requests (via Axios), I will need the user token. How can I get this token/logged in user info to my Vue3 app?
I'm using Laravel Breeze for authentication (if that helps).
Thank you,
It turns out the answer was 'extremely' simple. I had to do nothing besides removing the comment tags on this line:
And add headers as follows in your axios config:
import axios from "axios";
import store from "../store";
const Axios = axios.create({
baseURL: process.env.APP_URL,
headers: { Accept: "application/json" },
});
Axios.interceptors.request.use(
(config) => {
store.commit("setLoader", true);
return config;
},
(error) => Promise.reject(error)
);
Axios.interceptors.response.use(
(response) => {
store.commit("setLoader", false);
return response;
},
(error) => Promise.reject(error)
);
export default Axios;
Subsequent axios calls have the token attached automatically.
You can find all the required information here. Love Laravel...
I am working on a projet where it uses Laravel , ziggy ,inertia and vue.
i can not use ziggy in vue as suggested by thier doc.
here is my complete app.js
NB i can see the expected Ziggy.js file in /js/ziggy.js
//___________app.js________________
require('./bootstrap')
import Vue from 'vue'
import VueMeta from 'vue-meta'
import PortalVue from 'portal-vue'
import { App, plugin } from '#inertiajs/inertia-vue'
import { InertiaProgress } from '#inertiajs/progress/src'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { mixins } from 'vue-chartjs'
import route from 'ziggy';// the vue app is not mounted at all if i import the route from 'ziggy' and there is no error in console.;
import { Ziggy } from './ziggy';
Vue.mixin({
methods: {
route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
},
});
//Vue.config.productionTip = false
//Vue.mixin({ methods: { route: window.route } })
Vue.use(plugin)
Vue.use(PortalVue)
Vue.use(VueMeta)
InertiaProgress.init()
let app = document.getElementById('app')
new Vue({
metaInfo: {
titleTemplate: (title) => title ? `${title} - SSSYT` : 'your partner'
},
render: h => h(App, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name =>
import (`./Pages/${name}`).then(module => module.default),
},
}),
}).$mount(app)
and here is the error i get in colnsole
Uncaught TypeError: Cannot read property 'prototype' of undefined
at Object.inherits (app.js:124712)
at Object.<anonymous> (app.js:68991)
at Object../node_modules/irc/lib/irc.js (app.js:69342)
at __webpack_require__ (app.js:64)
at Object../node_modules/ziggy/index.js (app.js:140181)
at __webpack_require__ (app.js:64)
at Module../resources/js/app.js (app.js:141504)
at __webpack_require__ (app.js:64)
at Object.0 (app.js:142081)
at __webpack_require__ (app.js:64)
```
For import route from 'ziggy'; to work, you need to alias 'ziggy' to the correct location in your Mix file.
Add this to your webpack.mix.js:
const path = require('path');
// Mix v6
mix.alias({
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
});
// Or, for Mix v5
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
},
},
});
See the section about this in the Ziggy docs for more details.
I cannot seem to get vue-resource to work with vueify. I have defined one vue component which i am including in my main.js file.
import Vue from 'vue'
import MyComponent from './my-component.vue'
new Vue({
el: '#app',
components: {
myComponent: MyComponent
}
});
My vue component file looks like this:
<script>
import Vue from 'vue';
// import VueResource from 'vue-resource'
// Vue.use(VueResource);
export default {
template: '#my-component-template',
created: () => {
Vue.$http.get('/my/api/123',
data => {
console.log(data)
}, err => {
console.log("Error");
console.error(err);
}
);
}
}
</script>
In the current state, I receive this error:
Uncaught TypeError: Cannot read property 'get' of undefined
If I comment out the two lines concerning vue-resource in my component file, the error I receive turns like this:
Uncaught TypeError: Cannot redefine property: $url
package.json:
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.6",
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"laravel-elixir-vueify": "^1.0.3",
"vue": "^1.0.25",
"vue-resource": "^0.8.0"
}
}
Gulpfile:
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
elixir(function(mix) {
mix.browserify('main.js');
});
All existing answers on SO have not brought any results. Please help.
You should replace the $http with http:
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
export default {
created: () => {
Vue.http.get(...)
}
}
Also, it's a good practice to install the VueResource into the main file and then, we could use the this keyword as #Jeff said.
To achieve that, you should change the arrow function, because this refers to the global object:
// refers to the global object
created: () => {}
// refers to the Vue component
created () {
this.$http.get(...)
}
have you tried adding var VueResource = require('vue-resource'); in your root vue instance? also add Vue.use(VueResource).
Once you add the plugin in main.js using Vue.use(VueResource), it adds the $http attribute to all Vue instances. You don't need to re-do it in your component file. Then you just use this.$http:
created: () => {
this.$http.get('/my/api/123',
//...
);
}