TypeError: Cannot read property 'https' of undefined

See also questions close to this topic

• Nuxt typescript building and transpile project for deployment

  I have a Vue application built with the NuxtJS framework using the yarn create nuxt-app utility.

  The application is meant to be for Server-Side-Rendering meaning it has to run on an actual server instance.

  I am using Nuxt-ts to be able to use typescript with Nuxt, my nuxt.config.js looks like this:

  export default {
    ssr: true,
    srcDir: 'src/',
    buildModules: [
      // https://go.nuxtjs.dev/typescript
      '@nuxt/typescript-build',
      // https://go.nuxtjs.dev/stylelint
      '@nuxtjs/stylelint-module',
    ],
  
    server: {
      port: envsConfig.env.ENV_CP_HTTP_PORT || 2055,
    }
  }
  

  When building using nuxt-ts build, I get a folder .nuxt with the results of the build phase,

  My scripts are:

  "scripts": {
      "dev": "nuxt-ts",
      "build": "nuxt-ts build",
      "start": "nuxt-ts start"
  }
  

  The question now, how can I deploy this on a server and run it using node?

  Cuz running node .nuxt/dist/server/server.js doesn't seem to work, and I got confused.

  Also, nuxt-ts seems to transpile in runtime, where I want my application to be built+transpiled then copy the results and run them using node,

  Any help would be awesome! Thanks
• What is the way to declare mdbreact's type while installing?

  I am new to typescript react and I am trying to use mdbreact to create my navbar, those are my importations:

  import React, { Component } from "react";
  import {
    MDBNavbar,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavItem,
    MDBNavLink,
    MDBNavbarToggler,
    MDBCollapse,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem,
    MDBIcon,
  } from "mdbreact";
  

  But I am getting this error:

  TypeScript error in C:/projects/breaking-news/news-project/src/App.tsx(15,8):
  Cannot find module 'mdbreact' or its corresponding type declarations.  TS2307
  
      13 |   MDBDropdownItem,
      14 |   MDBIcon,
    > 15 | } from "mdbreact";
         |        ^
      16 | import { BrowserRouter as Router } from "react-router-dom";
      17 |
      18 | class NavbarPage extends Component {
  

  and I believe it is something about declaring mdbreact's type while installing but I don't know how and I googled it but nothing helped.
• Promise not resolved even when the request is done

  I have a function that returns a promise from an HTTP Request:

  getToken(id: string): Promise<string> {
      return this.service
        .getToken(id)
        .pipe(
          take(1)
          //catchError(() => of(null))
        )
        .toPromise();
  }
  

  And I want to know if the call failed (I won't have any token in this case), but the promise doesn't seem to complete because the IF statement is never reached if an error has occurred (BadRequest, Forbidden, etc.)

  ...
  const token = await this.getToken(id);
  
  if (!token) {
     console.log('no token');
  }
  ...
  

  But if I'm using catchError(() => of(null)), the promise completes even if the call failed and I can't understand the behavior.
• How to prevent my user to become disconnect on screen change?

  i will explain my problem quickly. I got a login screen that's working well. After be logged in, the user is redirected to the homepage. The homepage display the user email.

  I'm getting my user with this line : final firebaseUser = context.watch();

  But when i redirect the screen to another screen after the homepage. final firebaseUser = context.watch(); become null

  Here is my homepage:

  import 'package:firebase_auth/firebase_auth.dart';
  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  
  import '../utils/authentication.dart';
  import './authentication/login.dart';
  import 'account/AccountSettings.dart';
  
  class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => _HomePageState();
  }
  
  class _HomePageState extends State<HomePage> {
    @override
    Widget build(BuildContext context) {
      final firebaseUser = context.watch<User>();
  
      return Scaffold(
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Homepage',
                  style: TextStyle(fontSize: 25),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 5),
                  child: Text(
                    'Connecté en tant que ${firebaseUser.email}',
                    style: TextStyle(fontSize: 16, color: Colors.grey[700]),
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    context.read<Authentication>().signOut();
                    Navigator.pushReplacement(
                        context,
                        MaterialPageRoute(
                            builder: (context) => AccountSettings()));
                  },
                  child: Text('Paramètre du compte'),
                ),
                ElevatedButton(
                  onPressed: () {
                    context.read<Authentication>().signOut();
                    Navigator.pushReplacement(context,
                        MaterialPageRoute(builder: (context) => Login()));
                  },
                  child: Text('Déconnexion'),
                ),
              ],
            ),
          ),
        ),
      );
    }
  }
  
  

  My account settings (that doesn't take the user)

  import 'package:firebase_auth/firebase_auth.dart';
  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  
  class AccountSettings extends StatefulWidget {
    @override
    _AccountSettingsState createState() => _AccountSettingsState();
  }
  
  class _AccountSettingsState extends State<AccountSettings> {
    @override
    Widget build(BuildContext context) {
      final firebaseUser = context.watch<User>();
      final emailController = TextEditingController(text: firebaseUser.email);
  
      return Scaffold(
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              children: <Widget>[
                Text(
                  'Paramètre du compte',
                  style: TextStyle(fontSize: 25),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: TextField(
                    keyboardType: TextInputType.emailAddress,
                    decoration: InputDecoration(labelText: 'Adresse email'),
                    controller: emailController,
                  ),
                )
              ],
            ),
          ),
        ),
      );
    }
  }
  
  
