Assets require hook

Clase 11 de 22 • Curso de Server Side Render con Express

Diego Andres Cabrera Rojas

student•

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.

Jose Daniel Hernandez Quiceno

student•

Si alguien lo logra con las nuevas versiones de file-loader, por favor cuentanos, realmente esta es una solucion temporal

Héctor Hugo Sandoval Marcelo

student•

Es verdad, la versión 6 no funciona :/ Gracias por la solución

Fernando Cordero

student•

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 ```

Daniel Valdez Torres

student•

Gracias!, Marzo del 2021 y funciona, y sigue sin cargar las imagenes con la version 6.0.0

Daniel Hernández

student•

En mi caso tuve que agregar mi componente Layout para que se viera el header de la app.

const html = renderToString(
    &lt;Provider store={store}&gt;
      &lt;StaticRouter location={req.url} context={{}}&gt;
        &lt;Layout&gt;
          {renderRoutes(serverRoutes)}
        &lt;/Layout&gt;
      &lt;/StaticRouter&gt;
    &lt;/Provider&gt;,
  );

Carlos López

student•

Agradezco la solución, sin embargo me gustaría que el Prof. nos ampliara el porque sucede esto...

Gracias

José Ocando

student•

Exacto, no es la solución del problema… Porque solo agrega el header. Sigue persistiendo el problema con los iconos de los items.

Oscar Rodrigo Leon Mojica

student•

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]',
                        }
                    }
                ]
            },

Luis Encina

student•

Genial! ha funcionado! 1- modificación en src/server/index.js 2- modificación de webpack.config.js (module.rules[*].'file-loader')

José Enrique Pérez Aquino

student•

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

Juan Pablo Celiz

student•

"Vamos a copiar exactamente" (min 1:50) es la definición más precisa del curso.

Hector Jose Flores Colmenarez

student•

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.

Miguel Hernández

student•

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

Miguel Hernández

student•

Por cierto, la configuración de las rules solo funciona en webpack5 por que ahí file-loader esta DEPRECATED

Enric Vallribera

student•

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.

Carlos Sampol

Team Platzi•

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

Enric Vallribera

student•

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?

Victor Hugo Muñoz Hernández

student•

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.

Bruno Amadori

student•

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.

Miguel Hernández

student•

Si, también note lo mismo. Sigo sin solucionarlo :(

Miguel Hernández

student•

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',
}

Anibal Moises Garcia Moy

student•

si corremos npm outdated nos damos cuenta de que la versión estable de file-loader es la 5.1.0

Félix Andersson

student•

Ese paquete esta bastante viejo y utiliza dependencias deprecadas

Personalmente prefiero dejar el pre-render sin esas imagenes

Jorge Iván Otero Vargas

student•

Deprecado != Deprecate

Guillermo Andres Valenzuela Palencia

student•

Al deshabilitar Javascript, no me cargan las imagenes....

Alan David R.L.

student•

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.

Juan Carlos Pinzón

student•

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

Nilson Diaz

student•

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() .

Axlin Miranda

student•

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]',
});

john fredy quimbaya orozco

student•

sale el siguiente error

const resource = this._identifier.split('!').pop(); ^

TypeError: Cannot read property 'split' of undefined

si alguien sabe como solucionar

Jorge Méndez Ortega

student•

Por qué usan react-asset-hooks y no utilizan el manejo de staticos de express?

Massimo Di Berardino

student•

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

john fredy quimbaya orozco

student•

tengo el siguiente error const resource = this._identifier.split('!').pop(); ^

TypeError: Cannot read property 'split' of undefined

const html = renderToString(
    &lt;Provider store={store}&gt;
      &lt;StaticRouter location={req.url} context={{}}&gt;
        &lt;Layout&gt;
          {renderRoutes(serverRoutes)}
        &lt;/Layout&gt;
      &lt;/StaticRouter&gt;
    &lt;/Provider&gt;,
  );

 {
                test: /\.(png|gif|jpg)$/,
                use: [
                    {
                        'loader': 'file-loader',
                        options: {
                            name: 'assets/[md5:hash].[ext]',
                        }
                    }
                ]
            },

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');

Assets require hook

Conocimientos necesarios para aplicar SSR

Lo que aprenderás sobre server side render

Presentación del proyecto del curso y sus herramientas

¿Qué es Server Side Rendering?

Preparando entorno para aplicar SSR

Actualizando dependencias en NPM

Creación del servidor en Express

Usando Nodemon y Dotenv

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Abstrayendo React Router, creando history y haciendo initialState más accesible

Aplicar Server Side Rendering

Definición de la función principal para realizar el renderizado desde el servidor

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando webpack para producción

Optimización del Build

Aplicar hashes al nombre de nuestros builds

Buenas prácticas de Server Side Render

Vendorfiles en Webpack: definiendo cacheGroups

Vendorfiles en Webpack: generando el vendorfile

Configuración de ESLint

Alternativas al SSR con Express

Cómo implementar Next.js

Cómo usar Gatsby.js

Cuando usar cada una de las herramientas presentadas