I was surprised to find something other than a gulp folder in the node_modules directory after running npm install gulp --save-dev

Seeking some guidance on my process - can someone point out if I am making a mistake?

  1. Downloaded Node from their official website
  2. Global installation of Gulp (npm install --global gulp)
  3. Created a folder and initiated it by running (npm init), which generates the package.json file
  4. Installed gulp for the project (npm install --save-dev gulp)

This action adds gulp as a dependency in the package.json file and creates a node_modules folder.

I was under the impression that only a gulp folder would be visible inside the node_modules directory like this:

| node_modules
|-- gulp

However, unexpectedly, about 132 additional dependency folders are being added. Is this normal? Shouldn't these be contained within the gulp folder itself?

  • Operating system: Mac OS, Node version: 5.2.0, NPM version: 3.3.12, Gulp version: 3.9.0

Answer №1

npm started a new trend with version 3 by organizing dependencies directly in the node_modules folder.

With this update, your dependencies will be installed in a flat structure whenever possible. This means that all dependencies (as well as their dependencies and so on) will reside in the project's node_modules directory without nesting. Nesting only occurs when there are conflicting dependencies between two or more modules.

For more information, check out:

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

Unable to load the requested resource: net::ERR_FAILED

I am facing an issue while trying to write React code. When using Chrome, I encountered the following warning: Access to XMLHttpRequest at 'file:///D:/programe/code/Vscode/ReactDemo/HelloWorld/test.js' from origin 'null' has been block ...

modifying CSS of a div element on a designated page position

A unique code snippet that I have positions a button fixed to the top of the page, causing it to overlay content or images as the user scrolls the page. HTML <div id="btn">button</div> ... images ... ... content ... CSS #btn { positio ...

Travis had a setback with his push, but he successfully passed the

Why did Travis report a build failure for the latest push but passed the Pull Request? In this Gist, you can access the output logs for both the failed and successful executions of the npm run build command provided by Travis. The configuration details of ...

Encountering error ORA-12514 when utilizing the node oracle-db npm package

At the moment, I am immersed in a project that relies on utilizing oracle for its backend. Following the instructions provided in this link, I successfully installed node-oracledb on my Mac using npm. The contents of my file are as follows: var oracledb = ...

Steps for permanently closing dismissible alerts in Bootstrap 4

On my MediaWiki site, my goal is to display a bootstrap 4 alert for new visitors on specific pages, and have it stay permanently dismissed after it is closed. The alert will be transcluded to multiple pages, but once dismissed, it should not reappear on an ...

Scrolling down within a Bootstrap modal

I'm working on a bootstrap modal and looking to implement a scroll down feature upon button click: <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> ...

Navigating to Cordova directory following installation via NPM

I just completed the command: npm install -g cordova What should I do next? Where can I find the cordova.cmd file? And where is the content that was downloaded by this command? I have searched in C:\Program Files\Nodejs but couldn't find ...

"Troubleshooting: Sub-routes in AngularJS not displaying when directly typing in the

My AngularJS setup is configured to use HTML5 routes and it functions perfectly on urls like website.com/foo. However, I am facing an issue when creating routes for subpages, such as website.com/foo/bar. In this case, the correct page only appears when c ...

Exporting Data in ReactJS

Hey there, take a look at the code snippet provided: import React, { Component } from 'react'; let ok; class Mydata extends Component { constructor() { super(); this.state = { rif: [{ "instituteName": ...

The best way to provide options for dependent package installations in npm

My project using node.js depends on node-sqlite, but the default libsqlite binary included does not have the necessary options. To ensure that it builds correctly, I can run npm install on the package with specific flags: CFLAGS=-DSQLITE_ENABLE_STAT4 npm ...

An error occurs when trying to load data into a grid upon clicking, resulting in an Uncaught TypeError: Unable to access properties of undefined (specifically 'dataState')

I have implemented a grid in React using a specific library, and I want to populate the grid with data fetched from an API call when the user clicks on a button labeled Fetch Products. However, I encounter an error during debugging: Uncaught (in promise) T ...

What is preventing ColladaLoader.js in Three.js from loading my file?

Recently, I decided to experiment with three.js and wanted to load a .dae file called Raptor.dae that I obtained from Ark Survival Evolved. Despite having some web development knowledge, I encountered an issue when trying to display this particular file in ...

Dynamic CSS manipulation with jQuery: Generate and access styles on the fly

I am working on an application where I am utilizing jQuery along with maphilight for highlighting image map segments. In addition to this functionality, I want to dynamically highlight specific HTML elements based on mouseover/mouseout events for the image ...

A child component in Vue.js unexpectedly starts updating when the parent component renders and uses object literals as props

I'm currently facing an issue with my Vue components where object literals are passed as props like: <child :prop1="{ foo: 'bar' }"></child> After rerendering the parent component, the prop prop1 changes and triggers an update ...

Using framer-motion with Next.JS ensures that content remains consistent during navigation

I added a Link on my homepage that connects to the About Us page: <Link href="/about"><a>About us</a></Link> In my _app.js file, there is an AnimatePresence wrapper: <AnimatePresence exitBeforeEnter> <Component {...p ...

Meta tags in React not functioning as expected on Facebook platform

I recently cloned the app from https://github.com/alanbsmith/react-node-example and attempted to incorporate the react-helmet library. While inspecting the browser, I noticed that the meta tags were present. However, when I tried sharing the URL on Faceboo ...

Tips for retrieving the tenth document in Firestore Query using JavaScript

Specifically, a selection of the arranged files. Here's my thought, although I know it can be improved: firestore().collection("queue").orderBy("order_id", "asc").limit(3,5) If anyone has a better solution, I would appre ...

An array of size 10x10 where each new array replaces the previous one

I'm currently working on a function that generates a 10 by 10 array filled with random D's and E's. Below is the code snippet: function generateTenByTenArray(){ var outerArray = []; var innerArray = []; for(var i = 0; i < 10 ...

Launching Toasts with Bootstrap 4

I've been working with toasts in Bootstrap 4 and one thing has been bothering me: When I initialize the toast like this: <div class="toast my-3" data-delay="2500"> <div class="toast-header text-dark"> //fill this later &l ...

During the deployment of a ReactJS app, webpack encounters difficulty resolving folders

While developing my ReactJS app, everything ran smoothly on localhost. However, I encountered some serious issues when I tried to deploy the app to a hosting service. In my project, I have a ./reducers folder which houses all of my reducers. Here is the s ...