Creé una nueva aplicación React ejecutando npx create-react-app@latest --typescript . y ejecuté el proyecto usando npm start y todo funciona como se esperaba. npm install semantic-ui-react semantic-ui-css y eso se instala correctamente.
Pero cuando agrego import 'semantic-ui-css/semantic.min.css'; a index.tsx según las instrucciones, aparece un failed to compile error .
Aquí está mi archivo index.tsx :
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import 'semantic-ui-css/semantic.min.css'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. reportWebVitals();Todo lo demás está intacto.
Si elimino import 'semantic-ui-css/semantic.min.css'; desde la línea 6 de index.tsx se compila correctamente. Supongo que se trata de un problema de Webpack, pero soy nuevo en Webpack y no estoy seguro de cómo resolver el problema. Intenté configurar el proyecto desde cero nuevamente, pero obtengo los mismos resultados.
Estoy usando react 17.0.2 , react scripts 5.0.0 , semantic-ui-react 2.0.4 y typescript 4.5.4 . ¿Hay algo obvio que me estoy perdiendo que solucionaría esto?
Y aquí está el código de error que obtengo:
Failed to compile. Module build failed: UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwNNAAADgAAAACRobXR4CykAAAAAA6QAAAAMbG9jYQA4AFsAAAOwAAAACG1heHAApgm8AAADuAAAACBuYW1lzJ0aHAAAA9gAAALNcG9zdK69QJgAAAaoAAAAO3ByZXCSoZr/AAAQnAAAAFYAAQO4AZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAYALAMI0IgYLABYbUNDQEACwBCQopgsQ0FK7BtKxsiWS2wDyyxAA4rLbAQLLEBDistsBEssQIOKy2wEiyxAw4rLbATLLEEDistsBQssQUOKy2wFSyxBg4rLbAWLLEHDistsBcssQgOKy2wGCyxCQ4rLbAZLrsDgrLbBpLLA1Ky6xJgEUKy2waiywNSuwNistsGsssDUrsDcrLbBsLLA1K7A4Ky2wbSwrsAhlsAMkUHiwARUwLQAAAEu4AMhSWLEBAY5ZuQgACABjILABI0SwAyNwsgQoCUVSRLIKAgcqsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAA=" is not handled by plugins (Unhandled scheme). Webpack supports "data:" and "file:" URIs by default. You may need an additional plugin to handle "data:" URIs. assets by path static/ 9.45 KiB asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.88 KiB [emitted] 1 related asset asset static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.57 KiB [emitted] (auxiliary name: main) asset index.html 1.62 KiB [emitted] asset asset-manifest.json 429 bytes [emitted] Entrypoint main (2.57 KiB) = 1 auxiliary asset cached modules 2.72 MiB (javascript) 1.66 MiB (asset) 31.4 KiB (runtime) [cached] 150 modules runtime modules 54 bytes 1 module modules by layer 4.38 KiB (javascript) 1 bytes (asset) ./src/index.tsx 1.82 KiB [built] [code generated] ./src/App.tsx 2.51 KiB [built] [code generated] data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn//4WwBI2xBQBEAAA= 42 bytes (javascript) 1 bytes (asset) [built] [1 error] ERROR in data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwNNAAADgAAAACRobXR4CykAAAAAA6QAAAAMbG9jYQA4AFsAAAOwAAAACG1heHAApgm8AAADuAAAACBuYW1lzJ0aHAAAA9gAAALNcG9zdK69QJgAAAaoAAAAO3ByZXCSoZr/AAAQnAAAAFYAAQO4AZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6ADoAQNS/2oAWgMLAE8AAAABAAAAAAAAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAADoAf//AAAAAOgA//8AABgBAAEAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAADpAKYABUAHEAZDwEAAQFCAAIBAmoAAQABagAAAGEUFxQDEisBFAcBBiInASY0PwE2Mh8BATYyHwEWA6QP/iAQLBD+/4WwBI2xBQBEAAA= Module build failed: UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwNNAAADgAAAACRobXR4CykAAAAAA6QAAAAMbG9jYQA4AFsAAAOwAAAACG1heHAApgm8AAADuAAAACBuYW1lzJ0aHAAAA9gAAALNcG9zdK69QJgAAAaoAAAAO3ByZXCSoZr/AAAQnAAAAFYAAQO4AZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6ADoAQNS/2oAWgMLAE8AAAABAAAAAAAAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAADoAf//AAAAAOgA//8AABgBAAEAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAADpAKYABUAHEAZDwEAAQFCAAIBAmoAAQABagAAAGEUFxQDEisBFAcBBiInASY0PwE2Mh8BATYyHwEWA6QP/iAQLBD+6g8PTBAsEKQBbhAsEEwPAhYWEP4gDw8BFhAsEEwQEKUBbxAQTBAAAAH//f+xA18DCwAMABJADwABAQpDAAAACwBEFRMCESsBFA4BIi4CPgEyHgEDWXLG6MhuBnq89Lp+AV51xHR0xOrEdHTEAAAAAAEAAAABAADDeRpdXw889QALA+gAAAAAzzWYjQAAAADPNWBN//3/sQOkAwsAAAAIAAIAAAAAAAAAAQAAA1L/agBaA+gAAP/3A6QAAQAAAAAAAAAAAAAAAAAAAAMD6AAAA+//AA8AAAAAAAAAAAAAAAAAAAAAADIAMgML/7EDC/+/4WwBI2xBQBEAAA=" is not handled by plugins (Unhandled scheme). Webpack supports "data:" and "file:" URIs by default. You may need an additional plugin to handle "data:" URIs. at /Users/eamon/projects/frontend/node_modules/webpack/lib/NormalModule.js:825:25 at Hook.eval [as callAsync] (eval at create (/Users/eamon/projects/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/eamon/projects/frontend/node_modules/tapable/lib/Hook.js:18:14) at Object.processResource (/Users/eamon/projects/frontend/node_modules/webpack/lib/NormalModule.js:822:8) at processResource (/Users/eamon/projects/frontend/node_modules/loader-runner/lib/LoaderRunner.js:220:11) at iteratePitchingLoaders (/Users/eamon/projects/frontend/node_modules/loader-runner/lib/LoaderRunner.js:171:10) at runLoaders (/Users/eamon/projects/frontend/node_modules/loader-runner/lib/LoaderRunner.js:397:2) at NormalModule._doBuild (/Users/eamon/projects/frontend/node_modules/webpack/lib/NormalModule.js:812:3) at NormalModule.build (/Users/eamon/projects/frontend/node_modules/webpack/lib/NormalModule.js:956:15) at /Users/eamon/projects/frontend/node_modules/webpack/lib/Compilation.js:1367:12 @ ./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/source-map-loader/dist/cjs.js!./node_modules/semantic-ui-css/semantic.min.css 22:37-5903 @ ./node_modules/semantic-ui-css/semantic.min.css 8:6-230 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-200 83:0-200 84:22-29 84:33-47 84:50-64 61:4-74:5 @ ./src/index.tsx 9:0-42 ERROR in [entry] [initial] Cannot read properties of undefined (reading 'get') during rendering of asset asset/inline|data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwNNAAADgAAAACRobXR4CykAAAAAA6QAAAAMbG9jYQA4AFsAAAOwAAAACG1heHAApgm8AAADuAAAACBuYW1lzJ0aHAAAA9gAAALNcG9zdK69QJgAAAaoAAAAO3ByZXCSoZr/AAAQnAAAAFYAAQO4AZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6ADoAQNS/2oAWgMLAE8AAAABAAAAAAAAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAADoAf//AAAAAOgA//8AABgBAAEAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAADpAKYABUAHEAZDwEAAQFCAAIBAmoAAQABagAAAGEUFxQDEisBFAcBBiInASY0PwE2Mh8BATYyHwEWA6QP/iAQLBD+6g8PTBAsEKQBbhAsEEwPAhYWEP4gDw8BFhAsEEwQEKUBbxAQTBAAAAH//f+xA18DCwAMABJADwABAQpDAAAACwBEFRMCESsBFA4BIi4CPgEyHgEDWXLG6MhuBnq89Lp+AV51xHR0xOrEdHTEAAAAAAEAAAABAADDeRpdXw889QALA+gAAAAAzzWYjQAAAADPNWBN//3/sQOkAwsAAAAIAAIAAAAAAAAAAQAAA1L/agBaA+gAAP/3A6QAAQAAAAAAAAAAAAAAAAAAAAMD6AAAA+//AA8AAAAAAAAAAAAAAAAAAAAAADIAMgML/7EDC/+/4WwBI2xBQBEAAA= TypeError: Cannot read properties of undefined (reading 'get') during rendering of asset asset/inline|data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwNNAAADgAAAACRobXR4CykAAAAAA6QAAAAMbG9jYQA4AFsAAAOwAAAACG1heHAApgm8AAADuAAAACBuYW1lzJ0aHAAAA9gAAALNcG9zdK69QJgAAAaoAAAAO3ByZXCSoZr/AAAQnAAAAFYAAQO4AZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6ADoAQNS/2oAWgMLAE8AAAABAAAAAAAAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAADoAf//AAAAAOgA//8AABgBAAEAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAADpAKYABUAHEAZDwEAAQFCAAIBAmoAAQABagAAAGEUFxQDEisBFAcBBiInASY0PwE2Mh8BATYyHwEWA6QP/iAQLBD+6g8PTBAsEKQBbhAsEEwPAhYWEP4gDw8BFhAsEEwQEKUBbxAQTBAAAAH//f+xA18DCwAMABJADwABAQpDAAAACwBEFRMCESsBFA4BIi4CPgEyHgEDWXLG6MhuBnq89Lp+AV51xHR0xOrEdHTEAAAAAAEAAAABAADDeRpdXw889QALA+gAAAAAzzWYjQAAAADPNWBN//3/sQOkAwsAAAAIAAIAAAAAAAAAAQAAA1L/agBaA+gAAP/3A6QAAQAAAAAAAAAAAAAAAAAAAAMD6AAAA+//AA8AAAAAAAAAAAAAAAAAAAAAADIAMgML/7EDC/+/4WwBI2xBQBEAAA= at /Users/eamon/projects/frontend/node_modules/webpack/lib/asset/AssetModulesPlugin.js:183:30 at Hook.eval [as call] (eval at create (/Users/eamon/projects/frontend/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:12:16) at Hook.CALL_DELEGATE [as _call] (/Users/eamon/projects/frontend/node_modules/tapable/lib/Hook.js:14:14) at Compilation.getRenderManifest (/Users/eamon/projects/frontend/node_modules/webpack/lib/Compilation.js:4439:36) at /Users/eamon/projects/frontend/node_modules/webpack/lib/Compilation.js:4459:22 at symbolIterator (/Users/eamon/projects/frontend/node_modules/neo-async/async.js:3482:9) at timesSync (/Users/eamon/projects/frontend/node_modules/neo-async/async.js:2297:7) at Object.eachLimit (/Users/eamon/projects/frontend/node_modules/neo-async/async.js:3463:5) at Compilation.createChunkAssets (/Users/eamon/projects/frontend/node_modules/webpack/lib/Compilation.js:4452:12) at /Users/eamon/projects/frontend/node_modules/webpack/lib/Compilation.js:3095:14 webpack 5.65.0 compiled with 2 errors in 1597 ms Files successfully emitted, waiting for typecheck results... Issues checking in progress... No issues found.Lo hice de la siguiente manera. El problema se resuelve en el repositorio CSS de la interfaz de usuario semántica. Sin embargo, la última versión 2.4.1 no lo incluye. Entonces, solo use el repositorio de Github en su paquete.json:
"dependencies": { ..., "semantic-ui-css": "git+https://github.com/Semantic-Org/Semantic-UI-CSS.git" },La compilación del paquete web se realizó correctamente.
Del mismo problema mencionado por @stanislas, la solución es eliminar un punto y coma adicional de semantic.css (o semantic.min.css):
La razón principal de esto es un extra ";" en la línea 19990 de semantic.css Si se elimina, todo va bien.
@font-face { font-family: 'Step'; src: url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAA... // this line }Si bien esta solución funciona, advierto que Semantic-UI no se ha mantenido durante varios años. Fomantic-UI es la bifurcación de la comunidad que se mantiene e incorpora correcciones de errores y características adicionales como brindis.
Para su información, este error se descubrió recientemente, por lo que existe en la versión de lanzamiento actual de Fomantic-UI (2.8.8), pero se corrigió en el código base y se etiquetó para la próxima versión.
A juzgar por este problema: la importación de CSS interrumpe la compilación del paquete web 5
Creo que este es un problema con Semantic-UI-React y Webpack 5 (que es utilizado por Create-React-App).
La respuesta final en ese problema es una sugerencia para cambiar a Fomantic-UI 😅
Esto debe informarse en el repositorio ascendente: https://github.com/Semantic-Org/Semantic-UI . El problema es que está muerto 🙄 La solución razonable es cambiar a https://github.com/fomantic/Fomantic-UI .
https://github.com/Semantic-Org/Semantic-UI-React/issues/4287#issuecomment-935897619
Como @Stanislas, creo que este es un problema con Semantic-UI-React y Webpack 5 (que es utilizado por Create-React-App).
Por el momento, la solución es conectar semantic-ui-css a través de CDN (sin paquete)
Simplemente agregue esta etiqueta de enlace después de inicializar React en su archivo index.html.
índice.html
<body> <!-- ... other HTML ... --> <!-- ... Load React ... --> <link async rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css" /> <!-- Load our React component. --> <script src="like_button.js"></script> </body>Una buena solución es usar Fomantic-UI que es una bifurcación de semántica. Esto se mantiene actualmente.
por lo tanto, puede instalarlo y luego usarlo.
npm install fomantic-ui Aquí está el Fomantic oficial:
Empezando
Y aquí hay un tutorial para la implementación y más información sobre Fomantic:
Medio - Fomántico
¿Por qué deberías usar Fomantic?
porque el desarrollo semántico se ha estancado y hubo múltiples problemas que comenzaron a cuestionar el desarrollo.
Probé todas las soluciones anteriores, pero solo este enlace resolvió mi problema
Yo uso reaccionar versión 5.0.0.
Primero instalé esto:
yarn add --dev @semantic-ui-react/css-patch # or npm install --dev @semantic-ui-react/css-patchEn segundo lugar, agrego esta línea en el archivo "package.json":
{ "scripts": { "postinstall": "semantic-ui-css-patch" } }Y luego eliminé extra ";" desde
@font-face { font-family: 'Step'; src: url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAw... // this line }en el archivo "semantic-ui-css/semantic.css".
Espero que resuelva su problema como yo.