1

On trying to load semantic-ui-css with css-loader 6 I get the following error:

 failed: UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64,...

It looks like the 2nd semi-colon after utf-8 is causing the issue. After removing the 2nd semi-colon there are no compilation errors, but semantic-ui icons stop working.

However, downgrading css-loader to 5.2.7 resolved the issue. Is there a better way to solve this problem?

honter safioun
  • 41
  • 3
  • I was facing the same issue today and I fixed it by replacing 'style-loader' with 'mini-css-extract-plugin'. Let me know if this works. If it does, I'll formulate a proper answer for future visitors with this problem. – MHX Sep 01 '21 at 15:27
  • I was already using 'mini-css-extract-plugin' but still had the same issue. In the end I just downgraded the css-loader as nothing else worked for me – Alsty Sep 30 '21 at 14:31

1 Answers1

0

The error is likely to caused by double semicolons in semantic.min.css

Temporary (but not quite good) solution: add sed -i 's/;;/;/g' node_modules/semantic-ui-css/semantic.min.css && in front of your start/build script in package.json and if you have a Darwin OS you have to put sed -i '' 's/;;/;/g' node_modules/semantic-ui-css/semantic.css && in front. You can also write a simple shell script that does the job:

CHECK_OS="`uname -s`"
if [[ "$CHECK_OS" = "Darwin" ]]; then
    sed -i '' 's/;;/;/g' node_modules/semantic-ui-css/semantic.min.css
    sed -i '' 's/;;/;/g' node_modules/semantic-ui-css/semantic.css
else 
    sed -i 's/;;/;/g' node_modules/semantic-ui-css/semantic.min.css
    sed -i 's/;;/;/g' node_modules/semantic-ui-css/semantic.css
fi
nilskch
  • 307
  • 3
  • 10