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