The program encountered an unexpected identifier 'getProject' instead of ';'. It was expecting to find a semicolon after the async variable declaration

When using this JavaScript on a webpage, I encounter an issue:

<script async type="module">
import {projectCode} from "./assets/js/config.js";
import {getProject} from "./assets/js/saleproject.js";
import {getAccount} from "./assets/js/account.js";
import Vue from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e282b3b1e6c7068706f6a">[email protected]</a>/dist/vue.esm.browser.js'

let projectData = await getProject(projectCode);

...

</script>

To render a page in Vue.js, the data fetched is stored. The code referred to above is found in a separate file:

import { server } from './config.js';

export async function getProject(projectCode) {
    const response = await fetch(server + '/saleproject/GetByCode/' + projectCode);
    const projectData = await response.json();
    return projectData;
}

While everything functions correctly on desktops, iPhones present an error that interrupts Vue.js rendering:

SyntaxError: Unexpected identifier 'getProject'. Expected ';' after variable declaration.

An attempt was made to resolve it by enclosing it in an asynchronous function, but still encountered difficulties:

(async function () {
    let projectData = await getProject(projectCode);
}())

This resulted in a Vue.js error:

Error in data(): "ReferenceError: projectData is not defined"

Adjustments are needed to ensure proper functioning on iPhones (currently works on desktop Safari).

Answer №1

Your solution attempt is accurate, but the problem lies in the fact that the let variable is confined to the IIFE scope.

To address this, you should modify your code as shown below:

getProject(projectCode).then(projectData => {
 // Insert all code within this block
});

The original issue stems from the absence of top-level await functionality.

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

Using JavaScript, you can add an article and section to your webpage

Currently, I am utilizing AJAX to showcase posts. My objective is to extract each property from a JSON object that is returned and generate an <article> for the title followed by a subsequent <section> for the content. While I can successfully ...

"Is there a way to adjust the range slider to display currency instead of

I stumbled upon this amazing slider on codepen. Can someone guide me on how to adjust it to display a range from €500 to €6000 while keeping the vibrant red background? I've attempted various solutions like: <input id = "range" type = "range ...

Currently, only the initial button is functional. I am uncertain if it is due to a script issue or if there is a rule that I inadvertently

As a beginner, I am eager to grasp the fundamentals and rules of Javascript. My goal is to create a basic example that involves a box with three buttons. However, I have encountered an issue where only one button seems to be functional despite having dis ...

Utilize React to generate HTML content and send it as the email body through Node.js

I am currently working on a react application that consists of two main pages - AddStatus and ViewStatus. Both of these are implemented as react components. My current task involves sending out an email daily at a specific time, containing the details dis ...

Conditions for JQuery Ajax handlingIs there anything specific you would

I am looking to implement a try-catch scenario in Laravel where, if successful, a certain message will appear and if it fails, a different message will be displayed. However, when executed successfully, it seems to display the second message instead. $.a ...

I can't seem to get the npm run dev command to work properly after setting up

After successfully setting up React JS with Vite and running npm i, I encountered an error when trying to run npm run dev: > [email protected] dev > vite E:\nasheednaldo\node_modules\rollup\dist\native.js:64 ...

Attitude: Defiant and Ignoring Authority

So far, no suggestions have been made, indicating that maybe I haven't properly summarized the issue; The problem arises when I absolutely position the section with the class="container" using an additional class or id specific to that <div>. I ...

The module in Node.js is unable to be loaded

Dealing with a common problem here. Despite trying to reinstall npm, deleting node_modules files and package-lock.json, the issue persists. The console output is as follows: node:internal/modules/cjs/loader:1080 throw err; ^ Error: Cannot find module &apo ...

Use Cypress to make requests to GraphQL endpoints using the .request method

Despite my efforts to search for information on using Cypress requests with GraphQL, I come across terms like "mock up server" and "stub" without a clear example. I am struggling to find a comprehensive guide on how to effectively utilize GraphQL with cy ...

Methods for validating ajax response with Jasmine

I'm a newbie when it comes to jasmine and I'm trying to figure out how to verify if a specific node is present in the ajax response. Currently, I'm using grunt to run jasmine from the command line and have successfully tested if a function i ...

Issue with displaying bound value in AngularJS textbox

Hello! I am currently working on an AngularJS application and have encountered a puzzling issue. I am attempting to bind a value to a textbox using the following code: <ul> <li ng-repeat="screen in screenMap"> <input type="text" ...

Is there a way to deactivate a button upon clicking and then substitute it with a new button that serves a different purpose in AngularJS?

Is there a way to deactivate a button once clicked and substitute it with another button that performs a different task using AngularJS? Here is the button in question: <button type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || ...

Having difficulty personalizing the email template on AWS SES

I am currently working on setting up a forgot password email system using AWS SES. Below is the template I have created: { "Template":{ "TemplateName": "forgotpasswrd", "SubjectPart": "Forgot ...

Exploring ways to loop through a JSON array and embed it into an HTML element

After the ajax request, the data returned is structured as follows: Data = [ ["18/02/2019", "A"], ["19/03/2019", "B"], ["21/05/2019", "C"], ] The ajax request was successful and the data is stored in a variable named Data within a function. ...

What is the process for generating a new object by outputting key-value pairs?

I have an array that I'm trying to use to create a new object with specific keys and values. const arr = [ { name: 'ab', key: '584577', }, { name: 'cd', key: '344926', }, { name: &a ...

JavaScript code encounters difficulties parsing HTML source

I'm attempting to reconstruct the WhateverOrigin service, which can be found at this link: Nevertheless, when I try running it in my web browser, this code that functioned perfectly with WhateverOrigin no longer functions properly with my imitation s ...

What is the best way to have a variable adjust each time a coin is inserted until it reaches a specific value?

I have developed a unique coin box that recognizes the value of each coin inserted. Users can now pay for a service that costs 2.0 € by inserting coins of various denominations such as 2.0 €, 1.0 €, 0.50 €, 0.20 €, and 0.10 €. In my react-nati ...

How come my diary section (5th) is showing up/operating in my teacher's section (4th)?

My journey with HTML, CSS, and Javascript began as a beginner. After following a tutorial on YouTube and making some modifications, everything was running smoothly until the diary section unexpectedly appeared under the teacher's section, which should ...

Node scripts and node bins are causing errors in Vue.js when running npm

While attempting to run my Vue project with the command npm run serve I encountered an error message that read: [email protected] serve /home/numan/Desktop/vue-getting-started/07-accessing-data/begin/vue-heroes vue-cli-service serve sh: 1: vue- ...

Unable to access the value of an undefined property

In my HTML view, I have the following code: <form name="adduser" id="signupForm" novalidate> <span>First Name</span> <label class="item item-input" id="profileLabel"> <input id="profileInput" type="text" ...