AppBridgeError - APP::ERROR::INVALID_CONFIG: apiKey must be provided

Shopify Partner
34 0 10

This has been a frustrating experience.


I've deployed my embedded React + Nextjs application onto Heroku and I've configured the environment variables in the settings such that the names match the ones in my local.settings.json. Note, that this application was generated using the Shopify CLI with Nodejs selected as the boilerplate.

I'm getting the "AppBridgeError - APP::ERROR::INVALID_CONFIG: apiKey must be provided" error even though I'm clearly providing my environment variable apiKey.


Inside server.js


  SCOPES: process.env.SCOPES.split(","),
  HOST_NAME: process.env.HOST.replace(/https:\/\//, ""),
  API_VERSION: ApiVersion.April21,
  // This should be replaced with your preferred storage strategy
  SESSION_STORAGE: new Shopify.Session.MemorySessionStorage(),



Inside next.config.js


const { parsed: localEnv } = require("dotenv").config();

const webpack = require("webpack");

module.exports = {
  webpack: (config) => {
    const env = { NEXT_PUBLIC_SHOPIFY_API_KEY: process.env.SHOPIFY_API_KEY };
    config.plugins.push(new webpack.DefinePlugin(env));

    // Add ESM support for .mjs files in webpack 4
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",

    return config;





class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    return (
      <AppProvider i18n={translations}>
            apiKey: process.env.SHOPIFY_API_KEY,
            shopOrigin: shopOrigin,
            forceRedirect: true,
          <MyProvider Component={Component} {...pageProps} />



Everything used to work locally when I just used process.env.SHOPIFY_API_KEY. But ever since I deployed to Heroku it hasn't been working. I've tried changing the names from NEXT_PUBLIC_SHOPIFY_API_KEY to SHOPIFY_API_KEY: process.env.SHOPIFY_API_KEY, and so on. I've tried many different variations. I've also already attempted everything in hasn't helped ether.


Replies 3 (3)

Shopify Partner
34 0 10


Shopify Partner
34 0 10

Bump... Can nobody help me out with this situation?

Shopify Partner
244 46 102

Hi @Pacific_Hustle ,

make sure that you provide these environment values within Heraku on the setting page.


Somehow Heraku does not pick up the changes right away. Also it seems that it is not enough to restart the app in Heraku.

I found it necessary to start a new deployment to Heraku, I have no idea why this is necessary. In the end Iused the following commands after changing the Config Vars and it worked.

git add .
git commit -m "what ever you want to write here"
git push heroku main
shopify deploy heroku
As said, this did the job for me but probably it is not the intended way.


• Was my reply helpful? Click Like to let me know!
• Was your question answered? Mark it as an Accepted Solution
• Check out our Price Updater App