• How to know if the firebase and Admob link is operational?

  I have linked my AdMob application to a Firebase project to take advantage of the benefits of this combination. But my old code (which worked when I only had AdMob) didn't work anymore, I had a lot of syntax errors ... I saw on the Firebase website that I had to include the 'Google-Mobile-Ads-SDK' pod. But in the tutorial videos it was the 'Firebase/AdMob' pod. But by including the 'Google-Mobile-Ads-SDK' directly, everything worked as before. So I wanted to know if the link between AdMob and Firebase Analytics was still operational or if I had just implemented AdMob as before when I wasn't using Firebase. Hence my question: how to check that the link is done?

  Thank you for your attention

  PS : I still include the 'Firebase' pod, I just remplace the 'Firebase/AdMob' by the 'Google-Mobile-Ads-SDK'. I would also like to understand what the 'Firebase/AdMob' pod is for if we can include 'Google-Mobile-Ads-SDK' directly and have the link made.
• Thread 1: Fatal error: No ObservableObject of type SessionStore found

  I receive the following error message: Thread 1: Fatal error: No ObservableObject of type SessionStore found. A View.environmentObject(_:) for SessionStore may be missing as an ancestor of this view.

  Fatal error: No ObservableObject of type SessionStore found. A View.environmentObject(_:) for SessionStore may be missing as an ancestor of this view.: file SwiftUI, line 0

  But I already have added the enviromentObject(SessionStore()) to the preview. So I don't get why is this happening.

  Here is my ContentView file:

      import SwiftUI
  import Firebase
  import LinkKit
  
  struct ContentView: View {
      
      func getUser() {
          session.listen()
      }
      @State private var showingSheet = true
      
      @EnvironmentObject var session: SessionStore
      @StateObject private var manager = FirebaseManager()
      
      
      var body: some View {
          Group {
              if (session.session != nil && manager.profilePicExists == true) {
                  HostingTabView()
              } else if (session.session != nil && manager.profilePicExists == false){
                  HostingTabView().sheet(isPresented: $showingSheet) {
                      RegistrationProfileDataView()
                  }
              } else {
                  AuthView()
             }
          }.onAppear(perform: getUser)
          .onAppear(perform: manager.checkForProfileImage)
      }
  }
  
  struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
          ContentView().environmentObject(SessionStore())
      }
  }
  

  Here is the SessionStore file file:

  import SwiftUI
  import Firebase
  import Combine
  
  class SessionStore: ObservableObject {
       var didChange =  PassthroughSubject<SessionStore, Never>()
      @Published var session: User? {didSet {self.didChange.send(self) }}
      var handle: AuthStateDidChangeListenerHandle?
      
      func listen() {
          handle = Auth.auth().addStateDidChangeListener({ (auth, user) in
              if let user = user {
                  self.session = User(uid: user.uid, email: user.email)
              } else {
                  self.session = nil
              }
          })
      }
      
      func signUp(email: String, password: String, handler: @escaping AuthDataResultCallback) {
          Auth.auth().createUser(withEmail: email, password: password, completion: handler)
      }
      
      func signIn(email: String, password: String, handler: @escaping AuthDataResultCallback) {
          Auth.auth().signIn(withEmail: email, password: password, completion: handler)
      }
      
      func signOut() {
          do {
              try Auth.auth().signOut()
              self.session = nil
          } catch {
              print("Error signing out")
          }
      }
      
      func unbind() {
          if let handle = handle {
              Auth.auth().removeStateDidChangeListener(handle)
          }
      }
      
      deinit {
          unbind()
      }
      
  }
  
  struct User {
      var uid: String
      var email: String?
      
      init(uid: String, email: String?) {
          self.uid = uid
          self.email = email
      }
  }
  
