Error while building Shopify Sample Embedded App

[evrimturan]

Hi,

I’ve been following the tutorial, https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react, and I got stuck with some errors.

While following the tutorial, https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with-polaris at 6. Step, I get the errors below.

After adding Shopify App Bridge and restarting the server, I get this error:

Also, when trying to visit the URL below after restarting the server, I get another error.

How am I gonna fix these error?

[system]

Hi @evrimturan ,

Try running npm install dotenv. Make sure you run

require('dotenv').config()

As early as possible in your app. Make sure you have a .env file with correct values in the root of your app folder.

Best,

Sam - Owner [email removed] Achieve Applabs

[evrimturan]

Hi @Anonymous ,

Thanks for your quick reply. I tried to run “npm install dotenv”, I have .env file with correct values in the root of the app folder and the first line of next.config.js is already “require(‘dotenv’).config()” but it didn’t work. Still getting the same errors.

[system]

Hi @evrimturan ,

Issue looks specific to Next server. I’m not sure what step 6 was in the tutorials the links are 404’d.

Take a look at https://github.com/vercel/next.js/issues/6287

I’m not very familiar with NextJS hopefully someone has a solution in the community. If you fix this please let us know how you did it.

Regards,

Sam - Owner [email removed] Achieve Applabs

[evrimturan]

Here is the correct link if you wanna take a look at it.

https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with-polaris

Yeah, it looks like something related to next server. I also tried to run the completed project cloning from github and still same errors. Nothing changed. Here is the link of that completed code.

https://github.com/shopify/shopify-demo-app-node-react/

As soon as I find out what the problem is, I’ll definitely let you know.

[system]

Hi @evrimturan ,

Ok looks like a problem with Babel loader and missing React preset. I think you can install the missing npm modules then configure them in next.config.js although I haven’t tried it out myself.

Regards,

Sam - Owner @ Achieve Applabs

[system]

Hey @evrimturan ,

Can we see your _app.js code? There error can likely be spotted in there.

Thanks,

Sam - Owner @ Achieve Applabs

[evrimturan]

Yeah, sure.

This is _app.js

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/dist/styles.css';
import translations from '@shopify/polaris/locales/en.json';
import React from 'react';

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;

    const config = { apiKey: API_KEY, shopOrigin, forceRedirect: true };

    return (
      
    );
  }
}

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

export default MyApp;

And this is server.js in case you need it.

require('isomorphic-fetch');
const dotenv = require('dotenv');
const Koa = require('koa');
const next = require('next');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
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({ secure: true, sameSite: 'none' }, 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;
    return
  });

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

By the way, there was another error before this one and I had to remove codes related to next/css in next.config.js as told here

This is next.config.js after removing next/css.

require('dotenv').config();

const webpack = require('webpack');

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

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

[system]

Hi @evrimturan ,

So I downloaded https://github.com/Shopify/shopify-demo-app-node-react today and ran npm install then I ran npm run dev and everything worked as expected, as in no errors in the console.

Sorry to make you provide so many details, I think you just need to check your node version. I’m using v13.8.0. Check by running node -v. If that doesn’t work revert back any changes you made and delete node_modules folder and run npm install again.

Let me know how it goes!

Regards,

Sam - Owner [email removed] Achieve Applabs

[evrimturan]

Hi again,

Now I had a chance to look at it again. My node version is v14.15.4. The previous error that I mentioned was related to the node version specifically node -v > v14.15.1. I haven’t tried to run it using node 13 but I guess if I did, it would work. I’ll try it and I’ll let you know the result but I believe there’s gotta be another way to run it with the latest node version.

[system]

Hi @evrimturan ,

Please try reinstalling your NodeJS dependencies first by deleting node_modules and run npm install.

Your NodeJS Version shouldn’t be an issue since it’s at least higher than 13.

I don’t see any syntax or issues with the code itself so please try this troubleshooting first.

Regards,

Sam - Owner [email removed] Achieve Applabs

[evrimturan]

That worked, the app is running now but I’m getting a TypeError. That must be something unrelated to this problem because it’s working. I’m gonna start from scratch and tell you how it goes.