"Uncaught Error: You need to call Parse.initialize before using Parse" in a Svelte app

Question

That same error appeared for many developers before, but none of them used Svelte, problem is I have it already initialized in main.js

import Parse from 'parse/dist/parse.min.js';
const appID=import.meta.env['APP_ID'];
const PARSE_HOST_URL = 'https://parseapi.back4app.com/';
const jsKey = import.meta.env['JS_ID'];
Parse.initialize(appID, jsKey);
Parse.serverURL = PARSE_HOST_URL;

When I got that error I tried pasting this code again inside the component that should read the data but there was no difference. I also tried pasting the code from back4app documentation (where the DB is hosted).

<script context="module">
import Parse from 'parse/dist/parse.min.js';
export const Members = async function () {
    // Reading parse objects is done by using Parse.Query
    const parseQuery = new Parse.Query('members');
    try {
        let memberList = await parseQuery.find();
        return memberList;
    } catch (error) {
        alert('Error! '+error.message);
    };
};
</script>

the env file is located in the main root directory, did I put it in the wrong location or am I missing something?

Update: this is the previous version of the app written in vanilla js

Parse.initialize([app_key], [js_key]);
Parse.serverURL = "https://parseapi.back4app.com/";
const membersDiv=document.querySelector('.memberlist');
const namesList=document.querySelector('.names');
let members = Parse.Object.extend("members");
let query = new Parse.Query(members).limit(1000);
query.find().then(function(results) {
results.forEach(function(member) {
  let ul = document.createElement('ul');
    let namesList = document.createElement('li');
    namesList.classList.add('member');
    namesList.innerHTML = ` <p class="name">${member.get('name')}</p><p class="memberid">${member.get('memberid')}</p><p><a href="tel:${member.get('phone')}">${member.get('phone')}</a></p>`;
    if (member.get('phone')===undefined){
      namesList.innerHTML = ` <p class="name">${member.get('name')}</p><p class="memberid">${member.get('memberid')}</p><p>${member.get('phone')}</p>`;
    }
    if (typeof member.get('phone')!="undefined"&& member.get('phone').substring(0,1)!='0'){
      namesList.innerHTML = ` <p class="name">${member.get('name')}</p><p class="memberid">${member.get('memberid')}</p><p><a href="tel:${'0'+member.get('phone')}">${'0'+member.get('phone')}</a></p>`;
    }
    membersDiv.appendChild(namesList);
    // create 5 checkboxes for each member
    let checkboxes = document.createElement('div');
    checkboxes.classList.add('checkboxes');
    namesList.appendChild(checkboxes);
    for (let i = 0; i < 5; i++) {
        let checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.classList.add('w'+parseInt(i+1));
        checkboxes.appendChild(checkbox);
        if (member.get('w'+parseInt(i+1)) == true) {
            // check the first checkbox
            checkboxes.children[i].checked = true;
        }
        // when a checkbox is checked, update the member object
        checkboxes.children[i].onclick = function() {
            member.set('w'+parseInt(i+1), this.checked);
            member.save();
            if (member.save()){
              console.log(members.name)
            } else{
              console.log('error')
            }
        }
    }
  });
});

Answer 1

Based on the comment of Back4app support team: The latest version (3.5.0) of Parse SDK seems to have some bugs (already fixed, but not released yet). Change it to : "parse": "3.4.4"