The parcel command seems to be inactive and is not registered as a valid command

After successfully installing Parcel using npm, I created a package.json file with the following content:

{
    "name": "example",
    "version": "0.1.0",
    "source": "src/index.js",
    "main": "dist/index.js",
    "scripts": {
        "build": "parcel build"
    },
    "devDependencies": {
        "parcel": "^2.0.1"
    }
}

Despite following the instructions on the website, running npm run build results in the message:

Debugger attached. Waiting for the debugger to disconnect...

The command prompt returns without creating or modifying any files. Additionally, the terminal doesn't recognize the parcel command. Reinstalling Parcel did not resolve this issue.

I managed to achieve some progress by using npx parcel build src/index.js, although the behavior seemed peculiar. It appeared to reinstall Parcel and left behind a .parcel-cache folder in my directory. The output JS file had its global variable replaced with a string of numbers as the name. Moreover, after running the npx command, the terminal becomes unresponsive. Is this normal?

javascriptnpmminifyparceljs

Answer №1

It seems like you're encountering two issues - one with correctly installing Parcel and another with getting unexpected output when running it. As for the installation problem, I personally couldn't replicate it using the provided configuration, and I don't have any additional suggestions beyond what Jos Faber has already recommended in their response.

Regarding the second issue - when executing npx parcel, you anticipate receiving minified output but are not seeing it. This is due to the presence of the "source" and "main" fields in your package.json. These fields are meant for use by developers creating npm packages intended for consumption by other projects rather than direct deployment to the browser. Typically, you would not want to minify your distributed library code as it may hinder users' ability to debug, tree-shake, and minimize their applications. Therefore, Parcel does not perform this optimization by default. Refer to the Parcel documentation:

Optimization is enabled during production builds by default (parcel build), except for library targets [emphasis added].

If you are developing a web application, consider removing the "source" and "main" from your package.json file and adjust your CLI command to parcel build src/index.js (by default, Parcel will place the output in a dist folder, but you can customize this using the --dist-dir CLI flag).

In case you actually need to minify a library, you can achieve this by configuring targets in your package.json:

{
  ...
  "targets": {
    "main": {
      "optimize": true
    }
  }
}

Answer №2

After implementing your provided example, everything is functioning as intended. In order to troubleshoot further, it may be beneficial to delete the entire node_modules folder and then reinstall using npm i.

For a clean test, make sure to close all browser windows. There could be lingering debugging tools open in browsers like Chrome that are affecting the outcome.

Additionally, if parcel was not installed globally with the -g flag, the command line interface may not recognize it properly. In this case, the script execution might be the only viable option.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to effectively manage Mongoose Query Exceptions in Express.js

Let's imagine a scenario where I need to execute a Mongoose query in an Express post route: app.post("/login",(req,res)=>{ const username = req.body.username const password = req.body.password User.find({username:username},(er ...

javascriptmongodbrestexpressmongoose

Can ngFor be utilized within select elements in Angular?

I'm facing an interesting challenge where I need to display multiple select tags with multiple options each, resulting in a data structure that consists of an array of arrays of objects. <div class="form-group row" *ngIf="myData"> <selec ...

javascripthtmlangulartypescript

Problem with Pathjs routing

Can anyone help with this routing issue I'm having? Path.map("/(:page_1)(/:page_2)/").to(funct); The route is not matching for: /projects/index2/ It matches /anything, but not /anything/anything If you have any ideas, please share! ...

javascriptjqueryhtmlhtml5-historypath.js

Error MSB4148: Configuration issue with HKEY_LOCAL_MACHINESOFTWAREMicrosoftMSBuildToolsVersions4.0 due to empty content

Attempting to install electron-chromedriver using yarn, I ran the following command: yarn add --dev electron-chromedriver --network-timeout 100000 However, it resulted in the following error message: MSBUILD : Configuration error MSB4148 "HKEY_LOCAL_MACHI ...

node.jsvisual-studionpmvisual-c++electron

What steps can be taken to effectively build a test suite architecture using Jest?

After exploring all the available resources on the Jest documentation website, including various guides and examples, I have yet to find a solution to my specific question. I am in search of a methodology that would enable me to individually run test case ...

javascriptnode.jstypescriptunit-testingjestjs

Tips for triggering functions when a user closes the browser or tab in Angular 9

I've exhausted all my research efforts in trying to find a solution that actually works. The problem I am facing is getting two methods from two different services to run when the browser or tab is closed. I attempted using the fetch API, which worke ...

