Vue not functioning properly on FireFox browser

Software Version: 2.5.11

Link to Reproduction: https://jsfiddle.net/ranjs/eh10wju7/

Steps to Reproduce:

The functionality works correctly in Google Chrome, but an error occurs in Firefox:

'TypeError: undefined is not a constructor [Learn More]

and the screen remains blank.

[Show/hide message details.] TypeError: undefined is not a constructor[Learn More] build.js:1:182494
<anonymous>
http://localhost:25555/static/dist/build.js:1:182494
<anonymous>
http://localhost:25555/static/dist/build.js:1:181955
r
http://localhost:25555/static/dist/build.js:1:96
<anonymous>
http://localhost:25555/static/dist/build.js:1:4377
r
http://localhost:25555/static/dist/build.js:1:96
<anonymous>
http://localhost:25555/static/dist/build.js:1:247068
r
http://localhost:25555/static/dist/build.js:1:96
<anonymous>
http://localhost:25555/static/dist/build.js:1:457
<anonymous>
http://localhost:25555/static/dist/build.js:1:2
Expected Behavior:
Application displays content normally

Actual Result: Error message displayed and no content visible.

I have uploaded my main.js file and this is my package.json:

'{
  "name": "chatbotmariana",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Ranieri Abreu Silva Junior <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a283b38283f2f1a33343e283b3935372a3b342374393537">[email protected]</a>>",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "prod": "cross-env NODE_ENV=development webpack-dev-server --port 80  --hot --host 0.0.0.0"
  },
  ...

I am working with JavaScript and do not have a tsconfig.

.bablrc :

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ]
}

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    ...
  }
...

Answer №1

I have discovered something.

let SpeechRecognition =
    window.SpeechRecognition || window.webkitSpeechRecognition;
  let recognition = new SpeechRecognition();
  recognition.lang = "es-ES";
  recognition.interimResults = true;
  recognition.maxAlternatives = 1;

This script is incompatible with Firefox browser.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The resolution of Q.all does not occur in the expected order

I'm currently facing an issue with the order in which promises are being executed in Node.js. The goal of the code is as follows: a) Run a query and use the resulting latitude/longitude pairs to b) Calculate the shortest paths (using an async funct ...

best way to return a function variable in JavaScript

Hey there, I've been working with react native and have run into a bit of an issue... const SignIn = () => { screensplash() fetch('http://api.megamouj.ir/api/v1/logincheck/', { method: 'POST', headers: { ...

Creating dynamic routes in React by pulling data from a JSON file

Creating multiple routes based on JSON data file is the goal: routes.jsx import React from 'react'; import { Route, Router, IndexRoute } from 'react-router'; import ReactDOM from 'react-dom'; import App from './index.j ...

Is there a way I can maintain the active state after clicking on a link?

Is there a way to maintain an active element state when navigating to another page after clicking a link? I am wondering if it is possible to use JavaScript to remove the active state from one link and apply it to the next one. I am facing some challenges ...

Activating Vue.js reactivity by introducing a new key into an object

One way to add a new key/value pair to an object is by using the following function: .then(response => { this.plantRegisteredMaterials = response.data.tenantPlantMaterials.edges; this.plantRegister ...

splitting the responsibilities between two classes

Hey there, I'm currently pondering over whether to implement the separation of concerns concept in two separate classes. Firstly, I have my Match class: class Match { constructor (players) { this.id = uuid.v4().toString(); this.playe ...

Guide to converting a string into an undefined type

I've been working on parsing a csv file: let lines = csvData.split(/\r\n|\n/); let headers = lines[0].split(','); for (let i = 1; i < lines.length; i++) { let values = lines[i].split(','); ...

Ajax script causes error 403 when loading content while scrolling

Currently in the process of creating a blog using the HubSpot platform. The primary goal is to have blog posts load dynamically as users scroll down the page. I came across a script that claims to achieve this functionality and is designed specifically for ...

The act of rendering appears duplicated in the Codesandbox interface

While I am accustomed to using Codesandbox, I am facing an issue where the rendering is showing up twice for the first time, which has me puzzled about how to resolve it. Take for example the Contact component - the title and button are being displayed t ...

The best way to close a swipeable drawer from a different class

I'm feeling a bit puzzled by the explanation of SwipeableDrawer on the Material-ui website. Here's the setup I have: there's a Component called 'Sidebar' that opens a SwipeableDrawer when a user clicks a button on the appbar or swi ...

What is the best method for incorporating information into an existing object when it is currently empty?

When it comes to data removal, my method involves locating the element using findIndex and marking it as a null value in isInArray. However, if no such data exists, how can I add it to an empty element starting from the first one? For instance, if the fi ...

What is the reason behind innerHTML failing to work once a servlet has issued a response?

I need to capture the response from the servlet in the jsp page using JavaScript. I have included the following code: TestServlet.java: package com.test; import java.io.IOException; import javax.servlet.ServletException; import javax.ser ...

Update information without the need for an xhr request in the back-end using jQuery

To keep notification updated with any changes in the database without causing a slowdown to the website, I implemented the following solution: HTML Code: <div id="myid">{{ $db_data }}</div> Back-end Request (utilizing Laravel): $db_data = A ...

Learn how to display months on a countdown timer and then customize the format with basic JavaScript for a website

Looking to create a countdown page for the upcoming ICC cricket world cup event that displays the remaining days in two different formats: Format #1: 01 months 10 days 10 hours Format 2: 01 hours 20 minutes 10 seconds (If less than 2 days remain) I curr ...

How can I make sure the return statement in getServerSideProps is only executed once all fetching operations are finished?

Currently, I am able to retrieve a person's username and corresponding data object with just one fetch from firebase. Inside this data object, there is a property named "uploads," which contains an array of documentIDs representing posts uploaded by t ...

How can I find the last element that was selected using XPath in the browser console

Need help with XPath: $x(("//div[@class='ag-header-row']))[1] I'm working with an array of divs, but I want to select the last one. The [1] is necessary due to multiple rows with this class. I’ve heard about using [last()], but unsure w ...

using ng-repeat within a nested loop to iterate through objects nested within other objects

https://i.sstatic.net/eoRHo.png My goal is to replicate the image above using AngularJS ng-repeat. I am facing difficulty with the third column. <div tasty-table bind-resource-callback="showTCS.loadAllTCS" bind-init="showTCS.init" bind- ...

Tips for ensuring a button stays anchored to the bottom of a flatlist while scrolling to the end in React Native

const Layout = () => { return ( <View style={styles.container}> <Text style={styles.heading}>Screen Data</Text> <View> <FlatList data={data} renderItem={({item}) => ( ...

ng-select will solely output the term 'collection'

i am having an issue with a ng-select in my contact form. everything is being received correctly except for the value of the ng-select. Instead of getting the selected option from the ng-select, the system just returns the word "array". Below is the port ...

HTML code that has been "commented out" means

Within my _Layout.cshtml file, the following lines are present: <!--[if IE 7]> <link rel="stylesheet" type="text/css" media="all" href="/Content/css/ie7.css" /> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="te ...