Assets require hook

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

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 [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 ‘split’ 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

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

{
“name”: “leoVideo”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “webpack --mode production”,
“start”: “webpack-dev-server --open --mode development”,
“dev”: “nodemon ./src/server/index.js”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
"@babel/register": “7.9.0”,
“asset-require-hook”: “^1.2.0”,
“babel-eslint”: “10.0.3”,
“classnames”: “2.2.6”,
“dotenv”: “8.2.0”,
“eslint”: “6.8.0”,
“eslint-config-airbnb”: “17.1.1”,
“eslint-plugin-import”: “2.20.0”,
“eslint-plugin-jsx-a11y”: “6.2.3”,
“eslint-plugin-react”: “7.18.0”,
“express”: “4.17.1”,
“history”: “^4.10.1”,
“ignore-styles”: “^5.0.1”,
“md5”: “2.2.1”,
“prop-types”: “15.7.2”,
“react”: “16.12.0”,
“react-dom”: “16.12.0”,
“react-redux”: “7.1.3”,
“react-router”: “^5.2.0”,
“react-router-config”: “^5.1.1”,
“react-router-dom”: “5.1.2”,
“redux”: “4.0.5”,
“webpack”: “^4.43.0”
},
“devDependencies”: {
"@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”,
“babel-loader”: “8.0.6”,
“css-loader”: “3.4.2”,
“file-loader”: “4.3.0”,
“html-loader”: “0.5.5”,
“html-webpack-plugin”: “3.2.0”,
“mini-css-extract-plugin”: “0.7.0”,
“node-sass”: “4.14.1”,
“nodemon”: “^2.0.3”,
“npm-force-resolutions”: “0.0.3”,
“react-hot-loader”: “^4.12.21”,
“sass-loader”: “7.3.1”,
“webpack-cli”: “3.3.10”,
“webpack-dev-middleware”: “^3.7.2”,
“webpack-dev-server”: “3.11.0”,
“webpack-hot-middleware”: “^2.25.0”
},
“resolutions”: {
"@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