App Extension errors when trying to authenticate for Admin API

washingmachine · April 11, 2024, 10:54pm

Hi all,

I built a Shopify app and extension using the CLI tool. The sample code works as intended (a product is created when clicking the button in the Admin dashboard) but I am unable to call the Admin API from my extension.

my-app/app/routes/app._index.jsx contains sample code that successfully calls the Admin API. When I copy the entire file exactly as is to my-app/extensions/post-purchase-ui/src/index.jsx (only modifying the relative import from import { authenticate } from “../shopify.server”; to import { authenticate } from “app/shopify.server”;). I get errors. First, there was this:

$ shopify app dev
/my-app/node_modules/wrap-ansi/index.js:2
const stringWidth = require('string-width');
                    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /my-app/node_modules/string-width/index.js from /my-app/node_modules/wrap-ansi/index.js not supported.
Instead change the require of /my-app/node_modules/string-width/index.js in /my-app/node_modules/wrap-ansi/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/my-app/node_modules/wrap-ansi/index.js:2:21) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v21.7.2

which went away after running yarn add [email removed] -W . But after that I got the following error:

    node_modules/@remix-run/node/dist/sessions/fileStorage.js:17:19:
      17 │ var path = require('node:path');
         ╵                    ~~~~~~~~~~~

  The package "node:path" wasn't found on the file system but is built into node. Are you trying to
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "node:crypto"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/dist/sessions/fileStorage.js:15:21:
00:32:09 │ extensions │       15 │ var crypto = require('node:crypto');
00:32:09 │ extensions │          ╵                      ~~~~~~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "node:crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, 
which will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "node:fs"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/dist/sessions/fileStorage.js:16:22:
00:32:09 │ extensions │       16 │ var node_fs = require('node:fs');
00:32:09 │ extensions │          ╵                       ~~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "node:fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which 
will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "node:path"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/dist/sessions/fileStorage.js:17:19:
00:32:09 │ extensions │       17 │ var path = require('node:path');
00:32:09 │ extensions │          ╵                    ~~~~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "node:path" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which
 will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "node:stream"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/dist/stream.js:15:26:
00:32:09 │ extensions │       15 │ var node_stream = require('node:stream');
00:32:09 │ extensions │          ╵                           ~~~~~~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "node:stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, 
which will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "node:crypto"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:15:21:
00:32:09 │ extensions │       15 │ var crypto = require('node:crypto');
00:32:09 │ extensions │          ╵                      ~~~~~~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "node:crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, 
which will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "node:fs"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:16:22:
00:32:09 │ extensions │       16 │ var node_fs = require('node:fs');
00:32:09 │ extensions │          ╵                       ~~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "node:fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which 
will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "node:fs/promises"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:17:23:
00:32:09 │ extensions │       17 │ var promises = require('node:fs/promises');
00:32:09 │ extensions │          ╵                        ~~~~~~~~~~~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "node:fs/promises" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do 
that, which will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "node:os"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:18:22:
00:32:09 │ extensions │       18 │ var node_os = require('node:os');
00:32:09 │ extensions │          ╵                       ~~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "node:os" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which 
will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "node:path"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:19:19:
00:32:09 │ extensions │       19 │ var path = require('node:path');
00:32:09 │ extensions │          ╵                    ~~~~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "node:path" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which
 will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "node:stream"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:20:26:
00:32:09 │ extensions │       20 │ var node_stream = require('node:stream');
00:32:09 │ extensions │          ╵                           ~~~~~~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "node:stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, 
which will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "node:util"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:21:24:
00:32:09 │ extensions │       21 │ var node_util = require('node:util');
00:32:09 │ extensions │          ╵                         ~~~~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "node:util" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which
 will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "crypto"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/node_modules/cookie-signature/index.js:5:21:
