-
Notifications
You must be signed in to change notification settings - Fork 360
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS import breaks webpack 5 compilation #75
Comments
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:
|
Same issue as discussed in Semantic-Org/Semantic-UI-CSS#75 and partially fixed in Semantic-Org/Semantic-UI-CSS#76
Same issue as discussed in Semantic-Org/Semantic-UI-CSS#75 and partially fixed in Semantic-Org/Semantic-UI-CSS#76
I tried this fix which cleared the one error but produced another.
|
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 |
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? |
Vengo de tu curso preguntandome lo mismo :( |
The issue has been fixed and merged in the repository but the fix has not made to npm packages yet... |
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
|
Any progress in this? |
how can i use it please can u explain im newbe |
It just looks way nice to me, even though there's still a hacky workaround required (Semantic-Org/Semantic-UI-CSS#75).
Related issues: Semantic-Org#7073 fomantic/Fomantic-UI-CSS#12 Semantic-Org/Semantic-UI-CSS#75 Semantic-Org/Semantic-UI-CSS#76 Semantic-Org/Semantic-UI-CSS#77 Semantic-Org/Semantic-UI-CSS#78 fomantic/Fomantic-UI-CSS#12 Semantic-Org/Semantic-UI-LESS#77 See also: https://www.npmjs.com/package/@semantic-ui-react/css-patch
Think resolved in |
Pasting issue from Semantic-UI-React as this is a
Semantic-UI-CSS
issue.Semantic-Org/Semantic-UI-React#4287 (comment)
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
Semantic-UI-CSS/semantic.min.css
Line 155 in fc9f8bd
The text was updated successfully, but these errors were encountered: