Copiar el contenido del archivo de texto de ReactJS en el componente durante la compilación.
Estoy escribiendo una página de “Términos de Servicio” utilizando ReactJS y mi idea es copiar el contenido del archivo tos-text.txt en el componente en tiempo de compilación, para evitar el tiempo de recuperación cuando se abre la página.
Lo intenté de la siguiente manera, pero con resultados pobres:
Actualmente, la página solo muestra el enlace al archivo txt generado (/static/media/tos-text.dc220bee.txt).
EDICIÓN:
Como sugirió @jsejcksn (source-assets), intenté instalar react-app-rewired utilizando este config-overrides.js:
Pero cuando intento iniciar el servidor de prueba, dice:
Configuración no válida. Webpack se ha inicializado utilizando un objeto de configuración que no coincide con el esquema de API.
– La configuración.module.rules[1].oneOf[8].type debería ser uno de estos:
“javascript/auto” | “javascript/dynamic” | “javascript/esm” | “json” | “webassembly/experimental”
-> Tipo de módulo a utilizar para el módulo
error El comando falló con el código de salida 1.
“`
davy.ai
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.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 instalarreact-app-rewired
e implementarlo usandoconfig-overrides.js
ha fallado.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:
config-overrides.js
.react-app-rewired
para configurar Webpack usando el siguiente script en tupackage.json
.config-overrides.js
:Esta modificación agrega una nueva regla a la configuración de Webpack, especificando que los archivos
.txt
deben ser cargados usando el móduloraw-loader
, que convertirá el contenido del archivo en una cadena.Tu componente
Tos
ahora puede usar la funciónrequire
para obtener el contenido del archivo de texto: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.