CSS import breaks webpack 5 compilation

[vincentferniotoclock]

Bug Report

With Webpack 5 and css-loader 6, the CSS imports breaks the compilation.

Steps

Starts a new react app with webpack 5 and css-loader v6. Imports Semantic UI css in root component and it should stops working.

Expected Result

CSS should import correctly and app running as expected

Actual Result

An error occurs in

TypeError: Cannot read property 'get' of undefined
during rendering of asset asset/inline|data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1Mv...

Version

2.0.4

Fix

The main reason for this is an extra ";" at line 19990 of semantic.css
If removed, everything goes fine.

@font-face {
  font-family: 'Step';
  src: url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAw... // this line
}

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[dryerflyer]

@vincentferniotoclock I am experiencing this as well. Have you found a work-around without modifying semantic itself?

[layershifter]

We have only React components in this repo so we can't handle CSS issues, it should be.

This should be reported into the upstream repo: https://github.com/Semantic-Org/Semantic-UI. The problem is that it's dead 🙄 Reasonable solution is to switch to https://github.com/fomantic/Fomantic-UI.

[fholzer]

Maybe it makes sense to mention that support for React is still missing in Formatic-UI, so it's not a drop-in replacement for semantic-ui-react. Just for semantic-ui-css, by using fomantic-ui-css, though I ran into the same issue doing that. I found that instead of installing semantic-ui-css, adding css as link to my React app's public/index.html works fine. E.g.:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />

[jojiseb]

@fholzer I also ran into the same issue while using semantic-ui-css and adding the css as link to my React app solved the issue.

[yedidyas]

@fholzer The only solution that worked for me, thanks

[layershifter]

This issue is extremely annoying, to workaround it I created @semantic-ui-react/css-patch, works with semantic-ui-css & semantic-ui-less.

To use it:

• Install it

  yarn add --dev @semantic-ui-react/css-patch
  # or
  npm install --dev @semantic-ui-react/css-patch

• Add it as a postinstall script to your package.json

  {
   "scripts": {
     "postinstall": "semantic-ui-css-patch"
   }
  }

[cmcode-dev]

@layershifter Thank you for creating this fix. It worked perfectly and solved this issue for my Electron React Boilerplate project as well - sharing the steps I ran, which were basically what you recommended:

1. npm install --dev @semantic-ui-react/css-patch
2. Add semantic-ui-css-patch && .... to the scripts section in package.json, like pictured:
   
3. Run npm install again (so that it runs the patch)
4. npm start and your app works!

[bubbaspaarx]

I am still receiving an error. I believe it's related to the 'step.overrides' file. The URL appears to be the same as the original semantic.css + step.css files. The double semi-colon appears still

[layershifter]

I am still receiving an error. I believe it's related to the 'step.overrides' file. The URL appears to be the same as the original semantic.css + step.css files. The double semi-colon appears still

This patch tool (#4287 (comment)) covers changes in step.overrides in semantic-ui-less and CSS files in semantic-ui-css:
https://github.com/layershifter/semantic-ui-tools/blob/60b209943abde43ee207a4b8acdbe050e8f2f219/packages/css-patch/src/index.js#L19-L26

@bubbaspaarx please provide a repository with a repro case that I clone and check.

[bubbaspaarx]

Apologies. I realised my mistake. The patch works perfectly. One of our devs had created themes and imported the entire semantic package to the code base. Apologies.

[mpaccione]

I encourage anyone who has information about the engineer that introduced the double comma bug in semantic ui react to let me know their details. I will promptly hit them with a truck. That is all, thank you.