Estoy creando una aplicación CRA básica y quería usar semantic-ui. Seguí los mismos pasos, pero tan pronto como importé el archivo CSS en index.js, la aplicación comienza a compilarse y finaliza con dos errores. estoy haciendo mal
Aquí están los errores que se muestran
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
La razón principal de esto es un extra ";" en la línea 19990 de semantic.css Si se elimina, todo va bien. En 'semantic-ui-css/semantic.min.css' elimine el extra ';'.
@font-face { font-family: 'Step'; src: url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAw... }Encontré una solución funcional https://github.com/Semantic-Org/Semantic-UI/issues/7073#issuecomment-1001074430
Es probable que el error sea causado por puntos y comas dobles en semantic.min.css
Solución temporal (pero no del todo buena): agregue sed -i 's/;;/;/g' node_modules/semantic-ui-css/semantic.min.css && delante de su script de inicio/construcción en package.json
Si no desea asumir la carga de instalar un "paquete de parches" como se describe en el problema de GitHub , también puede ejecutar el mismo código hacky localmente como un cargador de paquete web personalizado:
src/css-preloader.js
module.exports = function(source) { return source.replace(/;;/g, ';'); }luego actualice su webpack.config.js de la siguiente manera:
{ test: /\.css$/, use: [ 'style-loader', 'css-loader', path.resolve('src/css-preloader.js') ], }