search

Semantic-Org / Semantic-UI-CSS

CSS Only distribution
http://www.semantic-ui.com
MIT License
489 stars 360 forks source link

CSS import breaks webpack 5 compilation #75

Open sahi1422 opened 2 years ago

sahi1422 commented 2 years ago

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

shehroze-1122 commented 2 years ago

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 commented 2 years ago

I worked around it using the manual deployment(building it locally which wasn't failing and then pushing it to deployment )

AlbertPlanidaTS commented 2 years ago

I'm having the same issue. I chose to use Webpack 4.44 and it works fine. Planning on using this until the issue is fixed.

jcolombo commented 2 years ago

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 !

sahi1422 commented 2 years ago

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;
                },
              }
            }
          },
        ],
      }
codelocksdev commented 2 years ago

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;
                },
              }
            }
          },
        ],
      }

I tried this fix which cleared the one error but produced another.

Failed to compile.

Syntax error: D:\dev\repos\electron\astromodconsole\node_modules\semantic-ui-css\semantic.min.css Unknown word (2:7)
  1 |
> 2 |       import API from "!../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../style-loader/dist/runtime/insertBySelector.js";
asset static/js/bundle.js 3.68 MiB [emitted] (name: main) 1 related asset
asset index.html 1.72 KiB [emitted]
asset asset-manifest.json 190 bytes [emitted]
cached modules 3.9 MiB (javascript) 28.3 KiB (runtime) [cached] 884 modules
javascript modules 117 bytes
  ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css 39 bytes [built] [1 error]
  ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/semantic-ui-css/semantic.min.css 39 bytes [built] [1 error]
  ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css 39 bytes [built] [1 error]

ERROR in ./node_modules/semantic-ui-css/semantic.min.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/semantic-ui-css/semantic.min.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:7) D:\dev\repos\electron\astromodconsole\node_modules\semantic-ui-css\semantic.min.css Unknown word

  1 |
> 2 |       import API from "!../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../style-loader/dist/runtime/insertBySelector.js";
 @ ./node_modules/semantic-ui-css/semantic.min.css 8:6-312 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-282 83:0-282 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./src/index.tsx 11:0-42

ERROR in ./src/App.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:7) D:\dev\repos\electron\astromodconsole\src\App.css Unknown word

  1 |
> 2 |       import API from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../node_modules/style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../node_modules/style-loader/dist/runtime/insertBySelector.js";
 @ ./src/App.css 8:6-368 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-338 83:0-338 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./src/App.tsx 6:0-19
 @ ./src/index.tsx 7:0-24 16:35-38

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:7) D:\dev\repos\electron\astromodconsole\src\index.css Unknown word

  1 |
> 2 |       import API from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../node_modules/style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../node_modules/style-loader/dist/runtime/insertBySelector.js";
 @ ./src/index.css 8:6-370 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-340 83:0-340 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./src/index.tsx 6:0-21

webpack 5.65.0 compiled with 3 errors in 2280 ms
jcolombo commented 2 years ago

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)

codelocksdev commented 2 years ago

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)

Correct, I am using react-app-rewired to add the rule to my webpack config. It's worked fine for other things.

MatissJanis commented 2 years ago

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

xuefengwang commented 2 years ago

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

MsLarissaaa commented 2 years ago

I am seeing the same error mentioned above (Module build failed: UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64...) and wondering if there will be a fix for this soon that doesn't require a local patch? Seems like there is just an extra semicolon that needs to be removed, although I could be mistaken. Thanks in advance!

aweibell commented 2 years ago

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.

dmitry-yudakov commented 2 years ago

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" />
blue-hexagon commented 2 years ago

This has been open for some time. Anyone got news on when it'll be fixed?

xAgustin93 commented 2 years ago

¿Alguien sabe si van a solucionarlo o no?

darkemlord commented 2 years ago

¿Alguien sabe si van a solucionarlo o no?

Vengo de tu curso preguntandome lo mismo :(

oggy107 commented 2 years ago

This has been open for some time. Anyone got news on when it'll be fixed?

The issue has been fixed and merged in the repository but the fix has not made to npm packages yet... Try a local fix and remove webpack cache node_modules/.cache before building again.

imraazrally commented 2 years ago

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"
SakisTsalk commented 2 years ago

Any progress in this?

ameralkhodary commented 2 years ago

Webpack 4.44

how can i use it please can u explain im newbe

jlukic commented 2 years ago

Think resolved in 2.5.0