Unresponsive Next JS app after successful OAuth

[ralphhermeling]

Issue summary

I followed the tutorial of building a shopify app with Next JS, React and Node. My production app created by using next build fails after completing payment and gets stuck on the index page (it keeps loading until chrome says it is unresponsive). The same app in 'development' mode works completely fine on a ngrok tunnel, this is the weird part about it.

Expected behavior

After user completed billing should be redirected to the embedded shopify app.

Actual behavior

Stays stuck in the shopify_app_url?charge_id==...?shop=customer's_shop and app is unresponsive when you try to access app

Steps to reproduce the problem

1. Follow the tutorial https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react
2. Run next build and NODE_ENV='production' node server.js
3. Complete OAuth

[paulomarg]

Hi @ralphhermeling, thanks for pointing this out, I was able to reproduce this issue as well. We will look into this and fix it.

[ralphhermeling]

Hi @paulomarg, thank you I'm looking forward to your solution. This is the final step in my app process before launching so I appreciate you also taking a look at it!

[ProphetKhalul]

@paulomarg any updates on when this will be fix?

[mkevinosullivan]

👋🏻 We'll fix this in the relevant example code shortly but the problem is in your next.config.js file ...

Change the first 5 lines from:

require("dotenv").config();
const webpack = require('webpack');
const { default: Shopify } = require('@shopify/shopify-api');

const apiKey =  JSON.stringify(Shopify.Context.API_KEY);

to

require("dotenv").config();
const webpack = require('webpack');

const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);

The problem is due to the App Bridge module used in the app not having a valid API key (which comes from next.config.js above). In development mode, this is constructed dynamically while running, so the API_KEY is built/compiled into the files served to the browser on-the-fly.

However, in prepping for production, npm run build wasn't picking up the API_KEY while pre-compiling the files (because Shopify.Context.API_KEY is only set while running), so the files served at runtime were generating an error like this in the console of the browser:

APP::ERROR::INVALID_CONFIG: apikey must be provided

This seems to work for me but let me know if, with the change above, your development and production versions run properly.

[mkevinosullivan]

The appropriate page in the tutorial is now updated with the corrected content for next.config.js

[ralphhermeling]

Thank you, nice job guys!