Re: Error while building Shopify Sample Embedded App

Solved

Error while building Shopify Sample Embedded App

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?

Accepted Solution (1)
Not applicable

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

View solution in original post

Replies 11 (11)

Not applicable

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

evrimturan
Tourist
6 0 2

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.

 
Not applicable

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

 

 

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.

Not applicable

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

 

Not applicable

Hey @evrimturan ,

 

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

 

Thanks,

Sam - Owner @ Achieve Applabs

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

 

 

  

Not applicable

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

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.

Not applicable

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

evrimturan
Tourist
6 0 2

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.