Troubleshooting Tips for Storefront Next

Before following the targeted advice in this guide, try these general troubleshooting steps.

• Double-check that you’re running a supported version of Node before starting your local development server.
• Confirm that your development server is still running and the port hasn’t been taken over by another process.
• After saving a code change, the browser updates automatically via Hot Module Replacement (HMR). If the change doesn’t appear, check the terminal for build errors before forcing a reload.
• Look for errors in both the browser console and in the terminal.
• Look for network error responses using your browser’s developer tools. (In Chrome’s DevTools, go to the Network tab.)
• To help identify syntax errors and typos, run a code formatter and a linter. The command for running lint is pnpm lint for checking and pnpm lint:fix for auto-fixing lint issues. Configuration files are provided for both Prettier (code formatter) and ESLint (linter) in the Storefront Next app.
• To catch TypeScript errors that don’t show up at run time, run pnpm typecheck.
• To see SCAPI requests and internal state changes, run SFCC_LOG_LEVEL=debug pnpm dev to increase log verbosity.
• Check your computer’s antivirus and firewall settings for anything that is preventing your code from running or blocking network requests.
• To identify and analyze performance issues, use the Profiler in Chrome’s DevTools. For more information, see this guide from Google: Analyze Runtime Performance. You can also install the React Developer Tools extension for Chrome to get another Profiler tab where you can see similar info but at the component level.