00:32:09 │ extensions │       5 │ var crypto = require('crypto');
00:32:09 │ extensions │         ╵                      ~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which 
will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "crypto"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@shopify/shopify-app-remix/build/cjs/server/adapters/node/index.js:3:21:
00:32:09 │ extensions │       3 │ var crypto = require('crypto');
00:32:09 │ extensions │         ╵                      ~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which 
will remove this error.
00:32:09 │ extensions │ 
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "stream"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/stream-slice/index.js:3:24:
00:32:09 │ extensions │       3 │ var Transform = require('stream').Transform;
00:32:09 │ extensions │         ╵                         ~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which 
will remove this error.

Error: Build failed with 14 errors:
 node_modules/@remix-run/node/dist/sessions/fileStorage.js:15:21: ERROR: Could not resolve "node:crypto"
 node_modules/@remix-run/node/dist/sessions/fileStorage.js:16:22: ERROR: Could not resolve "node:fs"
 node_modules/@remix-run/node/dist/sessions/fileStorage.js:17:19: ERROR: Could not resolve "node:path"
 node_modules/@remix-run/node/dist/stream.js:15:26: ERROR: Could not resolve "node:stream"
 node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:15:21: ERROR: Could not resolve "node:crypto"
 ...

I’ve been trying to fix this for a couple hours now but have no clue how. I already tried installing the modules with yarn, setting build target to “node” in vite.config.js and adding the following to remix.config.js:

module.exports = {
serverNodeBuiltinsPolyfill: {
modules: {
crypto: true,
stream: true,
fs: true,
path: true,
"fs/promises": true,
os: true,
util: true,
}
},

but still get the same error.

Edit: Fixed it by deleting yarn.lock and node_modules and running yarn install. However, now I get

Uncaught (in promise) DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'ExtensionSandboxPostPurchase.latest.de.e953c1f6c2f63e67b5fd.worker.js'

which is triggered immediately when importing {authenticate} from “app/shopify.server”;

Strydar · April 19, 2024, 3:28pm

Hi @washingmachine , I’m stuck at the same place, were you able to fix it? If yes, It’ll be great if you can add your solution to this thread.

washingmachine · April 23, 2024, 11:22am

Hi @Strydar , unfortunately I still have no idea why authenticate.admin doesn’t work but sending HTTP requests to the admin API does work.

let response = await fetch(`https://${shopName}.myshopify.com/admin/api/${apiVersion}/graphql.json`, {
    method: "POST",
    headers: {
      "Content-Type": "application/graphql",
      "X-Shopify-Access-Token": 

HOWEVER, the Shopify-Access-Token, to my understanding (but I could be wrong), is not a permanent token and has to be regenerated every session. And I have no idea how to fetch the token during runtime (I only tried this request with a hardcoded token that I got after running *npm run prisma studio*). Moreover, I don't know how secure this approach is - I think anyone could see the access token upon inspection of the browser console (network requests)? Please let me know if you make any progress here!

Strydar · May 13, 2024, 10:16am

Hi @washingmachine , Is there any progress on this?
I have some follow-up questions too:

Are you sending this HTTP request from index.jsx/tsx file in your extension or are you sending in through a route (i.e api-offers.jsx)
Where can we get the access tokens from to send the request, is it the same as inputData.token?

nyvs_1 · September 2, 2024, 12:44pm

Having the same problem.

deleting yarn.lock and node_modules and running yarn install didn’t fix it for me

w3speedup2018 · October 11, 2024, 3:55pm

did you find the solution for this crypto error?

Topic		Replies	Views
Trouble getting Admin API working in Hydrogen Shopify build Shopify Discussion troubleshooting	3	12	April 15, 2024
After adding web pixel shopify app dev throws node errors. Shopify Apps third-party-apps	0	32	March 11, 2025
Getting error on "shopify app dev" Extensions troubleshooting	1	16	October 11, 2024
Admin-ui-extensions not found (404) - Authenticate requests between an extension and backend server Shopify Apps third-party-apps	4	1	February 3, 2024
The package "crypto" wasn't found on the file system but is built into node Shopify Apps third-party-apps	2	27	November 30, 2023

App Extension errors when trying to authenticate for Admin API

Related topics