Error while building Shopify Sample Embedded App

Solved
evrimturan
Tourist
6 0 2

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... at 6. Step, I get the errors below.

 

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

Screenshot 2021-02-07 at 1.18.01 am.png

 

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

 Screenshot 2021-02-07 at 1.21.28 am.png

Screenshot 2021-02-07 at 1.24.29 am.png

 

How am I gonna fix these error?

0 Likes
achieveapplabs
Shopify Partner
472 36 74

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 @ Achieve Applabs

Install Approovly to create and track order approvals | We want to hear from you hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Custom Shopify Apps achieveapplabs.com
0 Likes
evrimturan
Tourist
6 0 2

Hi  @achieveapplabs,

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.

 
0 Likes
achieveapplabs
Shopify Partner
472 36 74

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 @ Achieve Applabs

 

 

Install Approovly to create and track order approvals | We want to hear from you hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Custom Shopify Apps achieveapplabs.com
0 Likes
evrimturan
Tourist
6 0 2

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...

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.

0 Likes
achieveapplabs
Shopify Partner
472 36 74

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

 

Install Approovly to create and track order approvals | We want to hear from you hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Custom Shopify Apps achieveapplabs.com
0 Likes
achieveapplabs
Shopify Partner
472 36 74

Hey @evrimturan ,

 

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

 

Thanks,

Sam - Owner @ Achieve Applabs

Install Approovly to create and track order approvals | We want to hear from you hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Custom Shopify Apps achieveapplabs.com
0 Likes
evrimturan
Tourist
6 0 2

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 (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
        <AppProvider i18n={translations}>
          <Component {...pageProps} />
        </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}

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

 

 

  

achieveapplabs
Shopify Partner
472 36 74

This is an accepted solution.

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 @ Achieve Applabs

Install Approovly to create and track order approvals | We want to hear from you hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Custom Shopify Apps achieveapplabs.com
evrimturan
Tourist
6 0 2

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.

0 Likes