• How to give a dynamically rendered element it's own data value & target it in it's parent component?

  I have a BaseMenuItem component that has normal button elements as well as special news elements. I have added a ticker effect to the news type els and want to stop the ticker on that element when it's clicked. Currently the click event stops the ticker effect on the whole group.

  How can I target a single element from that group?

  There are two methods, openNews one showing the specific news article that the element is linked to. And clearItemType that clears the itemType upon recieving the emitted event from the BaseMenuItem component.

  I'm just not sure which element to target to change it's itemType. Does Vuejs have a way to make an unique data value for dynamically generated elements?

  If you need anymore information please let me know!

  Cheers!

  BaseMenuItem

  <template>
   <q-btn align="left" dense flat class="main-menu-item" v-on="$listeners">
      <div class="flex no-wrap items-center full-width">
        <iconz v-if="iconz" :name="iconz" type="pop" color="black" class="mr-md" />
        <q-icon v-if="menuIcon" :name="menuIcon" class="text-black mr-md" />
        <div @click="$emit('stop-ticker')" v-if="itemType === 'news'" class="ellipsis _ticker">
          <div class="ellipsis _ticker-item">{{ title }}</div>
        </div>
        <div v-else>
          <div class="ellipsis">{{ title }}</div>
        </div>
        <slot>
          <div class="ml-auto"></div>
          <div class="_subtitle mr-md" v-if="subtitle">{{ subtitle }}</div>
          <q-icon name="keyboard_arrow_right" class="_right-side" />
          <ComingSoon v-if="comingSoonShow" />
        </slot>
      </div>
    </q-btn>
  </template>
  
  
  <style lang="sass" scoped>
  // $
  .main-menu-item
    display: block
    font-size: 15px
    position: relative
    width: 100%
    border-bottom: 1px solid #F5F5F5
    +py(10px)
    ._left-side
      color: #000000
    ._subtitle
      margin-left: auto
      opacity: 0.7
  
  ._ticker
    position: absolute
    font-weight: bold
    margin-left: 2em
    width: 82%
    &-item
      display: inline-block
      padding-left: 100%
      animation: ticker 8s linear infinite
  
  @keyframes ticker
    to
      transform: translateX(-100%)
  </style>
  
  <script>
  import { iconz } from 'vue-iconz'
  
  export default {
    name: 'MainMenuItem',
    components: { iconz },
    props: {
      comingSoonShow: { type: Boolean, default: false },
      title: { type: String, default: 'menu' },
      subtitle: { type: String, default: '' },
      menuIcon: { type: String, default: '' },
      iconz: { type: String, default: '' },
      itemType: { type: String, default: '' },
    }
  }
  </script>
  

  MainMenuPage

  <template>
    <div class="eachMenuGroup" v-if="newsList.length">
            <MainMenuItem
              v-for="news in newsList"
              :key="news.id"
              @click="openNews(news)"
              :title="news.title"
              :itemType="itemType"
              :class="{ readLink: readNewsList[news.id] }"
              menuIcon="contactless"
              @stop-ticker="clearItemType"
            ></MainMenuItem>
     </div>
  </template>
  <style lang="sass" scoped>
  .readLink
    font-weight: 500
  </style>
  
  <script>
   methods: {
      openNews(postInfo) {
        dbAuthUser().merge({ seenNewsPosts: { [postInfo.id]: true } })
        Browser.open({ url: postInfo.url, presentationStyle: 'popover' })
      },
      clearItemType() {
        this.itemType = ''
        return
      },
  </script>
  
• Hide vue paginate button if element doesn't exist

  I'm trying to hide a vue paginate button if the item doesn't exist in my array. My code:

  <b-pagination
              :key="currentQuestionPage"
              v-model="currentQuestionPage"
              :total-rows="submissionFiles.length"
              :per-page="perPage"
              align="center"
              first-number
              last-number
              limit="20"
              @input="changePage()"
            >
              <template v-slot:page="{ page, active }">
                  {{ submissionFiles[page - 1][currentStudentPage - 1] && submissionFiles[page - 1][currentStudentPage - 1].order }}
              </template>
            </b-pagination>
  

  However, instead of the button not rendering (what I'm hoping for), I'm getting a "blank" button:

  

  Is there any way to prevent the button from rendering at all if it has empty content?
• Nuxt.js after page refresh meta are filled from config instead of head method

  I had problem with meta in nuxt.js app. I want to fill dynamic meta tags in one detail page

  --pages
  ----event
  -----_id.vue

  When I navigate on web site via link all work great. But if I just refresh page, meta tags use value from nuxt.config.js. For instance I got 'SiteTitle Nuxt.config.js' instead of 'SiteTitle - Some event title'.

  Nuxt version 2.15.3

  nuxt.config.js

  export default {
    head: {
      titleTemplate: '%s - SiteTitle',
      title: 'SiteTitle Nuxt.config.js',
      htmlAttrs: {
        lang: 'en'
      },
      meta: [
        {charset: 'utf-8'},
        {name: 'viewport', content: 'width=device-width, initial-scale=1'},
        {hid: 'description', name: 'description', content: ''}
      ],
      link: [
        {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
      ]
    }
    components: true,
    buildModules: [
      '@nuxt/typescript-build',
      '@nuxtjs/vuetify',
    ],
    modules: [`enter code here`
      '@nuxtjs/axios'
    ],
  
    vuetify: {
      customVariables: ['~/assets/variables.scss'],
    },
    axios: {
      baseURL: 'https://api.someurl.com',
    }
  }
  

  And _id.vue file

  <template>
    <v-card class="mt-6 mb-5" outlined>
      <v-card-title>{{ model.title }}</v-card-title>
    </v-card>
  </template>
  
  <script lang="ts">
  import {Component, Vue} from "nuxt-property-decorator"
  import {EventModel} from "~/api/models/EventModel";
  import EventApi from "~/api/EventApi";
  
  @Component({
    async asyncData({params, $axios}) {
      const  eventApi = new EventApi($axios)
      const model = await eventApi.get(parseInt(params.id))
      return { model: model };
    },
  
    head(this: EventPage): object {
      return {
        title: "SiteTitle - " + this.model.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content:  this.model.shortDescription
          }
        ]
      }
    },
  })
  export default class EventPage extends Vue {
  
    model = {} as EventModel
  
    async fetch() {
  
    }
  }
  </script>
  

  I tried to call api in fetch, in this case meta values always have valid value when I refresh page, but Facebook Sharing Debugger get meta from nuxt.config.js in this case, and this solution is not suitable

  Thanks for your help
• Creating keys out of an array of objects in Javascript

  I am trying to look through the inputs once. And create an object where they keys are the codes.

  Then it should loop through the errors and and use the keys you created to access the corresponding inputs.

  Here is my object (e)

  {
          "message": "code not found",
          "path": [
              "validate"
          ],
          "extensions": {
              "code": "CODE_NOT_FOUND",
              "value": "VBJCBGB6JJ"
          }
      },
      {
          "message": "code not found",
          "path": [
              "validate"
          ],
          "extensions": {
              "code": "CODE_NOT_FOUND",
              "value": "HH6F3JPMWF"
          }
      },
      {
          "message": "code not found",
          "path": [
              "validate"
          ],
          "extensions": {
              "code": "CODE_NOT_FOUND",
              "value": "4FHRXE2GGN"
          }
      }
  ]
  

  And my function I'm trying to use it in

  showErrors(e) {
        let valid = true
        console.log(e)
        e.forEach((e) => {
          console.log('inside for each')
          const key = 'the_key'
          const obj = {
            [key]: 'the_value',
          }
          if (e.message === 'code not found') {
            this.form.code1.valid = false
            valid = false
            this.form.code1.error =
              'Invalid code. Try again or see FAQ’s for help.'
          }
          if (e.message === 'code used') {
            this.form.code2.valid = false
            valid = false
            this.form.code2.error = 'Code has already been redeemed.'
          } else {
            this.form.code1.valid = true
            this.form.code1.error = ''
          }
          return valid
        })
  

  The desired output is the be able to set either this.form.code3 or 2 or 1 . error with the different values coming back. The codes could have an error message of either "already redeemed" or "code invalid" but need to match up to the corresponding code.

  here is part of my template output for reference. This is built in Nuxt.js and pug lang.

  .input-container
                input(type="text" name="Code 1" placeholder="Code 1" v-model="form.code1.value" :class="{ error: form.code1.valid === false}" minlength="10").check
                //- .error-msg(v-if="form.code1.valid === false") {{form.code1.error}}
              .input-container
                input(type="text" name="Code 2" placeholder="Code 2" v-model="form.code2.value" :class="{ error: form.code2.valid === false}" minlength="10").check
                //- .error-msg(v-if="form.code2.valid === false") {{form.code2.error}}
              .input-container
                input(type="text" name="Code 3" placeholder="Code 3" v-model="form.code3.value" :class="{ error: form.code3.valid === false}" minlength="10").check
                //- .error-msg(v-if="form.code3.valid === false") {{form.code3.error}}