The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

Webpack build warning with inline SVG: there are multiple modules with names that only differ in casing


I am integrating Metronic to a SPA web app with Aurelia.js, VSCode and Webpack. When I build the application with NPM I get 3 warnings as the following:

There are multiple modules with names that only differ in casing.

This seems to have to do with inline svg declarations as the following

asset/inline|data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27 viewBox=%27-4 -4 8 8%27%3E%3Ccircle r=%273%27 fill=%27%23FFF%27/%3E%3C/svg%3E

Compare these module identifiers:

C:\Source\Repos\ClientApp\node_modules\css-loader\dist\cjs.js!C:\Source\Repos\ClientApp\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[0].use[2]!C:\Source\Repos\ClientApp\src\assets\css\style.bundle.css
@ ./src/assets/css/style.bundle.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/assets/css/style.bundle.css 11:36-220
@ ./src/assets/css/style.bundle.css
@ ./src/main.ts 5:0-39
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js

Any idea how I can resolve this?


user
Marco Garibaldi 4 years ago
Webpack Metronic
6 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)

 
Deleted comment
user
Alissa Hasia 1 year ago

I've encountered a similar warning in Webpack when working with SVG - the system is really case-sensitive, and if you have Icon.svg and icon.svg, it can get confused. It's especially annoying when everything works locally and crashes on the prod. By the way, such attention to detail reminds me of the format of sixty6.com , where every little thing in the visual design matters. And although this is a Sweepstakes, not something about real bets, the design and UX are implemented so competently that the feeling of immersion is like in a real game.


 
Deleted comment
 
Deleted comment
 
Deleted comment
user
Gastino Gangster 1 year ago

fff


user
Gastino Gangster 1 year ago
Deleted comment
user
Artur Savluk 4 years ago

Yes, it works
Thanx!


user
Faizal Author 4 years ago

Hi Marco,

Could you please try to change the color from #FFFFFF to #ffffff in file sass/components/_variables.custom.scss? We think the issue is coming from this.

Thanks


user
Marco Garibaldi 4 years ago

Your suggestion resolved the problem. Thanks a lot, Faizal, I could never figure this out by myself.


user
Faizal Author 4 years ago

Hi Marco,

The colour variable is used for SVG in components/mixins/_svg-bg-icon.scss to change SVG fill. We will fix the colour value.

Thanks


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation