Open sahi1422 opened 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
I worked around it using the manual deployment(building it locally which wasn't failing and then pushing it to deployment )
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.
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 !
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;
},
}
}
},
],
}
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
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)
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.
The solution I found the most convenient was to apply a patch via patch-package.
Don't forget to clear webpack cache (node_modules/.cache) after you apply the fix locally.
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!
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.
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" />
This has been open for some time. Anyone got news on when it'll be fixed?
¿Alguien sabe si van a solucionarlo o no?
¿Alguien sabe si van a solucionarlo o no?
Vengo de tu curso preguntandome lo mismo :(
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.
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"
Any progress in this?
Webpack 4.44
how can i use it please can u explain im newbe
Think resolved in 2.5.0
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