rvanasa / vite-react-motoko Goto Github PK

I am getting this error when I click on the "count" button:

16:30:17 [vite] http proxy error at /api/v2/canister/rrkah-fqaaa-aaaaa-aaaaq-cai/call:
Error: connect ECONNREFUSED ::1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) (x4)

and this error in the console:

index.ts:514 GET http://localhost:3000/api/v2/status 500 (Internal Server Error)
Unable to fetch root key. Check to ensure that your local replica is running

The project is deployed and running.

When installing this project, there is a pervasive error that is extremely difficult to fix for Apple Silicon. I have consulted multiple people in the ICP dev community and nobody was able to give a solution. When researching this issue no solutions I found online were helpful.

npm run setup

Setting up a project using a webworker I ran into an issue that the window wasn't defined for global when the webworker was created.

To resolve, I dropped the global global: 'window', from define and instead used:

  define: {
-   global: window,
    'process.env.DFX_NETWORK': JSON.stringify(process.env.DFX_NETWORK),
    // Expose canister IDs provided by `dfx deploy`
    ...Object.fromEntries(
      Object.entries(canisterIds).map(([name, ids]) => [
        `process.env.${name.toUpperCase()}_CANISTER_ID`,
        JSON.stringify(ids[network] || ids[localNetwork]),
      ]),
    ),
  },
+ optimizeDeps: {
+  esbuildOptions: {
+     // Node.js global to browser globalThis
+    // Required for worker to work.
+   define: {
+      global: 'globalThis',
+  },
+ },
  },

as part of the vite config.

Hello,
I created a project using this template, running all the commands in the readme, it seems to work fine but my frontend application is not rendering when deploying the frontend canister neither in local or ic, even though, npm start is rendering everything ok in http://localhost:3000/. It seems to be something with the config setting the canister id.

I'm working in a pc windows with the wsl.
Node version: v18.16.0
npm: 9.5.1
dfx: 0.14.0

This is my frontend canister in the ic https://3ejf7-5iaaa-aaaal-qb3pq-cai.icp0.io/

Shows this error in the inspect Console:
dex.7930dc05.js:73 Uncaught ReferenceError: process is not defined
at index.7930dc05.js:73:4407
(

Then going into the error (I can't find this in the code):
canisterId = process.env.CANISTER_ID_BACKEND || "gn5qg-saaaa-aaaal-qbzia-cai"

Any recommendation?
Thank you!

Just a heads up that I had to change the target here from 4293 to 8080 on my local machine. Maybe I messed with something in my global file or maybe this is focused on gitpod...not sure but documenting it in case anyone else runs into it.

server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
},
},
},

afat@virusbook sample % npm start

[email protected] start
run-p frontend backend

[email protected] backend
mo-dev --generate --deploy -y

[email protected] frontend
vite --port 3000

VITE v4.3.9 ready in 5214 ms

➜ Local: http://127.0.0.1:3000/
➜ Network: use --host to expose
➜ press h to show help
1:23:33 PM [mo-dev] prepare backend
Deploying: backend
All canisters have already been created.
Building canisters...
Installing canisters...
Creating UI canister on the local network.
The UI canister on the "local" network is "be2us-64aaa-aaaaa-qaabq-cai"
Installing code for canister backend, with canister ID bkyz2-fmaaa-aaaaa-qaaaq-cai
Deployed canisters.
URLs:
Frontend canister via browser
frontend: http://127.0.0.1:8080/?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai
Backend canister via Candid interface:
backend: http://127.0.0.1:8080/?canisterId=be2us-64aaa-aaaaa-qaabq-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai
Building canisters before generate for Motoko
WARN: .did file for canister 'frontend' does not exist.
Generating type declarations for canister frontend:
src/declarations/frontend/frontend.did.d.ts
src/declarations/frontend/frontend.did.js
src/declarations/frontend/frontend.did
Generating type declarations for canister backend:
src/declarations/backend/backend.did.d.ts
src/declarations/backend/backend.did.js
src/declarations/backend/backend.did
Deploying all canisters.
All canisters have already been created.
Building canisters...
Building frontend...
WARN: node_modules/js-sha256/src/sha256.js (83:17) Use of eval in "node_modules/js-sha256/src/sha256.js" is strongly discouraged as it poses security risks and may cause issues with minification.
node_modules/js-sha256/src/sha256.js (84:17) Use of eval in "node_modules/js-sha256/src/sha256.js" is strongly discouraged as it poses security risks and may cause issues with minification.

