Error encountered during npm installation caused by the extract-text-webpack-plugin

I encountered an error while attempting to install the extract-text-webpack-pluginpm plugin. 

extract-text-webpack-plugin <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f12124c5e495a125b5a495e4f4f7f0f110e110f">[email protected]</a> /home/g/learn/web-app/ema/src/main/app
├─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50352824223133247d243528247d2735322031333b7d203c2537393e10627e617e60">[email protected]</a> 
│ ├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4d5f55424f6c1e021f021c">[email protected]</a> 
│ └── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc90939d98998ed1898895908fbccdd2cdd2cc">[email protected]</a> 
└── UNMET PEER DEPENDENCY webpack@^2.2.0

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e385908695868d9790a3d2cdd2cdd2">[email protected]</a>: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4b5e485b4843595e6d1c031d031c1a">[email protected]</a> (node_modules/react-scripts/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d1c4d2c1d2d9c3c4f7869987998680">[email protected]</a>: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aacfd2ded8cbc9de87decfd2de87ddcfc8dacbc9c187dac6dfcdc3c4ea98849b849a">[email protected]</a> requires a peer of webpack@^2.2.0 but none was installed.

Also attempted this:

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e6fbf7f1e2e0f7aef7e6fbf7aef4e6e1f3e2e0e8aef3eff6e4eaedc3b1adb1adb3">[email protected]</a> --save-dev

No success.

cssnpmwebpack

Answer №1

Seems like you are attempting to install the extract-text-webpack-plugin for webpack2 ( 

UNMET PEER DEPENDENCY webpack@^2.2.0
)

However, since you already have webpack1 installed, you should opt for the extract plugin designed for webpack 1

npm install --save-dev <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4a575b5d4e4c5b025b4a575b02584a4d5f4e4c44025f435a4846416f1e011f011e">[email protected]</a>

Answer №2

These notifications are not errors, they are simply warnings. This indicates that the package has been successfully installed, but you may require another package to ensure its proper functionality. For more information on this topic, refer to npm - peerDependencies.

You can disregard the warnings related to fsevents, as this package is specific to macOS and is used for monitoring file system changes.

However, it is essential to address the unresolved peer dependency of webpack. The latest version of extract-text-webpack-plugin relies on webpack 2 (the initial official release being v2.2.0). If you are currently using webpack 1, there are two options available to rectify this issue. You can either upgrade to webpack 2, which is recommended at this point, although some configuration adjustments may be necessary. Refer to the official Migration Guide for guidance on what modifications are required.

npm install webpack@latest --save-dev

If upgrading to webpack 2 is not feasible or preferred, an alternative approach is to utilize an older version of extract-text-webpack-plugin specifically designed for webpack 1.

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f4e9e5e3f0f2e5bce5f4e9e5bce6f4f3e1f0f2fabce1fde4f6f8ffd1a0bfa1bfa0">[email protected]</a> --save-dev

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

Encountering 404 and 405 errors while trying to connect to Nexus 3 through npm

Scenario Background: After setting up a fresh Nexus OSS 3 installation, I configured a repository to proxy the official NPM repo. Users were added and 'npm Bearer Token Realm' was enabled in the active realms list. The status of the repository i ...

node.jsnpmnexusnexus3

Oh no! AHHH! ENOENT: cannot find the specified file or directory, encountered uv_chdir during the installation process of the

While attempting to set up the node module pocketsphinx, I encountered an error during installation: ERR! OMG ENOENT: no such file or directory, uv_chdir Although I understand what this error means, I'm unsure about how to proceed. For reference, he ...

node.jsnpmpocketsphinx

The CSS styles do not seem to be taking effect on the Bootstrap

Here's a snippet of code extracted from my website's html and css files. My intention is to make the navbar slightly transparent with centered links, but for some reason, the css styles are not applying correctly to the navbar. HTML <body ...

htmlcssbootstrap-4

Creating a collapsing drop down menu with CSS

I utilized a code snippet that I found on the following website: Modifications were made to the code as shown below: <div class="col-md-12"> ... </div> However, after rearranging the form tag, the drop-down menu collapse ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Creating a List Item with Equal Height as Its Parent Container

<nav> <ul id="navUl"> <li> <div class="settingsDiv"> hey </div> </li> </ul> </nav> I am trying to adjust the height of the div element to match the height of the nav. My g ...

htmlcss

What is the best way to align the navbar items in the center?

Is there a way to center the navigation bar elements using Bootstrap? HTML <body> <nav class="navbar navbar-inverse navbar-fixed-top " role="navigation"> <div> <ul class="nav navbar-nav"> ...

htmlcsstwitter-bootstrap

Perform CSS transitions simultaneously

Hey there! I'm currently working on a button that includes a Font Awesome icon at the end of it. To display the icon, I'm using the :after pseudo-element on the button, which is working fine so far. The issue I'm facing is with the CSS tran ...

htmlcssbuttoncss-transitions

Sam's attempt to build ended in failure as a result of the following error: Build Failed Error: NodejsNpmBuilder:NpmPack - NPM Failed: npm ERR!

Currently, I am in the process of learning how to build lambdas on AWS. For guidance, I am utilizing this official tutorial. Here are the commands that I have executed: sam init (using default values for everything and selecting template 8 - webapp backe ...

node.jsnpmaws-lambdaaws-samaws-sam-cli

How to customize GtkEntry in GTK3 with CSS to eliminate the default blue outline?

I've been working on customizing the theme of an application using Gtk3 and Css. I have successfully implemented my desired themes for the widgets by using gtk_widget_set_name and defining names in CSS. However, I am facing an issue with removing the ...

csscgtk3

align the text to the left in the center of the page

.center { margin: 0 auto; display: table; } .center .content { display: table-cell; } These CSS styles are used to center align the container with the class .center, while also keeping its contents (in .content) left aligned: <div class="center" ...

htmlcsstext-align

Struggling to update TypeScript and encountering the error message "Unable to establish the authenticity of host 'github.com (192.30.253.113)'"

While attempting to update my version of TypeScript using npm, I ran into an issue when trying to execute the following command: localhost:Pastebin davea$ npm install typescript/2.8.4 --save-dev The authenticity of host 'github.com (192.30.253.113)&a ...

typescriptgithubnpmsshnpm-install

Expanding the rowspan within a table column has the effect of reducing its overall width

I have created a table with two rows, where the first row has three columns and the second row has two columns. The middle column in the first row has been set to rowspan="2". However, the issue is that it appears smaller than its intended width. .kolon ...

htmlcss

Challenge with aligning tables

I need assistance with aligning the TD tag value to the TH tag value as I am currently experiencing alignment issues. Can someone please help me resolve this problem? I have attempted to fix it on jsfiddle Here is the HTML code: <table class=" ...

htmlcsstwitter-bootstrap

Switching Over to Burger Menu

I created a burger menu using HTML, CSS, and jQuery that switches from a full-width menu to a burger menu. However, I'm facing an issue with toggling the dropdown when the menu collapses. Here's my code: <!DOCTYPE html> <html> < ...

javascriptjqueryhtmlcssmenu

The functionality of the Bootstrap tabbed pane is not functioning correctly

I am currently in the process of creating a modal tabbed pane in bootstrap following the instructions provided in this guide. You can view the code and functionality on this fiddle. $(document).on("click","#tabs a",function(event) { alert("!!!"); ...

javascriptjquerycsstwitter-bootstrap

Clicking on text triggers image display

My journey in coding is just starting and I have a good understanding of the basics of HTML, CSS, Javascript, and jQuery. I am trying to make an image appear when I click on text but struggling with the implementation. I'm working on a restaurant web ...

javascripthtmlcsseventsonclick

Positioning an image/carousel at the bottom of multiple without the need for alignment

I'm in the process of creating a single-page website with sections stacked on top of each other, including a section where divs are stacked both next to and on top of each other. Within this section, there is a container div that holds 5 divs named bo ...

htmlcssbootstrap-5

Automatically close an element when you click on a different element

Hello everyone! I need some help again. I'm working on a script that displays an overlay when a menu item is clicked. Within this menu, there is a modal contact form with a close icon or anchor that should appear when clicked. My goal is to have the o ...

javascriptjqueryhtmlcss

Challenge with adjusting opacity of background when hovering over a box

I've encountered an issue with the background transparency in the following demo. For some reason, it's not working properly. .figure .caption-mask:hover { background: rgba(0, 0, 0, 0.0); } I'm attempting to remove the opacity f ...

css

Limit the maximum height of a list within a fluid-width content container

I came across this link The layout works fine when the elements are limited in the #commentWrapper, but adding more items pushes everything downwards. Copying additional <li>test</li> items clearly demonstrates the issue. I want the input box ...

jqueryhtmlcssheightfluid-layout