No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Assets require hook

11/22
Recursos

Aportes 28

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Para los que no les funciona los assets , sigue mostrandose rota las cosas , solo instalen la version 5.1
npm install [email protected] -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.

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[email protected].1.0 -D ```

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

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]',
                        }
                    }
                ]
            },
<h1>Assets require hook</h1>

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

鈥淰amos 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 [email protected] 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

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

Al deshabilitar Javascript, no me cargan las imagenes鈥

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

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

TypeError: Cannot read property 鈥榮plit鈥 of undefined

Para los que est茅n realizando proyectos similares utilizando estos conocimientos y est茅n teniendo problemas con el file-loader y el assets-require-hook ya que no cargan las im谩genes. Les recomiendo (en tal caso que puedan usar webpack 5) que le echen un vistazo a assets/modules. Soluciona el problema de las im谩genes y su configuraci贸n es sencilla en su webpack.config a帽adir铆an esto y entonces ya podr铆an cargar los assets, me vino de maravilla, creo que es la alternativa a file-loader que estamos buscando.

 module: {
   rules: [
     {
       test: /\.png/,
       type: 'asset/resource'
     }
   ]
 },```

驴Que diferencia hay cuando indicamos una rutas con punto slash 鈥./鈥 o simplemente slash 鈥/鈥 ?

Si alguien tiene idea de por que al deshabilitar el js al navegador no me parecen los archivos .png, por favor deje un comentario debajo.
-hice el install
-est谩 bien escrito el require

En mi caso yo configuro dentro de express en el apartado de las configuraciones para solo el entorno de desarrollo un servidor de est谩ticos con express. No es necesario instalar una dependencia extra que agrega peso a nuestro proyecto, cuando express viene inclu铆do con un servidor de est谩ticos. Para el entorno de producci贸n, los estaticos no se sirven desde express (por eso solo debemos configurarlo para el development) y en su lugar servimos los est谩ticos con Nginx, lo cual lo hace m谩s eficientemente.

renderizar los assets desde node, c贸mo el cargar imagenes, videos ,etc

asset-require-hook

npm i asset-require-hook

server/index.js

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

Hola Compa帽eros alguien sabe que pasa con mis Styles cuando deshabilito JS, las imasgen茅s cargan bi茅n intente la soluci贸n insatalar la version 5.1 de file-loader y funcion贸, pero intent茅 con la soluci贸n del <Layout /> para poder aparecer mi <Header /> y aparece sin Styles

Genial, ya me estoy familiarizando con el tema, de a poco鈥
Aunque hay problemas con las im谩genes usando la versi贸n 6 de file-loader. Con la soluci贸n de los compa帽eros fue suficiente鈥
instalar file-loader 5.1.0

Invariant failed: You should not use <Switch> outside a <Router>
    at invariant (/mnt/c/Users/Leonardo/code/bff/srr/video-leo/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:13:11)
    at Object.children (/mnt/c/Users/Leonardo/code/bff/srr/video-leo/node_modules/react-router/modules/Switch.js:17:11)
    at ReactDOMServerRenderer.render (/mnt/c/Users/Leonardo/code/bff/srr/video-leo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3855:55)
    at ReactDOMServerRenderer.read (/mnt/c/Users/Leonardo/code/bff/srr/video-leo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3536:29)
    at renderToString (/mnt/c/Users/Leonardo/code/bff/srr/video-leo/node_modules/react-dom/cjs/react-dom-server.node.development.js:4245:27)

tengo ese error, no encuentro la forma de arreglarlo

