FROM CACHE - en_header

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

New Member
2 0 1

So I've been on this issue for about 2 days. I've been working on the Shopify Node with React tutorial and it was going well until I hit the "Add Shopify App Bridge" section. 
When I restart my server and ran 'npm run dev' and go to authenticate my app at (I added my credentials). I would end up with this error.

Screen Shot 2021-04-28 at 8.39.13 AM.png

I've seen a lot of others with this issue but none of the solutions worked for me. 

What I've found:

In my next.config.js file, I've console logged the env to see if the api key is coming through. It does. 

const webpack = require('webpack');

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

module.exports = {
  webpack: (config) => {
    config.node = {
        fs: 'empty'
    const env = {API_KEY: apiKey};
    config.plugins.push(new webpack.DefinePlugin(env));
    return config;

In my _app.js file I console logged the config object, this is also passing in all the correct information.


My _app.js file

import React from 'react';
import App from 'next/app';
import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';
import { Provider } from '@shopify/app-bridge-react';
import ClientRouter from '../components/ClientRouter';
import '@shopify/polaris/dist/styles.css';
import translations from '@shopify/polaris/locales/en.json';
import '@shopify/polaris/dist/styles.css';
import { getCookieParser } from 'next/dist/next-server/server/api-utils';

class MyApp extends App {
  render() {

    const { Component, pageProps, shopOrigin } = this.props;
    const API_KEY = process.env.SHOPIFY_API_KEY;
    const config = { apiKey: API_KEY, shopOrigin, forceRedirect: true };
    return (
          <title>Sample App</title>
          <meta charSet="utf-8" />
        <Provider config={config}>
            <ClientRouter />
                <Component {...pageProps} />

MyApp.getInitialProps = async ({ ctx }) => {
    return {

export default MyApp;

What my console log shows when doing -  console.log(config) in _app.js:

  apiKey: 'MY API KEY',
  shopOrigin: '',
  forceRedirect: true

 I'm stumped here because my api key and shopOrgin is being pulled into config when I console log in my terminal but my api key is undefined when I check the console log in my browser inspector. 
Here's what my inspect looks like. 

Screen Shot 2021-04-28 at 9.35.29 AM.png


Would greatly appreciate any help because this thing is kicking my butt. 

Replies 2 (2)
3 0 1

We have this too and have no idea what is happening. The logs say that we are passing the right values

Shopify Partner
1 0 0

Anyone find a fix for this? Currently experiencing this problem while developing.