Newbie Question with - "Build a Shopify App with Node.js and React" tutorial

Highlighted
New Member
2 0 1

Hi All, 

 

I am working through the starter tutorial using node and react. But  I am running into the following error when attempting to install a  dummy app on a test development store (at step:  Click the Install unlisted app button.Wondering if anyone can point me in the right direction to fix this. 

 

> sample-embedded-app@1.0.0 dev /Users/CK/Documents/Projects/shopify/learn/sample-embedded-app
> node server.js

> Ready on http://localhost:3000

  TypeError [ERR_INVALID_ARG_TYPE]: The "key" argument must be one of type Buffer, TypedArray, DataView, string, or KeyObject. Received type undefined
      at prepareSecretKey (internal/crypto/keys.js:299:13)
      at new Hmac (internal/crypto/hash.js:98:9)
      at Object.createHmac (crypto.js:139:10)
      at Object.validateHmac [as default] (/Users/CK/Documents/Projects/shopify/learn/sample-embedded-app/node_modules/@shopify/koa-shopify-auth/dist/auth/validate-hmac.js:17:10)
      at /Users/CK/Documents/Projects/shopify/learn/sample-embedded-app/node_modules/@shopify/koa-shopify-auth/dist/auth/create-oauth-callback.js:24:52
      at step (/Users/CK/Documents/Projects/shopify/learn/sample-embedded-app/node_modules/tslib/tslib.js:136:27)
      at Object.next (/Users/CK/Documents/Projects/shopify/learn/sample-embedded-app/node_modules/tslib/tslib.js:117:57)
      at /Users/CK/Documents/Projects/shopify/learn/sample-embedded-app/node_modules/tslib/tslib.js:110:75
      at new Promise (<anonymous>)
      at Object.__awaiter (/Users/CK/Documents/Projects/shopify/learn/sample-embedded-app/node_modules/tslib/tslib.js:106:16)
      at oAuthCallback (/Users/CK/Documents/Projects/shopify/learn/sample-embedded-app/node_modules/@shopify/koa-shopify-auth/dist/auth/create-oauth-callback.js:9:24)
      at /Users/CK/Documents/Projects/shopify/learn/sample-embedded-app/node_modules/@shopify/koa-shopify-auth/dist/auth/index.js:58:46
      at step (/Users/CK/Documents/Projects/shopify/learn/sample-embedded-app/node_modules/tslib/tslib.js:136:27)
      at Object.next (/Users/CK/Documents/Projects/shopify/learn/sample-embedded-app/node_modules/tslib/tslib.js:117:57)
      at /Users/CK/Documents/Projects/shopify/learn/sample-embedded-app/node_modules/tslib/tslib.js:110:75
      at new Promise (<anonymous>)

1 Like
Highlighted
Shopify Staff
Shopify Staff
39 7 8

Hi @iamkc! Did you have the app installed on a test store previously and then when you uninstalled it you got this error? Or is this your first time trying to install it on your shop. 

 

Just in case, can you make sure you have your `.env` variables set? https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-s...

 

The koa auth package looks for your variables like this: https://github.com/Shopify/shopify-demo-app-node-react/blob/build-your-user-interface-with-polaris-s...

I have a feeling that's causing this error. Let me know if that helped! 

0 Likes
Highlighted
New Member
2 0 1

Hi @katiedavis

 

Thanks for reply... I am running into this while installing the app for the first time on a store.  I double checked the .env file to make sure I have the api key and secrets specified correctly.  I believe I have the same code on the server.js as mentioned in the url .  I am listing the server.js code that I have on my side incase I missed something .  I tried removing the app completely and retried the tutorial ... Still running into the same error  

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(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 {shop, accessToken} = ctx.session;
                ctx.redirect('/');
            },
        }),
    );
    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}`)
    });
});

 

 

 

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
39 7 8

Hi again,

 

It looks fine to me on my end. Can you try cloning this repo:

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

 

and checking out the branch "build-your-user-interface-with-polaris-starter-files"?

 

You can run `git checkout build-your-user-interface-with-polaris-starter-files`

 



` and then just run npm install.

 

 

Let me know if you have the same error with that as well!

0 Likes
Highlighted
New Member
1 0 0

@iamkc I got the same error. In my case, the issue was that I didn't use quotes for the values in my .env file. The error message indicates that the type of the apiSecret variable is not Buffer, TypedArray, DataView, string, or KeyObject. Try to find out what the type of the variable is, and make sure it's a string. You can check the type of a variable with the help of typeof. You can do something like this:

app.get('/', (req, res) => {
     res.send(typeof(apiSecret));
});

Then visit localhost:3000 in your browser to see the type of the apiSecret variable. If it's not a string, check your .env file.

I hope this will solve your problem.

0 Likes
Highlighted
Shopify Partner
4 0 0

same problem for me. Missing quotes around values set in the `.env` file

0 Likes
Highlighted
New Member
2 0 9

I'm a little tardy to the party but I ran into the same problem and tried running the server with the .env file values with and without quotes. The .env file was successfully parsed in both cases. According to the rules of the dotenv parsing engine:

BASIC=basic

becomes:

{BASIC: 'basic'}


The problem in my case was dotenv.config() was unable to find the .env file so it couldn't pass the contents to process.env. So I updated dotenv.config() to include the name of the file (it should be in the same project root directory as server.js):

 

dotenv.config({path:'nameOfFile.env'});

...now it works. Hope this helps.

5 Likes
Highlighted
New Member
2 0 9

Something else I realized that might be helpful for other newbs such as myself: The .env file needs to be saved as ".env" or dotenv.config() won't be able to find the file without specifying the path and file name. I didn't know you could create a file with just the extension (or that you would ever want to do something like that). In order to create a file without a name, I think you can use any text editor, on an unsaved new file, press Ctrl+S, "Save as type:" "All Files (*.*)", type ".env" into the "File name:" field, click "Save" or press "Enter", and it should save the file without the name. That's what my initial problem was. I created the .env with a name. After creating another file as ".env" (without the name), I was able to compile and connect to the server. It also works if I pass in the named .env file path as an argument, but it looks like convention is to use an unnamed .env file.

4 Likes
Highlighted
Excursionist
16 2 2

@katiedavis 

 

I have quotes around my api key and secret key in my process.env file, but I still get the error the same error. What am I doing wrong? My process.env file is just

 

SHOPIFY_API_KEY="#####"
SHOPIFY_API_SECRET_KEY="#####"

 

And I followed the rest of the tutorial (https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-shopify), basically just copying and pasting everything, and I got the '"key" argument must be of type string...' error when trying to install the app

0 Likes
Highlighted
Excursionist
16 2 2

@katiedavis  I figured out the issue that should maybe be updated on the tutorial. For windows users, in the process.env file, we need to include "SET" before creating the api variables. So instead of 

 

SHOPIFY_API_KEY='YOUR API KEY FROM SHOPIFY PARTNERS DASHBOARD'
SHOPIFY_API_SECRET_KEY='YOUR API SECRET KEY FROM SHOPIFY PARTNERS DASHBOARD'

Like the tutorial says, it should be

 

SET SHOPIFY_API_KEY='YOUR API KEY FROM SHOPIFY PARTNERS DASHBOARD'
SET SHOPIFY_API_SECRET_KEY='YOUR API SECRET KEY FROM SHOPIFY PARTNERS DASHBOARD'
0 Likes