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

[Pacific_Hustle]

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

Shopify.Context.initialize({
  API_KEY: process.env.NEXT_PUBLIC_SHOPIFY_API_KEY,
  API_SECRET_KEY: process.env.SHOPIFY_API_SECRET,
  SCOPES: process.env.SCOPES.split(","),
  HOST_NAME: process.env.HOST.replace(/https:\/\//, ""),
  API_VERSION: ApiVersion.April21,
  IS_EMBEDDED_APP: true,
  // 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
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });

    return config;
  },
};

In_app.js

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

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 https://community.shopify.com/c/Shopify-APIs-SDKs/APP-ERROR-INVALID-CONFIG-apikey-must-be-provided/t...which hasn't helped ether.

[Pacific_Hustle]

Bump

[Pacific_Hustle]

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

[tewe]

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.

Regards
Thomas