Svelte应用中Parse初始化报错问题求助

问题描述 #

我在Svelte应用中遇到错误：Uncaught Error: You need to call Parse.initialize before using Parse。此前不少开发者碰到过该错误，但均非Svelte场景。我已在main.js中完成Parse初始化，代码如下：

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;

报错后，我将初始化代码复制到需要读取数据的组件中，问题依旧。也尝试过使用Back4App文档中的代码，组件代码如下：

<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>

我的env文件放在项目根目录，请问是路径有误还是遗漏了什么配置？

补充说明：以下是该应用此前的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')
            }
        }
    }
  });
});

解决方案 #

1. 修正环境变量命名规则 #

Svelte基于Vite构建，环境变量必须以VITE_为前缀才能被正确加载。修改你的.env文件：

VITE_APP_ID=你的AppID
VITE_JS_ID=你的JSKey

然后在代码中更新变量获取方式：

const appID = import.meta.env.VITE_APP_ID;
const jsKey = import.meta.env.VITE_JS_ID;

修改后需要重启开发服务器生效。

2. 避免Parse实例隔离 #

在Svelte的<script context="module">中单独导入Parse，会和main.js中的Parse实例完全隔离，导致初始化状态不共享。可以用两种方式解决：

• 全局挂载（适合小型项目）
  修改main.js，将初始化后的Parse挂载到window对象：

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

  组件中无需再次导入，直接使用全局实例：

  <script context="module">
  export const Members = async function () {
      const parseQuery = new window.Parse.Query('members');
      try {
          let memberList = await parseQuery.find();
          return memberList;
      } catch (error) {
          alert('Error! '+error.message);
      };
  };
  </script>
  

• 统一模块导入（规范方案）
  创建单独的Parse配置模块src/utils/parse.js：

  import Parse from 'parse/dist/parse.min.js';
  const appID = import.meta.env.VITE_APP_ID;
  const PARSE_HOST_URL = 'https://parseapi.back4app.com/';
  const jsKey = import.meta.env.VITE_JS_ID;
  Parse.initialize(appID, jsKey);
  Parse.serverURL = PARSE_HOST_URL;
  
  export default Parse;
  

  所有需要使用Parse的地方都导入这个模块：

  // main.js
  import './utils/parse.js';
  

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

3. 确保代码执行时机正确 #

组件中的查询代码必须在Parse初始化完成后执行，建议放在onMount钩子中：

<script>
import { onMount } from 'svelte';
import { Members } from './your-component.js';

let memberList = [];

onMount(async () => {
    memberList = await Members();
});
</script>

内容的提问来源于stack exchange，提问作者Ray M