Error when installing parcel-bundler - Lesson 42 Part 3

HTML/CSS
1

Hello everyone.
This is not my code, since I’ve already solved the problem and my terminal was cleared when restarting the app. However, I am posting this here because I think someone else will come across the same problem at some point.

The code I am pasting here came from: node throws errors when trying to install parcel · Issue #5323 · parcel-bundler/parcel · GitHub

PROBLEM: You will see the error as follows: (Read solution after this code below)

npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm ERR! code 1
npm ERR! path C:\Users\admin\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\deasync
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c "node ./build.js"
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp info using node@15.1.0 | win32 | x64
npm ERR! gyp info find Python using Python version 3.9.0 found at "C:\Python39\python.exe"
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
npm ERR! gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:74:16
npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:351:14)
npm ERR! gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:70:14
npm ERR! gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:372:16
npm ERR! gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:316:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:327:20)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1055:16)
npm ERR! gyp ERR! System Windows_NT 10.0.18363
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd C:\Users\admin\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\deasync
npm ERR! gyp ERR! node -v v15.1.0
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok
npm ERR! Build failed

SOLUTION:
Install the latest version of Visual Studio 2019, including the workload C++ and the vs_BuildTools with C++
I had to try this several times because I selected Desktop development with C++ and that was not enough. So, I was trying several installations until it worked. This is what I install, regardless if it is completely necessary or not… this made it work to me:

Workloads:

  1. ASP.NET and web development
  2. Python Development (I already had installed the latest version of Python, however, I installed the option here just in case, according to the errors I got.
  3. .NET desktop development
  4. Node.js development
  5. Desktop development with C++
  6. Mobile development with C++

Visual Studio Build Tools 2019:

  1. Desktop development with C++
  2. Web development build tools
  3. Node.js build tools

I hope this solves most of the problems regarding the installation when writing
npm i -D parcel-bundler

:slightly_smiling_face:

2

[SOLVED ALREADY]“Parcel is not working” after installed…
This is solved. This is only another issue I encountered after solving the first part explained above.

After very much reading today, I came to the conclusion that Parcel works pretty well on Macs because Macs have a very different security system compared to Windows. The thing is Windows will not allow you to run Parcel’s scripts or any other script the way Mosh is explaining in lesson 42, part 3 unless you grant the permissions to do that.

These are the steps to make it run on Windows… Please read until the end BEFORE you execute any command… The idea is you make the right decision for your case…

1) One way to solve it…
Windows will not allow you to run a global execution of Parcel unless you grant permissions using PowerShell, making then your computer vulnerable to some attacks because you will need to gran permissions base on some rules Microsoft has established already. If you know what you are doing and you want to try this way, you will need to follow the instructions provided by Microsoft: about Execution Policies - PowerShell | Microsoft Docs. By changing these policies, the code Mosh is explaining should run.

2) The way I solved it:
2.a) Execute the following in your VS Code terminal:
npm install parcel-bundler --save-dev
This will install the parcel-bundler locally in your project.
At this point, you may encounter a huge critical list of errors which the last line of errors says the following: “npm ERR! Build failed”. If this is the case, please, read above (first part of this post) to learn how to fix the errors (I had those errors).

2.b) If instead of this huge list of errors, you just have a report of vulnerabilities or critical vulnerabilities, run
npm audit fix
to fix any critical vulnerability. This will only fix the critical but not the moderate. I do not know at this very moment how to solve the moderate ones.

2.c) You will have now a file in your project called “package.json”. Open it. The original 6th line is like this one:
"scripts": {
"test": "echo “Error: no test specified” && exit 1"
},
modify that portion for this one:
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev”: “parcel index.html”
},
where parcel is the command and index.html is the “point of entry of your website”. In the project, in lesson 42 Part 3, it is index.html.
Save the file with the new changes.

2.d) Now execute the following in your VS Code terminal:
npm run dev

At this point, if there is an error in your website, or a file is missing for any reason, the parcel server will not load. To stop the local server, you will need to press Ctrl + C. It will ask you to confirm if you want to exit.
Fix whatever was reported and then execute the server with step 2.d again. Your website will run.

Hope this helps!
:slightly_smiling_face:

1 Like
3

To run the build…
change the scripts in package.json to:
"scripts": {
"test": “echo “Error: no test specified” && exit 1”,
"dev": “parcel index.html”,
**“build”: “parcel build index.html” **
},

Then, run npm run build

4

Good Day i am new quite new to Front-End Development (only doing HTML and CSS from Mosh) and all these technical stuff, and severely struggling with the Parcel-Bundler setup in Part 3 lesson “Building for Production”. I get exactly the same error as above but where do i get these “Workloads” and “Build Tools” (is this Software that needs to be installed?) and how do i activate it in VS Code. Sorry if i am asking a silly/stupid question, but i am struggling to get past this “Parcel-Bundler” hurdle. I am even ready that allow someone to just log into my pc with Teamviewer and show me what needs to be done. If someone can help please advise, it will be greatly appreciated.

6

Hi, have you gotten a solution to this yet? fix this by installing Python on my machine and it works fine

7

npm update will solve the issue.

This isn’t really a Parcel issue directly, we got rid of deasync in Parcel 2 for this reason as well as it not being totally reliable and slower than standard synchronous code. We can’t easily get rid of it in Parcel 1 though as it would require a pretty large refactor. Hopefully we can release a stable Parcel 2 soonish Source

So the solutions are

Downgrade node, fix deasync or upgrade to parcel 2

8

I was struggling with this for a while and tried all options, but came to the conclusion that easiest solution is downloading Microsoft Visual Code (with the node, c++ and other relevant components) and then restarting Visual Code Studio and using it.