Encountered a Webpack issue when trying to load the primeng.min

I recently initiated a fresh project using yo aspnetcore-spa. My goal is to integrate the PrimeNG component library. Upon installing font-awesome and primeng:

npm install font-awesome primeng --save

I included CSS in the webpack vendor list:

 vendor: [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/platform-server',
    'angular2-universal',
    'angular2-universal-polyfills',
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-shim',
    'es6-promise',
    'event-source-polyfill',
    'jquery',
    'zone.js',
    'font-awesome/css/font-awesome.min.css',
    'primeng/resources/primeng.min.css',
    'primeng/resources/themes/omega/theme.css'
]

However, when I attempt to update the vendor files:

node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js

The following errors occur:

E:\Astro\Clients\Astro.Clients.Web2>node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
Hash: 14e6030c6f54434f312fd1aeb5e7ace276110a5c
Version: webpack 2.4.1
Child
    Hash: 14e6030c6f54434f312f
    Time: 6812ms
                                   Asset     Size  Chunks                    Chunk Names
    674f50d287a8c48dc19ba404d20fe713.eot   166 kB          [emitted]
    912ec66d7572ff821749319396470bde.svg   444 kB          [emitted]  [big]
    b06871f281fee6b241d60582ae9369b9.ttf   166 kB          [emitted]
                               vendor.js  4.74 MB       0  [emitted]  [big]  vendor
                              vendor.css   492 kB       0  [emitted]  [big]  vendor

    ERROR in ./~/primeng/resources/images/line.gif
    Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\line.gif Unexpected character '' (1:6)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/primeng/resources/primeng.min.css 6:57692-57720 6:58209-58237
     @ dll vendor

    ERROR in ./~/primeng/resources/images/loading.gif
    Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\loading.gif Unexpected character ' ' (1:7)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/primeng/resources/primeng.min.css 6:33379-33410
     @ dll vendor

    ERROR in ./~/primeng/resources/primeng.min.css
    Module build failed: ModuleParseError: Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\loading.gif Unexpected character ' ' (1:7)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
        at doBuild.e (E:\Astro\Clients\Astro.Clients.Web2\node_modules\webpack\lib\NormalModule.js:296:19)
        at runLoaders (E:\Astro\Clients\Astro.Clients.Web2\node_modules\webpack\lib\NormalModule.js:206:11)
        at E:\Astro\Clients\Astro.Clients.Web2\node_modules\loader-runner\lib\LoaderRunner.js:370:3
        at iterateNormalLoaders (E:\Astro\Clients\Astro.Clients.Web2\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
        at E:\Astro\Clients\Astro.Clients.Web2\node_modules\loader-runner\lib\LoaderRunner.js:202:4
        at E:\Astro\Clients\Astro.Clients.Web2\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:62:14
        at _combinedTickCallback (internal/process/next_tick.js:73:7)
        at process._tickCallback (internal/process/next_tick.js:104:9)

    ERROR in E:\Astro\Clients\Astro.Clients.Web2\node_modules\extract-text-webpack-plugin\loader.js??ref--1-0!E:\Astro\Clients\Astro.Clients.Web2\node_modules\css-loader\index.js!E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\primeng.min.css doesn't export content
    Child extract-text-webpack-plugin:

        ERROR in ./~/primeng/resources/images/loading.gif
        Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\loading.gif Unexpected character ' ' (1:7)
        You may need an appropriate loader to handle this file type.
        (Source code omitted for this binary file)
         @ ./~/css-loader!./~/primeng/resources/primeng.min.css 6:33379-33410

        ERROR in ./~/primeng/resources/images/line.gif
        Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\line.gif Unexpected character '' (1:6)
        You may need an appropriate loader to handle this file type.
        (Source code omitted for this binary file)
         @ ./~/css-loader!./~/primeng/resources/primeng.min.css 6:57692-57720 6:58209-58237
Child
    Hash: d1aeb5e7ace276110a5c
    Time: 6064ms
                                   Asset     Size  Chunks                    Chunk Names
    674f50d287a8c48dc19ba404d20fe713.eot   166 kB          [emitted]
    912ec66d7572ff821749319396470bde.svg   444 kB          [emitted]  [big]
    b06871f281fee6b241d60582ae9369b9.ttf   166 kB          [emitted]
                               vendor.js  4.32 MB       0  [emitted]  [big]  vendor

    ERROR in ./~/primeng/resources/images/line.gif
    Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\line.gif Unexpected character '' (1:6)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./~/primeng/resources/primeng.min.css 6:57692-57720 6:58209-58237
     @ ./~/primeng/resources/primeng.min.css
     @ dll vendor

    ERROR in ./~/primeng/resources/images/loading.gif
    Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\loading.gif Unexpected character ' ' (1:7)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./~/primeng/resources/primeng.min.css 6:33379-33410
     @ ./~/primeng/resources/primeng.min.css
     @ dll vendor

Is there any solution that could resolve these webpack errors?

EDIT

Here are the links to my webpack configuration files:

cssangularwebpackprimeng

Answer №1

Upon reviewing your listing, it appears that webpack is currently using the webpack.config.vendor.js configuration file - 

node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js

The url-loader specified in this configuration does not include gif and jpg extensions.

{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }

Consider adding gif and jpg to this regular expression: 

test: /\.(png|gif|jpe?g|woff|woff2|eot|ttf|svg)(\?|$)/
This adjustment should address your issue.

Answer №2

Take a look at the code snippet provided below: 

module: {
            rules: [
            {

                test: /\.(woff2|woff|ttf|eot|svg|png|jpe?g|gif|svg|ico)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
                use: [
                    {
                        loader: 'url-loader?limit=100000'
                    }
                ]
            },
            {
                 test: /\.css$/,
                 use: ['style-loader', 'css-loader'],
             }

    ]}

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

Can animations be stacked in a queue while using velocity.js?

I'm currently tackling a project involving a push menu. When the content div slides over, the menu buttons come in with a slight animation as they appear on the screen. However, if the user rapidly opens and closes the menu multiple times, the items o ...

javascriptjquerycssanimationvelocity.js

Confirm the Keycloak token by checking it against two separate URLs

In my system, I have a setup based on Docker compose with back-end and front-end components. The back-end is developed using Python Flask and runs in multiple docker containers, while the front-end is coded in TypeScript with Angular. Communication between ...

angulartypescriptdockernginxkeycloak

Tips for displaying a sub-menu upon hovering

I am attempting to display the list of sub-menu items when hovering over the main menu item. I have tried using the following CSS code, but it did not work as expected. Any assistance will be greatly appreciated. CSS: summary.header__menu-item.list-menu__ ...

javascripthtmlcss

Error loading CSS file on Google App Engine

I attempted to add a CSS file as a static file in my project just to experiment with how it functions, but encountered difficulties right from the start. The content of the CSS file is: body { background:#00FF00; } In addition, here is my configurat ...

htmlcssgoogle-app-engine

Navigate to a different web page within the body tag without changing the current URL by utilizing a hash symbol

I am working with two HTML files, index.html and about.html. My goal is to display the content of about.html within my index.html without navigating away from it. After observing many websites, I noticed that they often use #about in their URLs to dynamic ...

javascriptphphtmlcss

Modify the transparency of a form's backdrop without affecting the input fields

I'm attempting to achieve a similar effect as shown in this example on my website form. I've tried using opacity to make the form field background only 20% visible, but it ends up affecting the text inside and when typing. Is there a way to apply ...

cssopacity

Creating a weather format user interface in HTML can be accomplished by following a few

I am currently utilizing the open weather API to showcase weather data, however, I am facing difficulties in arranging the data in a format similar to the one shown below. Example output: I attempted to present the data in the following structure: ...

htmlcssbootstrap-4

Display issue with loading animation

After clicking the button and seeing the alert message, I noticed that the loading animation does not display during the await new Promise(r => setTimeout(r, 2000));. /* script.js */ async function refreshStatus() { document.getElementById("load ...

javascriptcss

How can I extract a substring from a URL and then save it to the clipboard?

Hi there! I'm working on a project for my school and could really use your expertise. I need help extracting a substring from a URL, like this one: URL = https://www.example.com/blah/blah&code=12432 The substring is: 12432 I also want to display ...

javascripthtmljquerycssweb

What is the best way to add padding to both the TextField input and label components within Material UI?

Recently, I've integrated Material UI into my project and set up a TextField for a form field. However, I'm facing an issue where applying padding to the input field doesn't affect the label as well. <TextField sx={{ display: &q ...

cssreactjsnext.jsmaterial-uimaterial-design

Can you use CSS to dynamically modify the font of radio buttons?

After attempting to achieve this using jquery (referencing How do I get javascript to run more than once?), some individuals suggested that CSS could provide an easier solution. Currently, I have JS code that dynamically applies and removes the ez-selected ...

css

Java update query experiencing issues

This servlet is designed to add a new user entry into a database table. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String firstname = request.getParameter("firstname"); Str ...

javajqueryhtmlcssjsp

Issue: Incorrect parameter supplied for pipe 'AsyncPipe' in MatTable Angular 11

Currently, I am working on integrating Angular MatTable with an async pipe. The data is retrieved from a RESTAPI as an Observable. However, when I attempt to utilize ([dataSource] = "dataSource | async") in this manner, it results in the error described ab ...

angularangular-materialmat-tableasync-pipe

Step by step guide to applying a personalized "margin" to your CSS

I have set the body element's margin to 0 in my CSS stylesheet. However, I am struggling to successfully set the margin for the div elements. Therefore, I would like to set all other things' margin to 0; except for the div elements with the cl ...

htmlcss

In my current project, I am implementing a feature in Angular 6 to close a Bootstrap modal once the server successfully receives the necessary data

Here, I am working on creating the content for a CRUD component that saves data as needed. My goal is to make the modal disappear once the data is submitted. <div class="container"> <div class="table-wrapper"> <div class="table-ti ...

javascriptnode.jsangular

Rampant number of objects contained within box element

I am currently working on a box component that contains flex items. Unfortunately, I am facing an issue where the box width remains constant and causes overflow when I try to reduce its size in order to accommodate all the items. Can anyone provide guidanc ...

cssreactjsmaterial-uioverflow

Getting information from a PHP script using jQuery AJAX with the (webpack based) ZURB Foundation Framework

Currently, I am working on a ZURB Template project that was set up using the foundation client. As part of my work, I have already completed some initial tasks such as enabling ES7 features async/await in Babel7 (ZURB Foundation utilizes gulp as taskrunner ...

javascriptphpajaxwebpackzurb-foundation

Display different text based on the property value

I need to display different text based on the value of a property, showing "offline" if camera.key is null and "online" otherwise. Here's the template I'm using: <h3>Camera sensors</h3> <table> <th>Name</th> ...

javascriptangulartypescript

strange glitch found in jquery ui resizable

Experimenting with jquery UI, I came across an unusual bug. After clicking a button to make a div resizable, the div unexpectedly moves below the button. resizable.html: <html> <head> <link href="my.css" rel="stylesheet" type=" ...

jqueryhtmlcssjquery-uiresizable

Steps to retrieve the final page number from ngx-pagination with Angular

Is there a way to utilize Custom templates within ngx-pagination in order to ensure that the first and last buttons function properly when clicked? Currently, I have utilized pagination-template to accomplish this... How can I dynamically determine the la ...

javascripthtmlangulartypescriptngx-pagination