Unable to deploy extensions suddenly!

Retired Boards Appdev Extensions
,
1

Hi , im using the latest remix template for the app and i have also used theme extensions, checkout extensions
with my app.

I used to deploy my extensions from my laptop itself using

npm run build
npm run deploy

Everything was working properly but today i made a few changes in my extensions and removed my node_modules and did a npm i

now i wanted to redeploy the extensions. So i did
npm run build → it was success

i did
npm run deploy

This failed and gave me the error

Could not resolve “@remote-ui/react”
─ error ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Build failed with 43 errors: │
│ extensions/checkout-ui/node_modules/@shopify/ui-extensions-react/build/esm/surfaces/checkout/components/Banner/Banner.mjs:2:43: ERROR: Could not resolve “@remote-ui/react” │
│ extensions/checkout-ui/node_modules/@shopify/ui-extensions-react/build/esm/surfaces/checkout/components/BlockLayout/BlockLayout.mjs:2:43: ERROR: Could not resolve │
│ “@remote-ui/react” │
│ extensions/checkout-ui/node_modules/@shopify/ui-extensions-react/build/esm/surfaces/checkout/components/BlockSpacer/BlockSpacer.mjs:2:43: ERROR: Could not resolve │
│ “@remote-ui/react” │
│ extensions/checkout-ui/node_modules/@shopify/ui-extensions-react/build/esm/surfaces/checkout/components/BlockStack/BlockStack.mjs:2:43: ERROR: Could not resolve │
│ “@remote-ui/react” │
│ extensions/checkout-ui/node_modules/@shopify/ui-extensions-react/build/esm/surfaces/checkout/components/Button/Button.mjs:2:43: ERROR: Could not resolve “@remote-ui/react” │
│ … │
│ │
│ To investigate the issue, examine this stack trace: │
│ at mjs:2:43: ERROR: Could not resolve " │
│ at mjs:2:43: ERROR: Could not resolve " │
│ at mjs:2:43: ERROR: Could not resolve " │
│ at mjs:2:43: ERROR: Could not resolve " │
│ at mjs:2:43: ERROR: Could not resolve " │
│ at failureErrorWithLog (@shopify/app/node_modules/esbuild/lib/main.js:1639) │
│ let error = new Error(${text}${summary}); │
│ at (@shopify/app/node_modules/esbuild/lib/main.js:1051) │
│ const error = failureErrorWithLog(“Build failed”, originalErrors.concat(onEndErrors), originalWarnings.concat(onEndWarnings)); │
│ at runOnEndCallbacks (@shopify/app/node_modules/esbuild/lib/main.js:1474) │
│ let runOnEndCallbacks = (result, done) => done(, ); │
│ at buildResponseToResult (@shopify/app/node_modules/esbuild/lib/main.js:1049) │
│ runOnEndCallbacks(result, (onEndErrors, onEndWarnings) => { │
│ at (@shopify/app/node_modules/esbuild/lib/main.js:1061) │
│ buildResponseToResult(request2, (err, result, onEndErrors, onEndWarnings) => { │
│ at new Promise │
│ at on-end (@shopify/app/node_modules/esbuild/lib/main.js:1060) │
│ requestCallbacks[“on-end”] = (id, request2) => new Promise((resolve) => { │
│ at handleRequest (@shopify/app/node_modules/esbuild/lib/main.js:726) │
│ await callback(id, request); │
│ at handleIncomingPacket (@shopify/app/node_modules/esbuild/lib/main.js:748) │
│ handleRequest(packet.id, packet.value); │
│ at readFromStdout (@shopify/app/node_modules/esbuild/lib/main.js:676) │
│ handleIncomingPacket(stdout.subarray(offset, offset + length)); │
│

why does it happen? and how to solve this issue? we are going to go live soon and suddenly im facing this issue, kindly someone give some insights pls..

2

Hi Ndt_ts,

The “@remote-ui/react” could not be resolved error message indicates that the module is not installed or not found. Here are some things you could try to fix this issue:

  1. Check your package.json file: Make sure that the “@remote-ui/react” module is listed in the dependencies of your package.json file.

  2. Reinstall the module: Runnpm install @remote -ui/reactto install the module.

  3. Reinstall all modules: Delete the node_modules folder and the package-lock.json file, then run npm install to reinstall all modules.

  4. Check the module’s import path: Make sure that the import path in your code matches exactly with the installed module path. Case sensitivity or small typos can cause the module to not be found.

  5. Clear the npm cache: Run npm cache clean --force and then reinstall the modules.

  6. Check your environment: Make sure you are in the correct directory when running npm commands.

If none of these solutions work, the issue might be specific to the “@remote-ui/react” module or the way your project is set up. In that case, you might want to open an issue in the module’s repo here.

Hope this helps

3

Thanks for your reply @Liam

I have some fundamental questions and it would be very helpful, if you shed some light on them.

I have deployed my staging application in my server.

  1. My idea is to deploy the extensions of this hosted app from my local system itself. is it fine doing it? or should i deploy only form my server whose url i have set in my shopify app setup.

  2. It was getting deployed correctly and suddenly it started to fail as given in the question. My wild guess is that, the shopify.app.toml should be having my old cloudflare url and it failed owing to it? am i right?

3.i basically replaced shopify.app.toml with my correct app url manually. but is there a way to connect my code to the app created in the store so that shopify.app.toml will automatically fetch the correct app details, url etc . I know if i do npm run dev, it will fetch. But will doing that change my urls setup in App Setup to the cloudflare temporary url? and what is the best way to connect my code to my app for deploying the extensions of my application?

  1. even after replacing correct urls in shopify.app.toml , i wasn’t able to deploy the app and still was facing the error in question for which, after seeing your reply i installed @remote-ui/react in my checkout extension and i was able to deploy the app extensions from my local.
    but this dependency is not being explicitly used by me in any part of my code, but still it gives me this error? any idea why? and i didn’t face this issue any time before…
4

On what hosting did you deploy your app? Did you use a vps, if yes can you share a feedback how you did it, please.