#No loader configured for ./eot/.woff2/etc. on attempting to build project

71 messages · Page 1 of 1 (latest)

digital remnant
#

Hi all,

I'm trying to build my Angular project with PrimeNG version ^19.0.6 and Tailwind version ^4.0.6. Upon attempting to build the application that I made, I get this error:

Application bundle generation failed. [2.241 seconds]

✘ [ERROR] No loader is configured for ".eot" files: node_modules/.pnpm/[email protected]/node_modules/primeicons/fonts/primeicons.eot

    node_modules/.pnpm/[email protected]/node_modules/primeicons/primeicons.css:4:13:
      4 │     src: url('./fonts/primeicons.eot');
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] No loader is configured for ".eot" files: node_modules/.pnpm/[email protected]/node_modules/primeicons/fonts/primeicons.eot?#iefix

    node_modules/.pnpm/[email protected]/node_modules/primeicons/primeicons.css:5:13:
      5 │     src: url('./fonts/primeicons.eot?#iefix') format('embedded-open...
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] No loader is configured for ".woff2" files: node_modules/.pnpm/[email protected]/node_modules/primeicons/fonts/primeicons.woff2

    node_modules/.pnpm/[email protected]/node_modules/primeicons/primeicons.css:5:79:
      5 │ ...ed-opentype'), url('./fonts/primeicons.woff2') format('woff2'), ...
        ╵                       ~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] No loader is configured for ".woff" files: node_modules/.pnpm/[email protected]/node_modules/primeicons/fonts/primeicons.woff

    node_modules/.pnpm/[email protected]/node_modules/primeicons/primeicons.css:5:128:
      5 │ ...ormat('woff2'), url('./fonts/primeicons.woff') format('woff'), u...
        ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] No loader is configured for ".ttf" files: node_modules/.pnpm/[email protected]/node_modules/primeicons/fonts/primeicons.ttf

    node_modules/.pnpm/[email protected]/node_modules/primeicons/primeicons.css:5:175:
      5 │ ...format('woff'), url('./fonts/primeicons.ttf') format('truetype')...
        ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] No loader is configured for ".svg" files: node_modules/.pnpm/[email protected]/node_modules/primeicons/fonts/primeicons.svg?#primeicons

    node_modules/.pnpm/[email protected]/node_modules/primeicons/primeicons.css:5:225:
      5 │ ...ruetype'), url('./fonts/primeicons.svg?#primeicons') format('svg');

I tried a few things like messing settings around in the angular.json file as it was talking about loaders, but I wasn't able to fix it fully, so I reverted. Any clue as to what is causing this or how I should approach this issue? I know Tailwind4 isn't natively supported yet by Angular, but I was thinking it would still be able to build properly, as I have PostCSS installed and followed the existing guides (both for 3 and 4, in case one of them ended up fixing this, as I believe PrimeNG uses TW). Thanks in advance!

forest raft
digital remnant
#

I assume I need to use another builder than @angular-devkit/build-angular:application, right? Like browser/browser-esbuild?

#

Or does it work without that?

forest raft
#

I think @angular-devkit/build-angular:application has the option available

digital remnant
#

I see, I see, I'll give it a check

#

There's binary, empty, file and text. I read somewhere that I'd need to use url-loader for e.g. .ttf, .eot files

forest raft
#

I think file loader is the right one

digital remnant
#

Okay, so good news; doing this:

"loader": {
              ".eot": "file"
            },

Fixed the error for that specific filetype

#

I wasn't able to find any configuration docs for this so this is a huge help 😅

forest raft
#

Now you have to make sure that the file will also be properly loaded into the browser when using the app

digital remnant
#

Right

#

Huh. Never had this either;

# 
✘ [ERROR] bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 3.46 kB with a total of 1.00 MB.
#

kekDepp It's one thing after the other, haha

forest raft
#

Ok but this is an easy one to fix

digital remnant
#

(I'm very much used to Vite, so this is still a bit of a "culture shock", lol)

forest raft
digital remnant
#

I guess I'll increase it to 2MB

#

That worked! Amazing. Thanks a bunch for your help; glad to have solved this

forest raft
#

And it loads everything properly?

digital remnant
#

I'm giving the prod build a quick test drive

digital remnant
#

@forest raft It seems that the icons do in fact not load, haha

#

I had to set up some other Docker-related stuff on my droplet so that's why I was away for a bit

forest raft
#

But they loaded in the dev env?

#

Can you see if it is a network request failing?

digital remnant
#

Yeah, it loads in the dev env. I can check network requests, one sec

#

cart here is an API endpoint

#

that's all that I see in terms of network requests

forest raft
#

interesting, it looks like styles.css is not even trying to load a font file

#

Would you share the domain with me so I can have a look?

digital remnant
#

Sure, it's for a uni assignment anyhow so I don't see much wrong with it 🤣

#

You'll need to make a test account in order to see the cart

forest raft
#

Signup button does not do anything😅

digital remnant
#

Oh

#

you need to go to Login

#

and then press Sign up instead

#

I forgot to add a routerlink there.

#

hahaha

#

😅

forest raft
#

I already figured that out but nothing is happening after clicking on signup

#

😄

#

Also: Since it's working in the dev env I think that there is probably something else wrong

digital remnant
#

I think you need to click that you accept the terms and conditions 😅

#

UI/UX is not good here right now, but I just needed to show REST stuff so I didn't put much thought into that

digital remnant
forest raft
#

Where should I see icons where I dont?

digital remnant
#

There's a little icon there which should be the shopping cart

#

There's a little 0 there too which is the count of items

forest raft
#

You have this: @import "primeicons/primeicons.css", right?

digital remnant
digital remnant
forest raft
#

Did it change anything?

#

if not can you create a minimal repro?

digital remnant
# 
Could not resolve "./fonts/primeicons.eot"
#

Sorry for the late response - was out somewhere 😅

#

I guess it's trying to find it at a location where it doesn't exist. The .eot files I think are in the node_modules

#

Saw this issue...

#

I guess tailwindcss-primeui is a necessary install?

#

Oh wait, I think I need to update tailwind

#

Hmm, that didn't seem to fix it

#

I managed to fix it by just including the primeicons location in styles