👍 parcel.js 👎 webpack [2:13pm]

[frankcollins3]

attempting to do: switching to parcel after dev mode worked with webpack and prod mode in webpack doesn't. Puppeteer and GraphQL calling for deps to be installed with: npm i ${module} --legacy-peer-deps

error: localhost:1234 provided by parcel shows a blank page. dist folder created successfully. index.html created in main root

proposed approach: web dev simplified tutorial: (also learned GraphQL from his 40 minute GraphQL express vid [no affiliation] ) https://www.youtube.com/watch?v=DblzpCoPakw

[frankcollins3]

fun fact SCSS needs compiler. Ive set up before but has taken few hours if problem. The only reason I didn't do that was because I had to learn GraphQL and puppeteer kind of quickly.

npm i node-sass and not reading it and finding issues on github about sass come to recall. Parcel might be the thing that takes a few hours to set up anyways and then SASS is ready to go & can update whole app.

[2:19pm]

[frankcollins3]

iterm npm run dev:

npm ERR! fill_cont@1.0.0 client: parcel public/index.html

[0] Drink up on Port: 5000
[1] Server running at http://localhost:1234
🚨  No entries found.
[1]     at Bundler.bundle (/Users/medium/Desktop/fill_cont/node_modules/parcel-bundler/src/Bundler.js:275:17)
[1]     at async Bundler.serve (/Users/medium/Desktop/fill_cont/node_modules/parcel-bundler/src/Bundler.js:842:7)
[1]     at async Command.bundle (/Users/medium/Desktop/fill_cont/node_modules/parcel-bundler/src/cli.js:241:20)
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! errno 1
[1] npm ERR! fill_cont@1.0.0 client: `parcel public/index.html`
[1] npm ERR! Exit status 1
[1] npm ERR!
[1] npm ERR! Failed at the fill_cont@1.0.0 client script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1]
[1] npm ERR! A complete log of this run can be found in:
[1] npm ERR!     /Users/medium/.npm/_logs/2023-07-03T18_24_17_320Z-debug.log
[1] npm run client exited with code 1

npm run dev but changed path from [public/index.html] to [client/public/index.html]

[0]
[0] > fill_cont@1.0.0 server /Users/medium/Desktop/fill_cont
[0] > nodemon --quiet server
[0]
[1]
[1] > fill_cont@1.0.0 client /Users/medium/Desktop/fill_cont
[1] > parcel client/public/index.html
[1]
[0] Drink up on Port: 5000
[1] Server running at http://localhost:1234
🚨  /Users/medium/Desktop/fill_cont/client/public/index.html: URI malformed
[1]     at decodeURIComponent (<anonymous>)
[1]     at HTMLAsset.resolveDependency (/Users/medium/Desktop/fill_cont/node_modules/parcel-bundler/src/Asset.js:94:22)
[1]     at HTMLAsset.addURLDependency (/Users/medium/Desktop/fill_cont/node_modules/parcel-bundler/src/Asset.js:119:38)
[1]     at HTMLAsset.processSingleDependency (/Users/medium/Desktop/fill_cont/node_modules/parcel-bundler/src/assets/HTMLAsset.js:99:26)
[1]     at /Users/medium/Desktop/fill_cont/node_modules/parcel-bundler/src/assets/HTMLAsset.js:187:43
[1]     at traverse (/Users/medium/Desktop/fill_cont/node_modules/posthtml/lib/api.js:105:26)
[1]     at traverse (/Users/medium/Desktop/fill_cont/node_modules/posthtml/lib/api.js:111:5)
[1]     at traverse (/Users/medium/Desktop/fill_cont/node_modules/posthtml/lib/api.js:105:17)
[1]     at traverse (/Users/medium/Desktop/fill_cont/node_modules/posthtml/lib/api.js:111:5)

no success but the error changed: 🚨 /Users/medium/Desktop/fill_cont/client/public/index.html: URI malformed

[2:27pm]

checking if this is the problem. 👎

[2:36pm] 👍 server now compiles but it shows a blank page [2:38pm]

[frankcollins3]

project scope to show the path to public/index.html (have to be in cd client cant do it from the main root w/o client/public)

[2:30pm]

[frankcollins3]

human error: npm i parcel 2.0.1 https://www.youtube.com/watch?v=U7CQE1TFMkg

while I'm trying to fix versioning issues for npm i parcel-bundler 1.12.0

parcel !== parcel-bundler This issue is about preparing process.env variables to client-side at time of build I believe I need parcel-bundler

[3:02pm]

• • • accidental closing and reopening of issue below * [3:03pm]

[frankcollins3]

npm update [3:26pm]

from update:

• concurrently@8.2.0
• dotenv@16.3.1
• sass@1.63.6
• graphql@16.7.1
• prisma@4.16.2
• typescript@5.1.6
• @prisma/client@4.16.2 updated 10 packages and audited 404 packages in 37.531s

[3:27pm]

[frankcollins3]

adding a resolutions object with a path key that dealt with browserify solved the below pictured terminal-returned error

  "resolutions": {
    "path": "browserify:path"
  },

[3:49pm]

this brings us to the next comment box: another issue: now everything bundles, with 👍 "water-drop"favicon.ico but the app doesn't render. its just white space

dont need img of problem: can look to L | Right of this comment box, plenty of white space, thats what app looks like

before there was an issue with the manifest: line 8 index 1 or so. line 8 for sure atleast.

👍 now there is no such error in the console.log() just that the app isn't rendered

[3:52pm]

[frankcollins3]

thanks to chatGPT: app.locals (react-express + ejs + sequelize + psql flashbacks)

might do app.locals to get these .env variables ready for definition on the clientside.

Setting up webpack or parcel, it seems, was better off when setting up GraphQL and redux [4:10pm]

[frankcollins3]

wave white flag or postponing the next approach solving the issue by other means of sending env variables through res.send() route of server/index.js

thats the only reason I needed parcel or webpack at all just the .env variables. [5:39pm]