Unexpected identifier 'getProject'. Expected ';' after async variable declaratio-CodePudding

I have the following JS on a web page.

<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/[email protected]/dist/vue.esm.browser.js'

let projectData = await getProject(projectCode);

...

</script>

The data is then stored in Vue.js to render a page. For further context the above references the following code in a seperate 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;
}

Everything works fine, except on iPhones, where I get the following error which breaks my code and prevents Vue.js from rendering the page:

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

I have tried wrapping it in an async function like this, but still had no luck:

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

Which returns a Vue.js related error:

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

I'm not sure what needs to be changed for this to work correctly on iPhones (works fine in desktop Safari)

CodePudding user response：

Your attempted solution is correct, the only issue is that the let is scoped to the IIFE scope.

Re-write your code as follows:

getProject(projectCode).then(projectData => {
 // All code goes here
});

The issue original is caused by a lack of top-level await support.