Assets require hook
Clase 11 de 22 • Curso de Server Side Render con Express
Contenido del curso
Diego Andres Cabrera Rojas
student•
hace 6 años
Jose Daniel Hernandez Quiceno
student•
hace 6 años
Héctor Hugo Sandoval Marcelo
student•
hace 5 años
Diego Andres Cabrera Rojas
Jose Daniel Hernandez Quiceno
Héctor Hugo Sandoval Marcelo
Fernando Cordero
Daniel Valdez Torres
Daniel Hernández
Carlos López
José Ocando
Oscar Rodrigo Leon Mojica
Luis Encina
José Enrique Pérez Aquino
Juan Pablo Celiz
Hector Jose Flores Colmenarez
Miguel Hernández
Miguel Hernández
Enric Vallribera
Carlos Sampol
Enric Vallribera
Victor Hugo Muñoz Hernández
Bruno Amadori
Miguel Hernández
Miguel Hernández
Anibal Moises Garcia Moy
Félix Andersson
Jorge Iván Otero Vargas
Guillermo Andres Valenzuela Palencia
Alan David R.L.
Juan Carlos Pinzón
Nilson Diaz
Axlin Miranda
john fredy quimbaya orozco
Jorge Méndez Ortega
Massimo Di Berardino
john fredy quimbaya orozco
Para los que no les funciona los assets , sigue mostrandose rota las cosas , solo instalen la version 5.1 npm install file-loader@5.1.0 -D -E , desde la ultima version no esta funcionando , aqui la gran pregunta seria , como se logra entonces cargar las imagenes con la nueva version, pero si no quieren tener problemas ahi esta la solucion temporal.
Si alguien lo logra con las nuevas versiones de file-loader, por favor cuentanos, realmente esta es una solucion temporal
Es verdad, la versión 6 no funciona :/ Gracias por la solución
Super! Para la fecha aun hay problemas con la version 6.0.0 de file-loader y asset-require-hook, entonces instalen el file-loader con la version 5.1.0. y no tendrán problemas al chequear su server-side.
npm i file-loader@5.1.0 -D ```
Gracias!, Marzo del 2021 y funciona, y sigue sin cargar las imagenes con la version 6.0.0
En mi caso tuve que agregar mi componente Layout para que se viera el header de la app.
const html = renderToString( <Provider store={store}> <StaticRouter location={req.url} context={{}}> <Layout> {renderRoutes(serverRoutes)} </Layout> </StaticRouter> </Provider>, );
Agradezco la solución, sin embargo me gustaría que el Prof. nos ampliara el porque sucede esto...
Gracias
Exacto, no es la solución del problema… Porque solo agrega el header. Sigue persistiendo el problema con los iconos de los items.
para los que estan trabajando con la version 6 de file-loader tiene que especificar el tipo de hashing para asset-require-hook y para el file-loader
require('asset-require-hook')({ extensions: ['jpg', 'png', 'gif'], name: '/assets/[md5:hash].[ext]', });
{ test: /\.(png|gif|jpg)$/, use: [ { 'loader': 'file-loader', options: { name: 'assets/[md5:hash].[ext]', } } ] },
Genial! ha funcionado! 1- modificación en src/server/index.js 2- modificación de webpack.config.js (module.rules[*].'file-loader')
Assets require hook
Assets require hook es un hook que se encarga de importar todas nuestras imágenes en tiempo real cuando sean requeridas mediante SSR
Con esto, tendremos listo nuestro SSR en su totalidad. Para comenzar instalamos la dependencias
npm install asset-require-hook
Luego agregamos la siguiente lineas al index.js del servidor
require('asset-require-hook')({ extensions: ['jpg', 'png', 'gif'], name: '/assets/[hash].[ext]', });
Y listo, tendremos cualquier tipo de imagen disponible en nuestro SSR app
"Vamos a copiar exactamente" (min 1:50) es la definición más precisa del curso.
Para los que tienen problemas cargando las imágenes usando el paquete asset-require-hook verifiquen que version de file-loader tienen, si tienen la versión 6.0.0 deberán bajar a la versión ```5.1.0`` la cual es la más reciente donde este problema no ocurre.
Al parecer hay algunos problemas con file-loader@6.0.0 en su ultima version.
Como saben en la versión 6 de file-loader no funciona bien ya que el hash que se genera en el backend es diferente al del frontend, lo solucione dejando de usar el hash en la configuración tanto de webpack como del asset require hook. Al final quedo así: en index.js del servidor
require('asset-require-hook')({ extensions: ['jpg', 'png', 'gif'], name: '/assets/[name].[ext]', })
y en webpack añadi la configuración para el nombre de los assets de la siguiente manera en el output de webpack:
output: { // tu configuración assetModuleFilename: 'assets/[name][ext]', }
Con eso aunque tenga el nombre por defecto del archivo ya cargaran los assets. Y en la configuración de webpack en las reglas para el file-loader actualmente esta obsoleto y recomiendan usar los asset modules el cual para que funcione a nuestro proyecto deberia ser:
{ test: /\.(png|jpg)$/i, type: 'asset/resource', }
Espero les funcione, yo estube toda la tarde buscando una solución pero al final logre solucionarlo así ya que en internet no encontre información sobre assets require hook
Por cierto, la configuración de las rules solo funciona en webpack5 por que ahí file-loader esta DEPRECATED
Tengo la configuración tal cual, incluso he copiado y pegado código y no me muestra las imágenes sin Javascript. Veo que no soy al único que le ha pasado.
Que versión del file-loader estas usando ? Recientemente actualizaron a la v6 y esta causando ese conflicto. Si bajas a la 5.1.0 del file-loader no deberias tener problemas
He visto que hay un problema con el file-loader, si se utiliza la versión actual, que en mi caso es la versión 6, no funciona, he descargado el proyecto de archivos y funcionaba hasta que he actualizado a esa versión. Como se podría resolver?
Mi solución fue utilizar los Asset Modules que vienen con Webpack5, especificamente asset/resource
{ test: /\.(png|gif|jpg)$/, type: 'asset/resource', }
Para que funcionen los hashes también agregué en el output la regla de assetModuleFilename de la siguiente manera
output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle/app.js', publicPath: '/', assetModuleFilename: 'assets/[hash][ext]', }
Para que funcione asset-require-hook tenemos que tener el mismo método de cifrado, en este caso webpack utiliza md4 con 20 caracteres, entonces nuestra configuración de asset-require-hook queda así
require('asset-require-hook')({ extensions: ['jpg', 'png', 'gif'], name: 'assets/[md4:hash:20].[ext]', });
Espero les ayude, pueden jugar con la configuración de asset-require-hook en el método de cifrado o la cantidad de caracteres si no funciona.
Lo que pude detectar, es que si tenés la version 6.0, de alguna forma el HASH que se genera como nombre de los archivos de las imagenes en el backend no coincide con el HASH de la URL del llamado a cada imagen en el frontend.
raro.
Si, también note lo mismo. Sigo sin solucionarlo :(
En el output de webpack agrega:
assetModuleFilename: 'assets/[name][ext]',
y en el servidor modifica el name:
require('asset-require-hook')({ extensions: ['jpg', 'png', 'gif'], name: '/assets/[name].[ext]', })
y en las reglas donde esta file-loader deberia ser así si usas webpack5:
{ test: /\.(png|jpg)$/i, type: 'asset/resource', }
si corremos npm outdated nos damos cuenta de que la versión estable de file-loader es la 5.1.0
Ese paquete esta bastante viejo y utiliza dependencias deprecadas
Personalmente prefiero dejar el pre-render sin esas imagenes
Deprecado != Deprecate
Al deshabilitar Javascript, no me cargan las imagenes....
Hola, Guillermo.
Asegúrate de tener el archivo así:
require('ignore-styles'); require('@babel/register')({ presets: ['@babel/preset-env', '@babel/preset-react'], }); require('asset-require-hook')({ extensions: ['jpg', 'png', 'gif'], name: '/assets/[hash].[ext]', }); require('./server');
Yo tenía el mismo problema que tu pero era porque tenia un typo. Espero te sirva.
Un dato, no me cargaba los archivos .webp me daba error, los a cambié a .png y ya funcionó todo ok 👀. Sí agregué la extensión en el asset-require-hook
Hola ! Existe alguna alternativa a asset-require-hook sin tener que degradar dependencias ? ya que la unica manera con la que consegui solucionarlo fue siriviendo las imagenes como estaticos con express.static() .
Saludos, en el caso que los assets del css se tenga en dos carpeta ejemplo: /mobile /desktop - estilo para versión escritorio
En ese caso, como se le pasaría ese valor en name?
require('asset-require-hook')({ extensions: ['jpg', 'png', 'gif'], name: '/assets/[hash].[ext]', });
sale el siguiente error
const resource = this._identifier.split('!').pop(); ^
TypeError: Cannot read property 'split' of undefined
si alguien sabe como solucionar
Por qué usan react-asset-hooks y no utilizan el manejo de staticos de express?
Hola Jorge, fue la manera en la que el profesor del curso lo implemento, pero si te funciona bien con el manejo de estáticos de express también puedes hacerlo
tengo el siguiente error const resource = this._identifier.split('!').pop(); ^
TypeError: Cannot read property 'split' of undefined