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

Pacific_Hustle
Shopify Partner
26 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

 

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.

 

0 Likes
Pacific_Hustle
Shopify Partner
26 0 10

Bump

0 Likes
Pacific_Hustle
Shopify Partner
26 0 10

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

0 Likes

Hi @Pacific_Hustle ,

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

tewe_0-1619766425657.png

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

 

• War meine Antwort hilfreich? Hinterlasse bitte ein Like.
• Hat meine Antwort Dein Problem gelöst? Bitte akzeptiere sie als Lösung.