Issue with Add Shopify App Bridge in Build a Shopify App with Node and React Tutorial

seeminglydude
New Member
2 0 0

I am working through the Build a Shopify App with Node and React Tutorial and am fairly new to Node and React so please let me know what other info I can provide. 

I have followed all the steps and have successfully made it to the section where we add the Shopify App Bridge but it is here that I am having issues.

When go through the sections code updates and attempt to re-authenticate using the URL provided (with my app info inserted) https://YOUR_NGROK_ADDRESS.io/auth?shop=YOUR_SHOPIFY_STORE.myshopify.com the webpage is displaying an Internal Server Error -

Failed to load resource: the server responded with a status of 500 (). When I look at the server logs it's a lengthy error but it's saying it cannot find the pages-manifest.json module - Error: Cannot find module '/shopify-tutorial-app/.next/server/pages-manifest.json'

When I attempt to restart the server I am getting errors such as: 

Module not found: Can't resolve '@shopify/polaris/styles.css' in '/shopify-tutorial-app/pages'

Failed to parse source map: TypeError: Cannot read property 'sections' of null

 

Below is my code for the server.js, _app.js, and package.json file (in that order)

require('isomorphic-fetch');
const Koa = require('koa');
const next = require('next');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const dotenv = require('dotenv');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const session = require('koa-session');

dotenv.config();

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env;

app.prepare().then(() => {
  const server = new Koa();
  server.use(session({ sameSite: 'none', secure: true }, server));
  server.keys = [SHOPIFY_API_SECRET_KEY];

  server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET_KEY,
      scopes: ['read_products'],
      afterAuth(ctx) {
        const urlParams = new URLSearchParams(ctx.request.url);
        const shop = urlParams.get('shop');

        ctx.redirect(`/?shop=${shop}`);
      },
    }),
  );

  server.use(verifyRequest());
  server.use(async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });

  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

 

import App from 'next/app';
import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';
import { Provider } from '@shopify/app-bridge-react';
import '@shopify/polaris/styles.css';

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    const config = { apiKey: API_KEY, shopOrigin, forceRedirect: true };

    return (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
          <AppProvider>
            <Component {...pageProps} />
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}

MyApp.getInitialProps = async ({ctx}) => {
  return {
    shopOrigin: ctx.query.shop,
  }
}

export default MyApp;

 

{
  "name": "shopify-tutorial-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@shopify/app-bridge-react": "^1.29.0",
    "@shopify/koa-shopify-auth": "^3.2.0",
    "@shopify/polaris": "^6.0.1",
    "dotenv": "^8.2.0",
    "isomorphic-fetch": "^3.0.0",
    "koa": "^2.13.1",
    "koa-session": "^6.1.0",
    "next": "^10.0.6",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "webpack": "^5.21.0"
  }
}

  

0 Likes
seeminglydude
New Member
2 0 0

One additional note: I was running into the issue described in this PR, but after implementing fixed this earlier issue, not sure if the errors I am seeing now with the bridge are related. https://github.com/Shopify/shopify-demo-app-node-react/pull/338

0 Likes