I am making a basic CRA app and wanted to use semantic-ui i followed the steps to the same but as soon as I import the CSS file in the index.js the app starts compiling and finishes it with two errors i dont know what I am doing wrong.
Here are the errors being shown
Cannot read properties of undefined (reading 'get')
during rendering of asset asset/inline|data:application/x-font-ttf;charset=utf-8
https://i.stack.imgur.com/YHqyU.png
https://i.stack.imgur.com/iR1z0.png
The main reason for this is an extra ";" at line 19990 of semantic.css If removed, everything goes fine. In the 'semantic-ui-css/semantic.min.css' remove the extra ';'.
@font-face {
font-family: 'Step';
src: url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAw...
}
I found working solution https://github.com/Semantic-Org/Semantic-UI/issues/7073#issuecomment-1001074430
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
If you don't want to take on the burden of installing a "patch package" as described on the GitHub issue, you could alternatively run the same hacky code locally as a custom webpack loader:
src/css-preloader.js
module.exports = function(source) {
return source.replace(/;;/g, ';');
}
then update your webpack.config.js as follows:
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
path.resolve('src/css-preloader.js')
],
}