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

Having difficulty aligning the container div in the center

I'm trying to create a centered grid of full-width buttons, but for some reason, I just can't seem to get the container centered. Any suggestions? Check out the code here - https://jsfiddle.net/a6qo6tzL/ Thank you! <div class="Wrapper"> ...

htmlcsscentering

Tips for eliminating the ripple effect when clicking on a q-list item

I have managed to create a sleek sidebar with a curved edge that seamlessly integrates into the body of the page. However, I am struggling to remove the semi-transparent ripple effect that appears when clicking on a list item. The current effect clashes ...

cssvue.jsquasar-frameworkquasar

Hidden overflow and identification in URL causes content to be invisible and suddenly appear at the top of the page

I'm encountering a strange issue with containers that have overflow:hidden and when the page URL includes an id. The content gets pushed up and becomes invisible. This problem arises when I apply padding and negative margin at the bottom to create equ ...

javascriptcssoverflowhiddenpage-jump

When node.js is installed, npm -v may encounter an issue and display an error message

After successfully installing node.js on CentOS 6.5, I encountered an issue when trying to test npm -v. [root@localhost ~]# npm -v module.js:340 throw err; ^ Error: Cannot find module 'npmlog' at Function.Module._resolveFilena ...

node.jsnpm

Does the CSS :not() selector function properly when used with distant descendants?

Check out the official documentation for the CSS3 :not() pseudo-class at this link: http://www.w3.org/TR/css3-selectors/#negation Additionally, you may be interested in the proposed enhancement for CSS Selectors Level 4 found here: http://dev.w3.org ...

csscss-selectors

QuickSearch displayed at the center with a floating left alignment

I have been trying to center a QuickSearch div with multiple Q & A sections, but I am having no success. The div is floated to the left and has a background image. HTML <div class="l-row"> <div class="QuickSearch"> <div class="loop"& ...

htmlcss

Expanding the padding of the selected item to create more breathing room

Upon examining the following: https://jsfiddle.net/h8kmove5/27/ Let's say you select 9 at the bottom. The display shows 8 9 10. My intention is to create some additional space on either side of 9, or any other active item for that matter. This way, ...

javascriptjqueryhtmlcssowl-carousel

The alignment of Div elements is off in IE8

I have been struggling to align two divs side by side without any empty spaces on IE 8. Everything looks perfect on Chrome Version 35.0.1916.153 m and Firefox 30.0, but IE 8 seems to be causing some issues. All I want is a main div with two child divs ali ...

htmlcssgoogle-chromefirefoxinternet-explorer-8

Insert item at the end of the box and move all elements upwards

Hello! I'm experimenting with creating something using javascript's createElement method. My goal is to achieve an effect similar to this image: https://i.stack.imgur.com/itKUK.gif Currently, my code is functional, but the animation goes from to ...

javascripthtmlcss

Click and Rotate for More Information

Hello everyone, I have a question regarding creating a unique Tumblr theme. My goal is to make the posts rotate on the y-axis when clicked, revealing like and reblog information. Currently, I've been able to achieve this effect on hover by using code ...

javascriptjqueryhtmlcss

Unveiling the Secrets of Implementing Interactive HTML Tabs

I have a simple HTML page that contains a table with two columns and two rows. My goal is to convert these two columns into tabs, so that when each row is clicked, it will display either a paragraph or another basic table with one row and column. All of t ...

jquerycssajaxhtml

problem encountered while installing npm global packages

I encountered a problem while attempting to install Vue CLI. Operating system: Windows 10, Node version: ~6.10.3 NPM version: ~3.10.10 npm WARN retry will retry, error on last attempt: Error: EBUSY: resource busy or locked, rename 'D:\Users&bso ...

node.jsnpmvue.jsnpm-install

The text in the <p> tag will remain the same color

I am encountering an issue with changing the color in the <p> tags within the code snippet below. Specifically, I am trying to change the TITLE text to gray but have been unsuccessful so far. If anyone could provide assistance on this matter, it wou ...

htmlcsstext

I am experiencing difficulties with my custom font not functioning properly

I've experimented with the following code: @font-face { font-family: Jua; src: url('/fonts/jua.ttf'); } @font-face { font-family: Jua; src: url('..../fonts/jua.ttf'); } @font-face { font-family: Jua; src: url('.../fonts/jua.t ...

cssfonts

I am attempting to properly arrange my navigation links and logo in alignment

I need help aligning the logo in the exact center while keeping the navigation links as they are. Here is how it currently looks: https://i.stack.imgur.com/qOgVJ.jpg My CSS: .logo { display: inline-block; text-align: center; } na ...

htmlcss

Using CSS to enforce a specific height for text by overflowing its parent container horizontally

I have a lengthy phrase that takes up too much space on mobile devices. Here is an example: .artificial-phone-viewport { width: 320px; height: 500px; border: 1px solid darkgrey; } .container { width: 100%; height: 100%; } .text { /* * Do ...

cssoverflow

Develop scaffolding generators similar to react/open-wc using Node.js

My goal is to establish a project structure for my team similar to the setup used by open-wc or create-react-app. By simply running npm init @open-wc, a series of questions are prompted and a folder with predefined configurations is generated. Despite sea ...

node.jsnpmlerna

Adding a <span> element within an <h1> tag in WordPress

I am attempting to create this layout in Wordpress using the code <h1>This is my <span>title</span></h1>, but I am unsure how to incorporate a <span> tag within the <?php the_title(); ?> function. After consulting the c ...

phphtmlcsswordpress

Perfect CSS Menu Hover Effect

I created my own navigation menu, and I'm struggling with one thing... How do I change the A tag color to white when hovering over the ul id "navitemul"? I've tried #lovedating#navitemul:hover #lovedating a {color:white} and other methods, but no ...

csscolorshover

What's the deal with yarn as an alternative to npm? Can it be used in offline mode?

Typically, I rely on npm for managing packages. However, I've heard that yarn is a more efficient alternative because it has the capability to store node_modules locally and reduce dependence on network bandwidth. I'm encountering difficulties w ...

npmyarnpkg