App reviews, troubleshooting, and recommendations
Hello there,
@Shopify/app@3.0.25
@Shopify/cli@3.0.25
Having this issue when running the project:
extensions | Shopify CLI Extensions Server is now available at https://5958-188-138-193-49.eu.ngrok.io/extensions/dev-console
extensions | flaminjoy-galleries-pixel (C:\projects\productlead.me\shopify\productlead-galleries\node_modules\@shopify\app\node_modules\.bin\shopify-cli-extensions:2
extensions | basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
extensions | ^^^^^^^
extensions |
extensions | SyntaxError: missing ) after argument list
extensions | at Object.compileFunction (node:vm:352:18)
extensions | at wrapSafe (node:internal/modules/cjs/loader:1033:15)
extensions | at Module._compile (node:internal/modules/cjs/loader:1069:27)
extensions | at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
extensions | at Module.load (node:internal/modules/cjs/loader:981:32)
extensions | at Function.Module._load (node:internal/modules/cjs/loader:822:12)
extensions | at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
extensions | at node:internal/main/run_main_module:17:47)
frontend |
frontend | > dev
frontend | > vite
frontend |
backend |
backend | > dev
backend | > cross-env NODE_ENV=development nodemon index.js --ignore ./frontend
backend |
frontend |
frontend | vite v2.9.15 dev server running at:
frontend |
frontend | > Network: http://192.168.56.1:64666/
frontend | > Network: http://192.168.18.8:64666/
frontend | > Local: http://localhost:64666/
frontend | > Network: http://172.31.224.1:64666/
frontend |
frontend | ready in 243ms.
frontend |
backend | [nodemon] 2.0.19
backend | [nodemon] to restart at any time, enter `rs`
backend | [nodemon] watching path(s): *.*
backend | [nodemon] watching extensions: js,mjs,json
backend | [nodemon] starting `node index.js`
frontend | b [ERROR] Could not resolve "pg-native"
frontend |
frontend | ../node_modules/pg/lib/native/client.js:4:21:
frontend | 4 b var Native = require('pg-native')
frontend | b5 ~~~~~~~~~~~
frontend |
frontend |
frontend | You can mark the path "pg-native" as external to exclude it from the bundle, which will remove this error. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.
frontend |
frontend | b [ERROR] Could not resolve "mock-aws-s3"
frontend |
frontend | ../node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:43:28:
frontend | 43 b const AWSMock = require(
frontend | 'mock-aws-s3');
frontend | b5 ~~~~~~~~~~~~~
frontend |
frontend | You can mark the path "mock-aws-s3" as external to exclude it from the bundle, which will remove this error. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.
frontend |
frontend | b [ERROR] Could not resolve "aws-sdk"
frontend |
frontend | ../node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:76:22:
frontend | 76 b const AWS = require(
frontend | 'aws-sdk');
frontend | b5 ~~~~~~~~~
frontend |
frontend | You can mark the path "aws-sdk" as external to exclude it from the bundle, which will remove this error. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.
frontend |
frontend | b [ERROR]
frontend | Could not resolve "nock"
frontend |
frontend | ../node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:112:23:
frontend | 112 b const nock = require('nock');
frontend | b5 ~~~~~~
frontend |
frontend | You can mark the path "nock" as external to exclude it from the bundle, which will remove this error. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.
frontend |
frontend | 11:52:52 [vite] error while updating dependencies:
frontend | Error: Build failed with 4 errors:
frontend | ../node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:43:28: ERROR: Could not resolve "mock-aws-s3"
frontend | ../node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:76:22: ERROR: Could not resolve "aws-sdk"
frontend | ../node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:112:23: ERROR: Could not resolve "nock"
frontend | ../node_modules/pg/lib/native/client.js:4:21: ERROR: Could not resolve "pg-native"
frontend | at failureErrorWithLog (C:\projects\productlead.me\shopify\productlead-galleries\web\frontend\node_modules\esbuild\lib\main.js:1624:15)
frontend | at C:\projects\productlead.me\shopify\productlead-galleries\web\frontend\node_modules\esbuild\lib\main.js:1266:28
frontend | at runOnEndCallbacks (C:\projects\productlead.me\shopify\productlead-galleries\web\frontend\node_modules\esbuild\lib\main.js:1046:63)
frontend | at buildResponseToResult (C:\projects\productlead.me\shopify\productlead-galleries\web\frontend\node_modules\esbuild\lib\main.js:1264:7)
frontend | at C:\projects\productlead.me\shopify\productlead-galleries\web\frontend\node_modules\esbuild\lib\main.js:1377:14
frontend | at C:\projects\productlead.me\shopify\productlead-galleries\web\frontend\node_modules\esbuild\lib\main.js:678:9
frontend | at handleIncomingPacket (C:\projects\productlead.me\shopify\productlead-galleries\web\frontend\node_modules\esbuild\lib\main.js:775:9)
frontend | at Socket.readFromStdout (C:\projects\productlead.me\shopify\productlead-galleries\web\frontend\node_modules\esbuild\lib\main.js:644:7)
frontend | at Socket.emit (node:events:527:28)
frontend | at addChunk (node:internal/streams/readable:315:12)
Tried:
- Removed package-lock.json (from root folder, web folder and frontend folder)
- Removed node-modules folder (from root folder, web folder and frontend folder)
- Run npm i in all root folder, web folder, frontend folder
- Reinstalled all node-modules for @Shopify/cli@3.3.3, after for @Shopify/cli@3.8.0
Thanks,
Solved! Go to the solution
This is an accepted solution.
I found where the bug was, the solution was to not use GraphQLClient on frontend react side, and use it only on node side by calling a REST API, therefore executing the mutation, although I'm still getting errors on creating the web pixel extension, it's in that shell script saying dirname missing arugment after ")". Further will search and open another thread on this case.
THE ANSWER: DO NOT USE GRAPHQLCLIENT and Shopify imports on frontend side as it doesn't find the modules for GraphQL.
This is an accepted solution.
I found where the bug was, the solution was to not use GraphQLClient on frontend react side, and use it only on node side by calling a REST API, therefore executing the mutation, although I'm still getting errors on creating the web pixel extension, it's in that shell script saying dirname missing arugment after ")". Further will search and open another thread on this case.
THE ANSWER: DO NOT USE GRAPHQLCLIENT and Shopify imports on frontend side as it doesn't find the modules for GraphQL.
This is really unfortunate. We spent a good chunk of time trying to fix the pg-native problem so we could use GraphQL from the embedded app generated from Shopify CLI version three. It would be nice to see a solution. GraphQL really belongs on the front-end as well as the back-end.
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024