javascriptangulartypescriptevent-handling

Is there a way to connect either of two distinct values in Angular?

Looking to assign the data with two possible values, depending on its existence. For instance, if I have a collection of TVs and I want to save the "name" value of myTVs[0] and myTVs[1]. For example: var myTVs = [ { "JapaneseTV": { ...

javascriptangularjs

Struggling to make vue-i18n function properly with nuxt generate?

In an effort to enhance my skills, I am creating a small Nuxt project from scratch. While the project runs smoothly on the local server, I have encountered an issue with the language switcher not updating the translation fields when using nuxt generate. U ...

javascriptvue.jsinternationalizationnuxt.jsvue-i18n

Can you please explain the meaning of this statement in JavaScript/Node.js with regards to the importance of the => operator and the async and await keywords being used here?

(1) This snippet of code is used to hash a password, but the syntax may be unclear. Why does it utilize async and await in this manner? And why doesn't the => symbol seem to define a function? const hashPassword = async password => await bcrypt ...

javascriptnode.jsasynchronous

Converting user IDs to usernames in discord.js

I'm currently developing a bot and I want to implement a feature where every time a command is used, it logs the action in the console. Here's the code snippet I've been working on: console.log(message.author ++ ,`used the comman ...

javascriptnode.jsdiscorddiscord.js

Npm command is not available on Intel Galileo gen 2 running on Linux 3.8.7 standard version

I'm currently using the Intel Galileo gen 2 board with Linux galileo 3.8.7-yocto-standard image, but I am unable to use the npm command on this system. Whenever I try: npm -v npm: command not found I have also attempted: which npm However, no outp ...

node.jslinuxnpmintelintel-galileo

Is it possible to resize an object using JavaScript?

Is it possible to change the size of an object when loading specific data by clicking on navigation? <object id="box" width="250" height="250" data=""></object> Although the JS code loads the data, it does not change the size. document.getEl ...

javascriptjqueryhtmlcss

Could the php function json_encode() be a security risk if used within a script tag?

A while back, I had read OWASP's XSS Prevention Cheat Sheet and created a wrapper function that included JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_HEX_AMP by default to ensure safety. However, a user on Freenode/##php pointed out that this approac ...

javascriptphpxssjson

Unable to switch the text option

[Fiddle] I'm currently working on a project where I want pairs of buttons to toggle text by matching data attributes. While I can successfully change the text from "Add" to "Remove" on click, I am facing an issue with toggling it back to "Add" on the ...

javascriptjqueryhtml

Encountering a problem in Angular 2 when initiating a project

I recently started learning Angular 2. I set up my project and attempted to launch it using npm. Initially, everything was working smoothly, but after a few days, when I tried to start it again, an error appeared in the command prompt. SyntaxError: Unexpe ...

angularnpm

SyntaxError: An unidentified item was encountered at the <head> location

I have encountered an issue while loading a PHP file that utilizes ajax. Initially, the page loads without any errors. However, upon triggering the onclick event on a button, I receive the error message "Uncaught SyntaxError: Unexpected identifier" pointin ...

javascriptphphtmlajax

Regarding passing input into a JavaScript class method that is exported through the exports keyword

The inquiry at hand relates to ExtendScript code, however, I believe it should be independent of any specific javascript implementation. If we have the following in a JS library file (base64.js) exports.encode64 = encoder('+/'); //... function ...

javascriptnode.jsextendscript

How to assign a single value to multiple variables at once using a Windows batch script

I attempted to accomplish the following (refer to build:dev): https://i.stack.imgur.com/qLi2c.png I also tried: set var1=a && set var2=b Unfortunately, none of these methods seemed to work. Can anyone provide guidance on how to achieve this? ...

windowsbatch-filenpm

Using JQuery to Refresh a Div and Trigger an API Call with a Click Event

Currently, I am working on developing a web application that generates random quotes dynamically. Using JQuery, I can successfully make an API call and retrieve JSON data to display a quote. To allow users to fetch new quotes with the click of a button, I ...

javascriptjqueryjsonajaxapi

Creating interactive JavaScript elements that can be moved around within a container

I recently faced a challenge while attempting to make draggable elements within a div. The issue arose when I realized that I couldn't figure out how to drag each element individually without affecting the others. My current code only allows for handl ...

javascripthtmljquerydrag-and-dropdraggable