Obteniendo un error con nextjs cuando se usa el tipo de módulo de activo 'asset/inline' en la configuración personalizada del paquete web cuando se ejecuta yarn dev . Estaba tratando de usar el tipo de módulo de activos 'activo/en línea' para exportar el URI de la imagen importada en línea, pero recibí este error. Sin embargo, usar 'activo' en lugar de 'activo/en línea' no muestra ningún error.
Error:
error - ./pages/index.js:2:0 Module not found: Invalid generator object. Asset Modules Plugin has been initialized using a generator object that does not match the API schema. - generator has an unknown property 'filename'. These properties are valid: object { dataUrl? } -> Generator options for asset/inline modules. 1 | import React from 'react'; > 2 | import test from '../test.jpeg' 3 | 4 | const Page = () => { 5 | return ( https://nextjs.org/docs/messages/module-not-foundpaquete.json:
{ "name": "my-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "12.1.0", "react": "17.0.2", "react-dom": "17.0.2" }, "devDependencies": { "eslint": "8.10.0", "eslint-config-next": "12.1.0" } }siguiente.config.js:
module.exports = { webpack: (config, options) => { config.module.rules.push({ test: /\.jpeg/, type: 'asset/inline', }) return config }, }páginas/index.js:
import React from 'react'; import test from '../test.jpeg' const Page = () => { return ( <> <div>Index Page</div> <img src={test} alt="pulkit"/> </> ) } export default Page;Estructura de carpetas:
app |--node_modules |--package.json |--test.jpeg |--next.config.js |--pages |--index.jsACTUALIZADO
Este artículo también mencionó sus configuraciones relacionadas
https://survivejs.com/webpack/loading/images/
type: "asset/inline" emite sus recursos como cadenas base64 dentro de los activos emitidos. El proceso disminuye la cantidad de solicitudes necesarias mientras aumenta el tamaño del paquete. El comportamiento se corresponde con url-loader.
Puedes probar esto en su lugar
config.module.rules.push({ test: /\.jpeg/, type: 'asset', parser: { dataUrlCondition: { maxSize: 15000 } }, }) Si le preocupa el rendimiento de la imagen, puede probar next/image que tiene un conjunto de ayudantes de rendimiento de la imagen.
Otro aspecto, también me gustaría decirte que con asset/inline , todas tus imágenes se convertirán a base64 y se incrustarán en HTML, lo que aumentará el tiempo de carga web inicial. ( https://bunny.net/blog/por-que-optimizar-tus-imagenes-con-base64-es-casi-siempre-una-mala-idea/ )
RESPUESTA ANTIGUA
Según tengo entendido, asset/inline es para URI de datos con prefijo como este data: ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs ). El problema con su caso es que las imágenes están en bytes y no se pueden convertir a los formatos correctos para su visualización (si sus imágenes son base64, es posible que pueda usar asset/inline )
Personalmente, estoy usando asset/resource en lugar de tener URI
Puedes modificar tus configuraciones de esta manera
module.exports = { webpack: (config, options) => { config.module.rules.push({ test: /\.jpeg/, type: 'asset/resource', }) return config }, }Aquí hay un artículo muy útil para ayudarlo a comprenderlo más profundamente https://dev.to/smelukov/webpack-5-asset-modules-2o3h
Encontré cómo usamos activos en Webpack 5 aquí también
{ test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' }, { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' },Con suerte, puede ayudarlo a resolver su problema.
No necesita la configuración del paquete web personalizado adicional para importar imágenes, Next.js ya proporciona una forma integrada de importar imágenes locales de forma estática.
Elimine la configuración de su paquete web personalizado, luego modifique el código de su componente de acuerdo con el siguiente fragmento.
import React from 'react'; import test from '../test.jpeg' const Page = () => { return ( <> <div>Index Page</div> <img src={test.src} alt="pulkit"/> </> ) } export default Page; Además del campo src , también tiene acceso al width y height de la imagen si desea usar eso en el elemento <img> .
De la documentación de optimización de imágenes :
Next.js determinará automáticamente el
widthy elheightde su imagen según el archivo importado. Estos valores se utilizan para evitar el cambio de diseño acumulativo mientras se carga la imagen.