The code generated by Asto SSR may not be compatible with older iOS versions, causing it to fail to run

I have been running my astro SSR site on Netlify with great success. However, I recently encountered an issue when testing it on older iPhone models like the iPhone 6 and earlier. It seems that all script executions halt, rendering the site non-interactive.

Upon inspecting Safari Error logs from the iPhone 5SE Simulator, I found the following errors:

[Error] SyntaxError: Unexpected token '.'

[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.

[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored. (x2)

[Error] Unhandled Promise Rejection: SyntaxError: Unexpected token '?'

[Error] Unhandled Promise Rejection: SyntaxError: Unexpected token '?'

https://i.sstatic.net/TIyjN.png

https://i.sstatic.net/yEZnh.png

I am uncertain about how to resolve this issue. Any assistance would be greatly appreciated.

PS: My setup includes using Svelte to build astro islands and Google reCAPTCHA v3 on the problematic page. Interestingly, everything works perfectly in my development environment.

javascriptsafarisvelteios12astrojs

Answer №1

It appears that there may be a problem with your code if you are using optional chaining, such as 

object?.potentiallyMissingProperty
. According to the compatibility data on caniuse, this feature is only supported on iOS Safari versions 13.4 and above. Since an iPhone 6 can only run up to iOS 12, using this syntax will result in an error on those devices.

This seems to be related to an issue with Astro, which may not fully support older browsers. Additionally, Astro uses CSS scoping with :where, which may cause issues on older versions of Safari as indicated by caniuse. In these scenarios, your HTML content should still display, but any JavaScript functionalities might not work properly and should be considered as additional enhancements.

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 `this` value is null within an onClick function of a ReactJS component

The issue occurs with the onClick method of <span className="nav-toggle">. The specific error message is: cannot read property setState of null. It seems to be related to the scoping of this or due to the asynchronous nature of the setState method. ...

javascriptreactjsonclick

Having trouble generating an HTML table from JSON data using JavaScript

My attempt to generate a table with data from an external .JSON file using JavaScript is not working as expected. Everything worked fine when the data was hardcoded into the .JS file, but once I tried to fetch it externally using "fetch", the details do no ...

javascripthtmljsonhtml-table

Exploring potential arrays within a JSON file using TypeScript

Seeking guidance on a unique approach to handling array looping in TypeScript. Rather than the usual methods, my query pertains to a specific scenario which I will elaborate on. The structure of my JSON data is as follows: { "forename": "Maria", ...

javascriptarraysjsontypescript

How can I apply a jquery method to a variable when JavaScript already has a method with the same name?

Is it possible to call the .which function on a character without needing to differentiate between browser types by using the jQuery .which method, which supposedly normalizes for browser discrepancies? I know that the inherent javascript method is also ...

javascriptjquerykeycode

Tips for creating a custom script in my React Native application

My React Native app requires a script to generate static files during the release process. The app is a game that utilizes pre-computed boards, which are resource-intensive to compute. Therefore, I am developing a script that will create these boards and s ...

javascriptnode.jsreactjstypescriptreact-native

Encountering a hiccup while trying to retrieve information from a JSON

I am currently working on a Jquery Drop Upload form and everything is functioning well. However, I am encountering an error when trying to retrieve data from the database using JSON. I'm not sure why this error is occurring, so please see below for mo ...

javascriptjqueryjson

Unidentified googletagmanager detected in vendors segment

Recently, my ad blocker detected an unfamiliar Google Tag Manager request originating from a chunk provided by one of my vendors. Is it typical for tracking to be embedded in dependencies like this? And what type of information can be collected from my we ...

javascriptreactjsnode-modulesgoogle-tag-managervendor

How can I transfer data from a MySQL callback function to a global variable?

I'm still in the learning stages of using nodejs and working on getting more comfortable with it. My goal is to retrieve a user from a database and store it in a variable, but I'm having trouble storing it globally. Though I can see that the conn ...

javascriptmysqlnode.jscallbackasynccallback

There was an error while trying to read the properties of undefined (specifically the state). Make sure to include this.state.a

I am struggling with an error that I have never encountered before. Despite having experience working with functional components, I am new to class components. I used create react app to install the application, but it seems like I might be missing a req ...

javascriptreactjsclass

What is the reason for injecting dependencies twice in AngularJS?

I'm a beginner in Angular and I'm curious to understand the reasoning behind injecting all our dependencies twice. Here is an example: var analysisApp=angular.module('analysisApp',[]); analysisApp.controller('analysisController ...

javascriptangularjsdependency-injection

JavaScript tool: Verify the presence of both jQuery and jQuery UI

I have been working on developing a Javascript Widget (almost complete), and when integrating it into the first site I encountered some issues. My Widget requires loading multiple libraries (jquery, jquery ui, mustache, ...); this is achieved by injecting ...

javascriptjqueryhtmljquery-uiwidget

Different ways to modify the color and thickness of a variable in HTML5 with either JavaScript or CSS

I am currently working with a JavaScript file where I have a variable defined as follows: var nombre = document.getElementById('nombre').value; The 'nombre' variable corresponds to an element in an HTML file: Nombre: <input type=" ...

javascripthtmlcss

Guide to making two text boxes with SimpleDialog in jQuery Mobile

I came across the link below, but unfortunately it's not working for me. jQuery Mobile SimpleDialog with two Inputs? Is there anyone who can assist me after reviewing the code snippet provided below? <script type="text/javascript> ...

javascriptjqueryjquery-mobile

PHP array does not retain a variable

While building a website, I encountered a perplexing bug during coding. The issue arises when I store MySQL query results in an array and then call a JavaScript function with that data. Initially, the array contains 9 items: 8 of type tinyint(4) (from the ...

javascriptphpmysqlarrays

"We encountered an error with the external script while trying to load file content using jQuery's ajax function. It

//C.php <script type="text/javascript"> $(document).ready(function(e) { $('div').load("D.php"); }); </script> <div></div> //D.php <script type="text/javascript" src="D.js"></script> //D.js console.log(45 ...

javascriptjqueryajax

The behavior of Elementor lightbox buttons upon being clicked

When using Android, I've noticed that the lightbox briefly displays a semitransparent cyan bar on the left and right buttons when they are pressed. Is there a way to control or prevent this behavior? Any suggestions would be appreciated! Thanks in adv ...

javascriptcsswordpresslightboxelementor

Modifying Selectize Ajax data in real-time

How can the student_id be changed each time the modal is opened? This is the code: $('#relationshipModal input[name=existing_user]').selectize({ valueField: 'id', searchField: 'name', options: [], create: fal ...

javascriptjqueryajaxselectize.js

When the window is fully loaded, JavaScript executes

Can someone help me set up this script to start running when the page loads? I want the vat field to automatically show up if the company name has been entered. Thank you! //--></script> <script type="text/javascript>//-- $('.colorbox ...

javascriptjquery

Incorporating numerous dropdown menus to a table filled with data retrieved from a database

I have implemented a dynamic table that adds a new row at the end when a button is clicked. One of the columns in the table contains a dropdown list, and I want this dropdown list to display values from a database. This is how I am constructing my table ...

phpjavascript

Leveraging the power of the vuejs plugin within the main.js script

My goal is to develop a plugin to manage the OAuth2 token data in my Vue.js application. I followed several tutorials available on the internet to create this plugin. var plugin = {} plugin.install = function (Vue, options) { var authStorage = { ...

javascriptpluginsvue.jsvuejs2