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

seeminglydude
Visitor
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"
  }
}

  

Replies 2 (2)

seeminglydude
Visitor
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

syf_
Shopify Staff
95 21 24

Hi @seeminglydude,

The tutorials you were following worked for specific versions of libraries included, and since in the steps that instructed to install libraries we didn't specify which libraries to use, npm installed the latest stable build which didn't play too friendly with our existing implementation. As someone new to the React framework, I can understand the frustrations faced in trying to follow the tutorial. As I indicated, those docs were a bit dated, but we have updated tutorials published now. I would also ask that you check out the Shopify CLI which quickly scaffolds an app for you.

Let me know if you have any concerns with the new tutorial.

Best,
Seth.

syf_ | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog