Laravel-mix: build replaces css urls with [object Module]
- Laravel Mix Version: [email protected]
- Node Version (
node -v): 11.12.0 - NPM Version (
npm -v): 6.14.2 - OS: MacOS Catalina 10.15.4
Description:
When using variables for path to fonts in the scss file, the compiled css files end up with url([object Module]) instead of the actual URL
Steps To Reproduce:
I have placed Nunito font files in resources/fonts for them to be compiled via sass. In app.scss I add reference to font:
// Fonts
/* nunito-regular - latin_latin-ext_cyrillic_cyrillic-ext */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: url('../fonts/nunito-v12-latin_latin-ext_cyrillic_cyrillic-ext-regular.eot'); /* IE9 Compat Modes */
src: local('Nunito Regular'), local('Nunito-Regular'),
url('../fonts/nunito-v12-latin_latin-ext_cyrillic_cyrillic-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/nunito-v12-latin_latin-ext_cyrillic_cyrillic-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/nunito-v12-latin_latin-ext_cyrillic_cyrillic-ext-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/nunito-v12-latin_latin-ext_cyrillic_cyrillic-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/nunito-v12-latin_latin-ext_cyrillic_cyrillic-ext-regular.svg#Nunito') format('svg'); /* Legacy iOS */
}
or introduce a path variable to a path for module installed via rpm (font awesome in my case)
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
run npm run dev
The expected result is app.css has urls for the font files respective to public folder but you get something like this instead
/* nunito-regular - latin_latin-ext_cyrillic_cyrillic-ext */
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 400;
src: url([object Module]);
/* IE9 Compat Modes */
src: local("Nunito Regular"), local("Nunito-Regular"), url([object Module]) format("embedded-opentype"), url([object Module]) format("woff2"), url([object Module]) format("woff"), url([object Module]) format("truetype"), url([object Module]) format("svg");
/* Legacy iOS */
}
and
/*!
* Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
font-display: block;
src: url([object Module]);
src: url([object Module]?#iefix) format("embedded-opentype"), url([object Module]) format("woff2"), url([object Module]) format("woff"), url([object Module]) format("truetype"), url([object Module]#fontawesome) format("svg");
}
.fa,
.fas {
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
/*!
* Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: 400;
font-display: block;
src: url([object Module]);
src: url([object Module]?#iefix) format("embedded-opentype"), url([object Module]) format("woff2"), url([object Module]) format("woff"), url([object Module]) format("truetype"), url([object Module]#fontawesome) format("svg");
}
.fab {
font-family: "Font Awesome 5 Brands";
font-weight: 400;
}
/*!
* Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 400;
font-display: block;
src: url([object Module]);
src: url([object Module]?#iefix) format("embedded-opentype"), url([object Module]) format("woff2"), url([object Module]) format("woff"), url([object Module]) format("truetype"), url([object Module]#fontawesome) format("svg");
}
here's the output of the build
anadi@MacAnadi adminpanel % npm run dev
> @ dev /Users/anadi/Code/github/personal-website/adminpanel
> npm run development
> @ development /Users/anadi/Code/github/personal-website/adminpanel
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 50383ms 11:44:48 AM
Asset Size Chunks Chunk Names
/css/admin.css 394 KiB /js/app [emitted] /js/app
/css/app.css 252 KiB /js/app [emitted] /js/app
/css/login.css 174 KiB /js/app [emitted] /js/app
/images/blog-svgrepo-com_favicon.ico 5.3 KiB [emitted]
/images/contact-bg.jpg 489 KiB [emitted]
/images/favicon.ico 5.3 KiB [emitted]
/images/home-bg.jpg 984 KiB [emitted]
/images/logo-web.png 2.45 KiB [emitted]
/images/profile.jpeg 48.7 KiB [emitted]
/js/admin.js 12.3 MiB /js/admin [emitted] /js/admin
/js/app.js 2.86 MiB /js/app [emitted] /js/app
/storage/app/public/images/blog-banner-default.jpg 651 KiB [emitted]
/storage/app/public/images/social-banner-default.jpg 397 KiB [emitted]
fonts/nunito-v12-latin_latin-ext_cyrillic_cyrillic-ext-regular.eot?65d4751c833cc28796809aec707f3c17 64.4 KiB [emitted]
fonts/nunito-v12-latin_latin-ext_cyrillic_cyrillic-ext-regular.svg?49e9b5399319a1a439f6e29911f765b4 78.4 KiB [emitted]
fonts/nunito-v12-latin_latin-ext_cyrillic_cyrillic-ext-regular.ttf?ef5dba780277cde0d88cfd49ab810557 156 KiB [emitted]
fonts/nunito-v12-latin_latin-ext_cyrillic_cyrillic-ext-regular.woff2?d3dd835867a6f0a11791334cb0946cf9 53.8 KiB [emitted]
fonts/nunito-v12-latin_latin-ext_cyrillic_cyrillic-ext-regular.woff?91b5a0ca7bbaf549f1237ff1a6e586d6 69.3 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?607a77859353c0cc1882b51e1e269d38 130 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.svg?3c45c98f6f6c1b009c082510d0255ef4 699 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?5818bbd07dfd7095920a592049f5d9bd 130 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?31015e861aeb30ff8355fab3e876a6bd 74.8 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff?ee26f57bc9e3619b022b2c0ea0fc4660 87.7 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?0747be4cba2f8600544f4f09645d971a 33.6 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.svg?ab47faeab8ddc5f809ec2a5377c1fbe4 141 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?c3146b3524e97475c094343e848a7370 33.3 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?c52405129ae48097815d4da606003470 13.3 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff?8b892b7904a39e37c53dc5a7534bb60e 16.4 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?7eefe04dc985dd4ad38bd7f4ec0c20a0 198 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?18df003f90a7f1313b98b23384ec4f1b 876 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?32267f3b4db33a7c85ee31d9b317c9e4 198 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?9451d5fee89b51a20f8a44c56a4f6c1a 77.6 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?a940d584750708f5435ce2c523498ddb 101 KiB [emitted]
fonts/vendor/primeicons/primeicons.eot?c2e128a00fca2640240d88892e29dc53 38.8 KiB [emitted]
fonts/vendor/primeicons/primeicons.svg?fa2c83d2f35244bb10dcfef484ba6431 160 KiB [emitted]
fonts/vendor/primeicons/primeicons.ttf?04701ca33ce96d3254191b8bb4be6080 38.6 KiB [emitted]
fonts/vendor/primeicons/primeicons.woff?1d79a0559e5f13294dee77456b02b56f 38.7 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-300.eot?2aeabc9e8ed0aef227d72fee83c14462 15.2 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-300.svg?bb3b405a4608d51ddb1306c2f641f3dd 53.9 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-300.ttf?252a41f69d4c320154a12092f6fbbedd 27 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-300.woff2?f2ebdee8c2343f558a0221d276957606 14.2 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-300.woff?df17d4e30091735253a854052256d95d 17.9 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-700.eot?75e0e55bdb3e82dcacf88e90bf17bac6 15.3 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-700.svg?926388f043fc8117b35b84b241a7f688 54.3 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-700.ttf?ec32d6be7329ece0789ccf9d0d519c4d 27.5 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-700.woff2?7435e6c2064f36f486266e516e9838b8 14.4 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-700.woff?2509c35b0cfc629f81e50ce5ef62e4d3 18 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-regular.eot?a356e361ee6765f3d6d4c1d4664f12ab 14.7 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-regular.svg?1d0d8b66fa1da76d69b95b6d0ed5cca9 54.9 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-regular.ttf?61747992dd9a412e601e3defa3f3baa6 25.9 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-regular.woff2?ec806460121999bcfb12bc264d46d41e 13.7 KiB [emitted]
fonts/vendor/primereact/resources/themes/nova-light/open-sans-v15-latin-regular.woff?87a454b233bedae23f8d1be11e8b4f68 17.3 KiB [emitted]
images/blog-svgrepo-com.svg?44236a796a57f8e55db74f6c72314280 5.52 KiB [emitted]
images/vendor/primereact/resources/color.png?6441e63a57ccc5105bad045142bc31eb 10.1 KiB [emitted]
images/vendor/primereact/resources/hue.png?f8505bd4d6f3e3aa435b72d1c045d4a7 293 bytes [emitted]
images/vendor/primereact/resources/line.gif?39c65dcc08f7edb347b62cee45cd7048 12.8 KiB [emitted]
images/vendor/primereact/resources/loading.gif?9347db5956a89b0bab38d3e610eee01d 9.21 KiB [emitted]
images/vendor/primereact/resources/password-meter.png?eea288d50533d7995ec1e02d340148fd 118 bytes [emitted]
Niether FontAwesome nor PrimeIcons icon show up in the pages because of this
anadimisra
All 6 comments
updated all webpack dependencies html-loader/css-loader/url-loader/file-loader fixed it. Not sure which one was the offending dep
anadimisra
on 13 Apr 2020
@anadimisra could you help me with a how-to update all webpack dependencies?
poldelgado
on 15 Apr 2020
@poldelgado you have to update resolve-url-loader and then use npm i -D for each of html-loader/css-loader/url-loader/file-loader that ways their installed versions be resolved instead of the versions in webpack dependency afaik.
anadimisra
on 15 Apr 2020
😕1
👎1
My solution.
mix.setPublicPath("dist");
mix.setResourceRoot("/dist/");
mix.config.fileLoaderDirs.fonts = "fonts";
mix.config.fileLoaderDirs.images = "images";
Result is it this
/
__dist/
_____fonts/
_____images/
Denisbeder
on 11 Dec 2020
👎2
😕1
It seems to be happening again with newer versions (File loader 5.+)
Tofandel
on 17 Mar 2021
👍1
I had this problem in my own project; I fixed it by adding this to the "resolutions" section of my package.json:
"css-loader": "^5.2.4"
that took care of it, and the URLs are written correctly
ecruhling
on 23 Apr 2021
Was this page helpful?
0 / 5 - 0 ratings
Related issues
kpilard
路
3Comments
Micaso
路
3Comments
RomainGoncalves
路
3Comments
mstralka
路
3Comments
jpmurray
路
3Comments