search

rvanasa / vite-react-motoko

Starter project for Vite + React + TypeScript + Motoko
https://gitpod.io/#https://github.com/rvanasa/vite-react-motoko
46 stars 28 forks source link

When deploying Frontend canister is not rendering my App.tsx file #2

Closed ViktorArg closed 1 year ago

ViktorArg commented 1 year ago

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"

RenderError

Any recommendation? Thank you!

rvanasa commented 1 year ago

Thanks for the bug report! Did you run npm run setup before starting the server? This error usually happens when the JS server was started before the project finished deploying to the dfx replica.

ViktorArg commented 1 year ago

Yes I did run: dfx start --clean --background npm run setup npm start

The project start correctly in http://localhost:3000/ but when I run dfx deploy the frontend canister show that error also when going out to production with dfx deploy --network ic

rvanasa commented 1 year ago

The relevant logic is in /vite.config.js in case this helps with debugging. dfx also recently upgraded to 0.14.0, so this might be introducing a bug with the starter project.

If necessary, you could use the online GitPod environment to make progress until we find what's causing this error.

ViktorArg commented 1 year ago

Problem solved! I delete these folders: .dfx, .mops, dist, node_modules and these files: .env and package-lock.json.

Then I did again:

Now everything works fine, I think there was some issue with the some dependency that caused a wrong initial set up.

Thank you!

rvanasa commented 1 year ago

Glad you found a solution! Definitely let me know if you run into any other issues.