Installing canisters...
Module hash fa4c7f21d59f2aa217d904f31261e4f64b010493972acc3d87b854541607025d is already installed.
Installing code for canister frontend, with canister ID bd3sg-teaaa-aaaaa-qaaba-cai
Uploading assets to asset canister...
Fetching properties for all assets in the canister.
Starting batch.
Staging contents of new and changed assets in batch 1:
/assets/index-f027b18a.css (gzip) 1/1 (821 bytes) sha 669d095dd3fd30f8607e82f4f9b510e32d73e605993aaa324adf63323a279c85
/assets/vite-4a748afd.svg 1/1 (1497 bytes) sha 4a748afd443918bb16591c834c401dae33e87861ab5dbad0811c3a3b4a9214fb
/assets/index-f48f6bec.js (gzip) 1/1 (131077 bytes) sha ea2aa43de08dbe0b81550b40f5224e2ced717bf641074ff34021027e2d2fd176
/assets/motoko_shadow-a1cac2d1.png 1/1 (9965 bytes) sha a1cac2d143248a65d75089b3ecadd1728313658dcc722a94804fddb2ab77ccac
/assets/motoko_moving-ca2e2d9e.png 1/1 (56369 bytes) sha ca2e2d9e94711e8e314e3162b1cfef33e976b6e085997c8de4cf5c803688b516
/assets/react-35ef61ed.svg 1/1 (4126 bytes) sha 35ef61ed53b323ae94a16a8ec659b3d0af3880698791133f23b084085ab1c2e5
/assets/index-518f67e8.js 1/1 (2288 bytes) sha 87fceabb3ad0b0315fa3196b1a9a52214d891c66c9b36054552a6dfec650958a
/assets/favicon-4e8d31b5.ico 1/1 (15406 bytes) sha 4e8d31b50ffb59695389d94e393d299c5693405a12f6ccd08c31bcf9b58db2d4
/assets/index-518f67e8.js (gzip) 1/1 (1044 bytes) sha 5d1006de85f7a0ea9096b68cbf9a5cf057a79dad21e56c331fd1985cd66f139a
/index.html 1/1 (480 bytes) sha cfc501cc37085a35805bc519ae418e6b1c648ac8a4c48befc7d77018861171da
/assets/index-f027b18a.css 1/1 (1782 bytes) sha f027b18a057834d854e656a5775a97be93a273bcc7154ea4d0cf2065a0eda04e
/assets/index-f48f6bec.js 1/1 (380262 bytes) sha 326f4ae4d0d221ed3c1b1843e23c16b149029d9d75cc46ab6f9e91d26cbdff6d
/index.html (gzip) 1/1 (316 bytes) sha 5e36fc4427b17ba877937f1fb5b339e85da86cbbcc9332ec0a58c92f273228f4
Committing batch.
Committing batch with 22 operations.
Deployed canisters.
URLs:
Frontend canister via browser
frontend: http://127.0.0.1:8080/?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai
Backend canister via Candid interface:
backend: http://127.0.0.1:8080/?canisterId=be2us-64aaa-aaaaa-qaabq-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai
1:23:52 PM [mo-dev] generate
1:23:53 PM [mo-dev] deploy backend
1:24:04 PM [vite] http proxy error at /api/v2/status:
Error: connect ECONNREFUSED 127.0.0.1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16)
1:24:04 PM [vite] http proxy error at /api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/query:
Error: connect ECONNREFUSED 127.0.0.1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16)
1:24:04 PM [vite] http proxy error at /api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/query:
Error: connect ECONNREFUSED 127.0.0.1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16) (x2)
1:24:04 PM [vite] http proxy error at /api/v2/status:
Error: connect ECONNREFUSED 127.0.0.1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16)
1:24:04 PM [vite] http proxy error at /api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/query:
Error: connect ECONNREFUSED 127.0.0.1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16)
1:24:04 PM [vite] http proxy error at /api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/query:
Error: connect ECONNREFUSED 127.0.0.1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16) (x2)
1:24:04 PM [vite] http proxy error at /api/v2/status:
Error: connect ECONNREFUSED 127.0.0.1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16)
1:24:04 PM [vite] http proxy error at /api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/query:
Error: connect ECONNREFUSED 127.0.0.1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16)
1:24:04 PM [vite] http proxy error at /api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/query:
Error: connect ECONNREFUSED 127.0.0.1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16) (x2)
1:24:04 PM [vite] http proxy error at /api/v2/status:
Error: connect ECONNREFUSED 127.0.0.1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16)
1:24:04 PM [vite] http proxy error at /api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/query:
Error: connect ECONNREFUSED 127.0.0.1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16)
1:24:04 PM [vite] http proxy error at /api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/query:
Error: connect ECONNREFUSED 127.0.0.1:4943
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16) (x2)

Hi, I'm getting huge cpu drain from dfx when i deploy the setup. Seems ok when I deploy but when I npm start that kicks off the cpu drain. I am using the latest node.