Help needed with Introducing a complete toolchain

Hi there.

I have been working my way through the client-side web development tools course and I have come a cross a problem in the “Introducing a complete toolchain” section.

I went on step by step with the guide but in the end when i was trying to use parcel to build my app using npx parcel build src/index.html in the terminal, i keep getting an error:

can anyone help me with this problem? i have tried to go through the steps again to see if i made a mistake somewhere but i got the same result again.

any help is much appreciated. thanks!

Hello @Ali_Servat

i read this topic once but did not used it https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain

so i have no experiance but i will try
did you follow those steps

  • Add a single file called .postcssrc to the root of your project directory.
  • Add the following contents to the new file, which will automagically give us full access to the latest CSS features:

and are you sure follow each step ?

and if nothing help here then google is your friend or try to look in https://stackoverflow.com

sorry for not able to help and have a nice day :slight_smile:

hey @justsomeone thanks for responding.

in regards to your question i should say yes i did add those files along with all of their configurations that was mentioned.

i also tried googling but i couldn’t find much help besides using --no-minify flag with the command but that just gave me the same result so i’m kinda stuck and don’t know what else i can do to fix this problem.

you very welcome @Ali_Servat

then i guess this https://parceljs.org/docs/ where you could learn more about parcel as the mdn resource is just an intro and just to let you know about the tools that exist to help you

and have a nice day :slight_smile:

Hi @Ali_Servat

I tried the simple steps below and it works on my side.

  1. Add type="module" to <script> tag in index.html

  2. Change SVGs path in the index.css, see the screenshot

  3. Go to your package.json, if there is "main": "index.js" line, you can just remove this line and test again.

Hope it helps!

2 Likes

thanks @cchqy for the help :slight_smile:

Hi there @cchqy

Thanks for your reply. I implemented the changes you mentioned but sadly it’s still giving the same error :frowning:. i think it has to do something with the postcss that is used.

Hi,

There are 4 SVG paths in index.css, try to change them all, also try to delete the .parcel-cache folder in your current project folder and run test again.