const renderApp = (req, res) => {
  const store = createStore(reducer, initialState);
  const html = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.url} context={{}}>
        <>
          {renderRoutes(serverRoutes)}
        </>
      </StaticRouter>
    </Provider >,
  );```
si comento la linea de renderRoutes(serverRoutes) el error desaparece, ya comprebe el codigo y lo tengo igual, puede ser por la version de paquetes?

AKI va el package.json

{
鈥渘ame鈥: 鈥渓eoVideo鈥,
鈥渧ersion鈥: 鈥1.0.0鈥,
鈥渄escription鈥: 鈥溾,
鈥渕ain鈥: 鈥渋ndex.js鈥,
鈥渟cripts鈥: {
鈥渢est鈥: 鈥渆cho 鈥淓rror: no test specified鈥 && exit 1鈥,
鈥渂uild鈥: 鈥渨ebpack --mode production鈥,
鈥渟tart鈥: 鈥渨ebpack-dev-server --open --mode development鈥,
鈥渄ev鈥: 鈥渘odemon ./src/server/index.js鈥
},
鈥渒eywords鈥: [],
鈥渁uthor鈥: 鈥溾,
鈥渓icense鈥: 鈥淚SC鈥,
鈥渄ependencies鈥: {
"@babel/register": 鈥7.9.0鈥,
鈥渁sset-require-hook鈥: 鈥淾1.2.0鈥,
鈥渂abel-eslint鈥: 鈥10.0.3鈥,
鈥渃lassnames鈥: 鈥2.2.6鈥,
鈥渄otenv鈥: 鈥8.2.0鈥,
鈥渆slint鈥: 鈥6.8.0鈥,
鈥渆slint-config-airbnb鈥: 鈥17.1.1鈥,
鈥渆slint-plugin-import鈥: 鈥2.20.0鈥,
鈥渆slint-plugin-jsx-a11y鈥: 鈥6.2.3鈥,
鈥渆slint-plugin-react鈥: 鈥7.18.0鈥,
鈥渆xpress鈥: 鈥4.17.1鈥,
鈥渉istory鈥: 鈥淾4.10.1鈥,
鈥渋gnore-styles鈥: 鈥淾5.0.1鈥,
鈥渕d5鈥: 鈥2.2.1鈥,
鈥減rop-types鈥: 鈥15.7.2鈥,
鈥渞eact鈥: 鈥16.12.0鈥,
鈥渞eact-dom鈥: 鈥16.12.0鈥,
鈥渞eact-redux鈥: 鈥7.1.3鈥,
鈥渞eact-router鈥: 鈥淾5.2.0鈥,
鈥渞eact-router-config鈥: 鈥淾5.1.1鈥,
鈥渞eact-router-dom鈥: 鈥5.1.2鈥,
鈥渞edux鈥: 鈥4.0.5鈥,
鈥渨ebpack鈥: 鈥淾4.43.0鈥
},
鈥渄evDependencies鈥: {
"@babel/core": 鈥7.8.3鈥,
"@babel/plugin-proposal-numeric-separator": 鈥7.8.3鈥,
"@babel/preset-env": 鈥7.8.3鈥,
"@babel/preset-react": 鈥7.8.3鈥,
鈥渂abel-loader鈥: 鈥8.0.6鈥,
鈥渃ss-loader鈥: 鈥3.4.2鈥,
鈥渇ile-loader鈥: 鈥4.3.0鈥,
鈥渉tml-loader鈥: 鈥0.5.5鈥,
鈥渉tml-webpack-plugin鈥: 鈥3.2.0鈥,
鈥渕ini-css-extract-plugin鈥: 鈥0.7.0鈥,
鈥渘ode-sass鈥: 鈥4.14.1鈥,
鈥渘odemon鈥: 鈥淾2.0.3鈥,
鈥渘pm-force-resolutions鈥: 鈥0.0.3鈥,
鈥渞eact-hot-loader鈥: 鈥淾4.12.21鈥,
鈥渟ass-loader鈥: 鈥7.3.1鈥,
鈥渨ebpack-cli鈥: 鈥3.3.10鈥,
鈥渨ebpack-dev-middleware鈥: 鈥淾3.7.2鈥,
鈥渨ebpack-dev-server鈥: 鈥3.11.0鈥,
鈥渨ebpack-hot-middleware鈥: 鈥淾2.25.0鈥
},
鈥渞esolutions鈥: {
"@babel/preset-env": 鈥7.8.3鈥,
"@babel/plugin-proposal-numeric-separator": 鈥7.8.3鈥
}
}



Creo que con webpack5 ya todo cambio 馃槮

Hola Todos! Instalar assets-require-hook nos va a permitir indicarle al servidor donde se encuentran los assets de nuestra aplicaci贸n. 馃槂

Assets require hook, nos permite poder cargar los archivos requeridos desde node.

Todo esto para solucionar problemas de SEO, si es una aplicaci贸n web no lo veo utilidad mandarle toda la carga a la maquina de nuevo como lo hac铆amos con otros lenguajes.

Assets require hook es un hook que se encarga de importar todas nuestras im谩genes en tiempo real cuando sean requeridas mediante SSR