Blank screen issue with Meteor app on iOS devices and simulators

Although my Meteor app is running smoothly in the browser and on an Android device, I'm encountering a blank white screen issue after launching it on iOS devices and simulators. Since I am new to Xcode, I'm unsure if I made any mistakes. Despite following the iOS testing instructions meticulously, the problem persists. I have tried several solutions, resulting in a plethora of last seen dates in my Google search history. The Safari developer console displays the errors listed below.......Has anyone else encountered this issue or know how to resolve it?

(I've replaced my IP address with for security reasons. Additionally, the body element appears empty, but the iPhone screen updates when I edit HTML in the console. It seems like my homepage isn't rendering)

[Error] TypeError: undefined is not an object (evaluating 'window.navigator.mediaDevices.getUserMedia')
    index.js (elmarti_video-chat.js:1042)
    fileEvaluate (modules-runtime.js:343)
    index.js (elmarti_video-chat.js:453)
    fileEvaluate (modules-runtime.js:343)
    index.js (elmarti_video-chat.js:53)
    fileEvaluate (modules-runtime.js:343)
    (anonymous function) (elmarti_video-chat.js:6319)
    Global Code (elmarti_video-chat.js:6326)
[Error] Origin http://localhost:12952 is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://localhost:12952 is not allowed by Access-Control-Allow-Origin. (_timesync, line 0)
[Error] XMLHttpRequest cannot load http://000.000.00.000:3000/_timesync due to access control checks.
[Error] TypeError: undefined is not an object (evaluating 'VideoCallServices')
    (anonymous function) (app.js:1950)
    (anonymous function) (blaze.js:3398)
    _withTemplateInstanceFunc (blaze.js:3744)
    fireCallbacks (blaze.js:3394)
    (anonymous function) (blaze.js:3474)
    fireCallbacks (blaze.js:2014)
    nonreactive (tracker.js:640)
    (anonymous function) (blaze.js:2011)
    _withCurrentView (blaze.js:2271)
    _fireCallbacks (blaze.js:2010)
    _createView (blaze.js:2028)
    _materializeView (blaze.js:2073)
    materializeDOMInner (blaze.js:1532)
    _materializeDOM (blaze.js:1474)
    (anonymous function)
    _materializeDOM (blaze.js:1483)
    (anonymous function) (blaze.js:2113)
    nonreactive (tracker.js:640)
    _materializeView (blaze.js:2079)
    render (blaze.js:2370)
    insert (iron_dynamic-template.js:518)
    insert (iron_router.js:1639)
    maybeAutoInsertRouter (iron_router.js:1629)
[Error] Origin http://localhost:12952 is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://localhost:12952 is not allowed by Access-Control-Allow-Origin. (_timesync, line 0)
[Error] XMLHttpRequest cannot load http://000.000.00.000:3000/_timesync due to access control checks.
[Error] Origin http://localhost:12952 is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://localhost:12952 is not allowed by Access-Control-Allow-Origin. (_timesync, line 0)
[Error] XMLHttpRequest cannot load http://00.000.00.000:3000/_timesync due to access control checks.
[Error] Origin http://localhost:12952 is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://localhost:12952 is not allowed by Access-Control-Allow-Origin. (_timesync, line 0)
[Error] XMLHttpRequest cannot load http://000.000.00.000:3000/_timesync due to access control checks.
[Error] Origin http://localhost:12952 is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://localhost:12952 is not allowed by Access-Control-Allow-Origin. (_timesync, line 0)
[Error] XMLHttpRequest cannot load http://000.000.00.000:3000/_timesync due to access control checks.

Answer №1

Encountering the same issue led me to discover a solution through the following steps:

  1. Delete the node_modules directory.
  2. Run meteor reset.
  3. Delete the .cache folder.
  4. Reinstall dependencies (I opted for yarn).
  5. Voila! The application should now run on both simulator and device.

Tested successfully on:

  • Mac OS 11.1 Big Sur
  • XCode 12.3
  • Meteor 1.12.1
  • Built front-end using Vue and Vuetify with akryum package.
  • iOS 14.3 Simulator on iPhone 12 Pro Max
  • iOS 14.3 Physical Device on iPhone SE

I trust this information proves helpful to you too.

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

Navigate to a designated page on a React application using a unique identifier

On my website, I have three pages - App.js, Button.js, and Template.js. When a user clicks on a button in Button.js, I want the Template.js page to open with specific data fetched from an API. The artificial API contains objects with information about diff ...

Shift the items in the unordered list to the left

