ReactMoralisError求助：已配置appId仍提示需提供appId

开发DApp时添加MoralisProvider触发错误：

Uncaught (in promise) ReactMoralisError: Provide a "appId" provided to

已配置环境变量但问题依旧，相关代码及配置如下：

App.js 代码 #

import './App.css';
import { MoralisProvider } from "react-moralis";

function App() {
  const moralisServerUrl = process.env.REACT_APP_MORALIS_SERVER_URL;
  const moralisAppId = process.env.REACT_APP_MORALIS_APP_ID;
  return (
    <MoralisProvider appId={moralisAppId} serverUrl={moralisServerUrl}>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </MoralisProvider>
  );
}

export default App;

环境变量文件内容 #

REACT_APP_MORALIS_SERVER_URL=https://XXXXXX.usemoralis.com:2053/server
REACT_APP_MORALIS_APP_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

完整错误栈 #

Uncaught (in promise) ReactMoralisError: Provide a "appId" provided to <MoralisProvider>
    at new ReactMoralisError (Errors.ts:4:1)
    at _useMoralisInit.ts:66:1
    at step (tslib.es6.js:102:1)
    at Object.next (tslib.es6.js:83:1)
    at tslib.es6.js:76:1
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js:72:1)
    at _useMoralisInit.ts:53:1
    at _useMoralisInit.ts:100:1
    at commitHookEffectListMount (sort.js:9:1)

• 确认环境变量文件的位置和命名：文件必须放在项目根目录，命名为.env（注意开头的英文句号）；如果是开发环境，也可以用.env.development，但文件名不能写错。React仅会加载以REACT_APP_开头的环境变量，你的变量名符合要求，但位置错误会导致读取失败。
• 重启开发服务器：修改环境变量后，必须停止当前的npm start进程，重新启动服务器，否则新的环境变量不会生效，代码中读取到的仍是旧值或undefined。
• 验证变量是否被正确读取：在App组件中添加日志打印，确认变量值：

  console.log("App ID:", moralisAppId);
  console.log("Server URL:", moralisServerUrl);
  

  如果打印结果为undefined，说明环境变量未被正确加载，回到第一步检查文件配置。
• 检查变量值的有效性：确认REACT_APP_MORALIS_APP_ID没有多余的空格、换行或特殊字符，复制粘贴时容易引入这类无效内容，导致值为空或无效。
• 硬编码测试排查：若以上步骤无效，可暂时直接在代码中填写真实的appId和serverUrl：

  <MoralisProvider 
    appId="你的实际App ID" 
    serverUrl="你的实际Server URL"
  >
  

  若此方式能正常运行，说明问题确实出在环境变量加载环节。

内容的提问来源于stack exchange，提问作者pardis.ti