Semantic-UI-CSS: CSS import breaks webpack 5 compilation

Pasting issue from Semantic-UI-React as this is a Semantic-UI-CSS issue.

https://github.com/Semantic-Org/Semantic-UI-React/issues/4287#issue-1008071742

Bug Report

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

Steps

Start a new react app with webpack 5 and css-loader v6. Import Semantic UI css in the root component and it should stop working.

Expected Result

CSS should import correctly and the app should run 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 }

Code permalink

https://github.com/Semantic-Org/Semantic-UI-CSS/blob/fc9f8bd7e4f5934756ec60c0423f77d1c7be7c6f/semantic.min.css#L155

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 13
Comments: 21 (2 by maintainers)

Commits related to this issue

remove extra semi colon to fix webpack 5 build issue Same issue as discussed in https://github.com/Semantic-Org/Semantic-UI-CSS/issues/75 and partially fixed in https://github.com/Semantic-Org/Semant... — committed to peacekeeper/Fomantic-UI-CSS by peacekeeper 2 years ago
remove extra semi colon to fix webpack 5 build issue Same issue as discussed in https://github.com/Semantic-Org/Semantic-UI-CSS/issues/75 and partially fixed in https://github.com/Semantic-Org/Semant... — committed to peacekeeper/Fomantic-UI-CSS by peacekeeper 2 years ago
Switch from bootstrap to semantic-ui It just looks way nice to me, even though there's still a hacky workaround required (https://github.com/Semantic-Org/Semantic-UI-CSS/issues/75). — committed to pylbrecht/crochet-frontend by pylbrecht 2 years ago
remove extra semicolon Related issues: https://github.com/Semantic-Org/Semantic-UI/issues/7073 https://github.com/fomantic/Fomantic-UI-CSS/pull/12 https://github.com/Semantic-Org/Semantic-UI-CSS/issu... — committed to LucienLeMagicien/Semantic-UI by LucienLeMagicien 2 years ago

Most upvoted comments

It looks like the double semi-colon issue was merged in the codebase but a new package hasn’t been released yet. I pointed my dependency file (package.json) directly to build from the git-repo like this

"semantic-ui-css": "git+https://github.com/Semantic-Org/Semantic-UI-CSS.git"

+13

imraazrally on Feb 11, 2022

Switching to CDN worked for us.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

+10

dmitry-yudakov on Jan 21, 2022

Temporary fix: Add this to the rules of your webpack config.

      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader', options: {
              url: {
                filter: (url) => {
                  // Semantic-UI-CSS has an extra semi colon in one of the URL due to which CSS loader along
                  // with webpack 5 fails to generate a build.
                  // Below if condition is a hack. After Semantic-UI-CSS fixes this, one can replace use clause with just
                  // use: ['style-loader', 'css-loader']
                  if (url.includes('charset=utf-8;;')) {
                    return false;
                  }
                  return true;
                },
              }
            }
          },
        ],
      }

sahi1422 on Jan 5, 2022

Pretty sure ya can’t touch the webpack config of a create-react-app unless ejecting from it or running a hot patch. It just needs to be fixed for the latest webpack (at least at whatever level stable create react app is released with… I assume there’s quite a few folks using react-scripts without ejecting)

jcolombo on Jan 13, 2022

¿Alguien sabe si van a solucionarlo o no?

Vengo de tu curso preguntandome lo mismo 😦

darkemlord on Feb 1, 2022

¿Alguien sabe si van a solucionarlo o no?

xAgustin93 on Jan 29, 2022

I assume people will stop using Semantic-UI if they don’t fix this quite soon? At least I will rather find an alternative than having to hack around with patches to npm packages.

aweibell on Jan 21, 2022

Any progress in this?

SakisTsalk on Apr 19, 2022

Any chance this can get packaged up into 2.4.2 and released its been in Master for a few months and breaks any apps with create-react-app using latest react-scripts css-loader 6 !

jcolombo on Jan 5, 2022

Think resolved in 2.5.0

jlukic on Oct 6, 2022

Don’t forget to clear webpack cache (node_modules/.cache) after you apply the fix locally.

xuefengwang on Jan 20, 2022

The solution I found the most convenient was to apply a patch via patch-package.

MatissJanis on Jan 19, 2022

The fix may work in development but how to get around it in production. My build in continuous deployment is failing because of this issue

shehroze-1122 on Jan 30, 2022