Code App SQL connection not working locally

The local “Failed to load data. Please try again.” error with a Power Apps code app connected to Azure SQL is typically caused by two things shown in the tutorial troubleshooting guidance:

1. Problems with the Node/npm setup or missing packages (like @microsoft/power-apps).
2. Runtime connection issues between the local app, Power Platform, and the Azure SQL connection.

Use the following steps that align with the documented troubleshooting guidance.

1. Fix the missing @microsoft/power-apps module
   • Ensure the package is installed instead of commenting out the import:

          npm cache clean --force
          Remove-Item -Recurse -Force node_modules
          Remove-Item package-lock.json
          npm install
     

   • Confirm Node.js is an LTS version (18.x or 20.x):

          node --version
     

   • If the error persists, explicitly install the client library package:

          npm install @microsoft/power-apps
     

   • Restore the PowerProvider import and wrapper in main.tsx. The app relies on PowerProvider to talk to Power Apps and the SQL connection; commenting it out prevents data loading.
2. Resolve common Node/Vite runtime issues
   • If the dev server fails to start with a port conflict such as EADDRINUSE: address already in use :::3000, free the port:

          netstat -ano | findstr :3000
          taskkill /PID [PID] /F
     

   • Or configure an alternate port in vite.config.ts and update the Power Apps client library configuration accordingly.
3. Check the Power Platform SQL connection
   • In the Power Platform environment where the code app is registered, open the SQL connection and test it to confirm it succeeds.
   • Ensure the app is running against the same environment where the SQL connection was created and that the browser profile is signed in with the same account.
4. Address runtime connection errors from the React app
   • If the React UI shows “Failed to load data”:
     • Verify the SQL connection in Power Apps is healthy and can connect.
     • When the app first loads locally, consent to any permissions prompts. If consent was previously dismissed, clear the browser cache and try again.
     • Make sure the browser profile used to open the local URL matches the Power Platform account that owns the connection.
5. Validate Azure SQL-side connectivity (if using SQL auth instead of managed identity)
   • In Azure portal, on the SQL server:
     • Under Security → Networking, set Allow Azure services and resources to access this server to Yes.
     • Add the current client IP to firewall rules.
   • From the dev machine, test connectivity:

          Test-NetConnection -ComputerName "your-sql-server.database.windows.net" -Port 1433
     

Once @microsoft/power-apps is correctly installed, PowerProvider is active in main.tsx, the Power Platform SQL connection is healthy, and the browser is using the correct signed-in account, the local app should be able to load data instead of showing the generic failure message.

References:

• How to: Connect your code app to Azure SQL