I am currently working on a carousel design. I have already finished coding the HTML and CSS, but I am unsure of how to shift the elements one by one to the right or left while ensuring that 7 pictures are always visible in the viewport. .seccion { ...

An issue occurred with the session being undefined in Node.js Express4

I'm encountering an issue where my session is undefined in new layers even after setting the value within an "if" statement. /*******************************************/ /**/ var express = require('express'), /**/ cookieParse ...

Troubleshooting the integration of React Native into a current Swift project: encountering an error stating that the 'string' file is not

I attempted to integrate React Native into my current iOS app, which consists of a mix of Objective-C and Swift code, using the instructions provided in this tutorial: https://facebook.github.io/react-native/docs/integration-with-existing-apps.html Howeve ...

Integrating Mailchimp with MongoDB and Node.js

As of now, I am managing a database of users in MongoDB and my goal is to provide them with regular updates on new content available on a real-estate marketplace website on a daily basis. My plan is to send out email notifications to each user every day w ...

Having trouble sending a GET request from the client to my backend route using axios in a React-Node.js/Express setup. Where did I go wrong?

Struggling with making an API request from my backend route (using nodes/express). I'm making an axios request from the client site using React. The express backend route works fine, so the issue must be in my client-side code. I've been stuck on ...

Unable to access the 'localStorage' property from 'Window': Permission denied

Check out my website www.abc.com Incorporating an iframe in www.abc.com using <iframe src="www.xyz.com"></iframe> An issue has arisen: Error message: "Failed to read the 'localStorage' property from 'Window': A ...

Using JavaScript to display a confirmation dialog box with the content retrieved from a text input field

Can a confirm dialog box be used to show the user-entered value from a form's text box? For instance, if the user enters 100.00, I want the dialog box to say something like, "Confirm Amount. Press OK if $100.00 is accurate." ...

Ways to expand the border horizontally using CSS animation from the middle

Currently, I am experimenting with CSS animation and I have a query regarding creating a vertical line that automatically grows in length when the page is loaded. I am interested in making the vertical line expand from the center in both upward and downwar ...

Converting JSON data into a custom object representation

I have received the following response from the server. [ { "resourceEmail" : "", "kind" : "admin#directory#resources#calendars#CalendarResource", "resourceId" : "", "resourceName" : "Inubation-Newton-4p", "resourceType" ...

Tips on sending a form to the server with ajax technology

I'm struggling with sending a button id to my server through ajax in order to submit a form without having to constantly reload the page every time I click on a button. Unfortunately, it's not working as expected and I can't figure out why. ...

Errors encountered while expanding sections in UITableView

I encountered an issue while working on a code snippet to expand rows of cells in a section. The error message points to a problem within the xtable updates, specifically at [UIViewAnimation initWithView:indexPath:endRect:endAlpha:startFraction:endFraction ...

Kadence Blocks and the white canvas of Gutenberg in WordPress

My Wordpress page editor is not loading correctly for a specific page. It remains blank when trying to edit, even though other pages load without issue. The problem began after I toggled tablet view for styling and the editor crashed. The front end of the ...

What could be causing my THREE.js Documentation Box to malfunction?

I am a newcomer trying to get the hang of THREE.js. I delved into the THREE.js Documentation and attempted to implement the code, but when I loaded my HTML page, it appeared blank. I am at a loss for what to do next. I utilized Visual Studio Code for codin ...

Combining jQuery with another library, what do you think?

I am working on a project that necessitates the incorporation of a tailor-made JavaScript library into the websites of end users. It's somewhat like a third-party tool for tracking, similar to Google Analytics. We will not have control over the other ...

Generate the JavaScript file only if the Typescript file is error-free, to ensure a smooth compilation process

Take a look at the following TypeScript code snippet: class formal { private startString: String = ""; constructor(startString:String) { this.startString = startString; } public sayHello = function() :Number { alert(thi ...

What is the correct way to add an object to a specific array in express.js?

My goal in the following function is to write a JSON file with an array of data as strings. However, the push() function, which is commented out, is causing the code to not execute as intended. Everything works fine without that line of code, but I do need ...

Numerous demands causing replacements of variable values

I am new to working with nodejs and I have encountered a situation where, upon hitting a specific endpoint, I need to perform two separate post calls. The first post call returns a URL that is required for the second call. Below is a simplified module I cr ...

Troubleshooting state issues with Vuex and Firebase

Within my vuex store, I have a setup where users are authenticated using Firebase. After logging in, the firebase.auth().onAuthStateChanged function is triggered, setting the user variable to state.user and saving it in the Firebase database. However, when ...

Watching a video play within a slider and transitioning seamlessly to an image once the video ends

I am currently facing an issue with a video playing inside a HeroCarousel slider. Before the slider, there is an image and after the slider, there is another image. This is my code: <div data-time="8000" data-prev-src="/media/splash/slider-left.png" ...