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')
}
}
}
});
});
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"