Copiar el contenido del archivo de texto de ReactJS en el componente durante la compilación.

Answer

1. 

   davy.ai

   June 12, 2023 at 2:43 pm

   Usando ReactJS para construir una página de “Términos de Servicio”

   Problema

   Como un experto en IT especializado en ReactJS, estás trabajando en una página de “Términos de Servicio” y quieres copiar los contenidos de un archivo (tos-text.txt) en el componente durante el tiempo de construcción para evitar el fetch de los datos cuando la página se abra. Sin embargo, tu intento de implementar esto ha sido fallido.

   <h2>Términos de Servicio</h2>
   
   
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in scelerisque odio, sed consequat ante. Donec lectus tortor, ullamcorper quis risus nec, cursus hendrerit libero. In hac habitasse platea dictumst. Quisque et posuere urna. Suspendisse convallis faucibus nulla, non egestas libero aliquet non. Donec tincidunt purus sed sem suscipit feugiat. Pellentesque rutrum blandit gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque erat urna, lobortis sed turpis a, aliquet aliquet lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quis nibh et mi ullamcorper mattis eu eget lectus.
   
   

   import { Container } from 'react-bootstrap';
   
   // Page content
   import TosText from 'config/tos-text.txt';
   
   // --- Términos de Servicio ---
   const Tos = () => {
     return (
       <container classname="flex-grow-1 tos">
         <div dangerouslysetinnerhtml="{{" __html:="" tostext="" }}=""></div>
       </container>
     );
   };
   
   export default Tos;
   

   Solución

   Actualmente, la página sólo muestra un enlace al archivo de texto generado (/static/media/tos-text.dc220bee.txt), y el intento de instalar react-app-rewired e implementarlo usando config-overrides.js ha fallado.

   module.exports = function override(config, _env) {
     let rules = config.module.rules[1].oneOf;
     rules.splice(rules.length - 1, 0, {
         test: /\.txt/,
         type: 'asset/source',
     });
   
     return config;
   }
   

   El mensaje de error sugiere que el objeto de configuración de Webpack ha sido inicializado con una configuración que no coincide con el esquema API, lo que indica que la propiedad type del tipo de módulo debe ser una cadena de uno de los tipos soportados ("javascript/auto", "javascript/dynamic", "javascript/esm", "json", "webassembly/experimental")

   Una posible solución a este problema sería modificar el objeto de configuración de Webpack para especificar correctamente el tipo de recurso. Para hacerlo:

   1. Crea un nuevo archivo en el directorio raíz de tu aplicación llamado config-overrides.js.
   2. Usa react-app-rewired para configurar Webpack usando el siguiente script en tu package.json.

   {
     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build"
     }
   }
   

   1. Agrega lo siguiente en config-overrides.js:

   module.exports = function override(config, _env) {
     config.module.rules.push({
       test: /\.txt$/i,
       use: 'raw-loader',
     });
   
     return config;
   };
   

   Esta modificación agrega una nueva regla a la configuración de Webpack, especificando que los archivos .txt deben ser cargados usando el módulo raw-loader, que convertirá el contenido del archivo en una cadena.

   Tu componente Tos ahora puede usar la función require para obtener el contenido del archivo de texto:

   import React from 'react';
   
   // --- Términos de Servicio ---
   const Tos = () => {
     const TosText = require('./tos-text.txt').default;
   
     return (
       <div>
         <h2>Términos de Servicio</h2>
         <div dangerouslysetinnerhtml="{{" __html:="" tostext="" }}=""></div>
       </div>
     );
   };
   
   export default Tos;
   

   Esto cargará el contenido del archivo durante el tiempo de construcción y evitará la necesidad de fetchearlo cuando la página se abra. Tu página de “Términos de Servicio” ahora debería mostrar los contenidos del archivo, como se esperaba.

Comments are closed.