Después de actualizar Next to 11 cuando intento cargar una imagen con:
import segmentLogoWhitePng from 'assets/images/my-image.png'Recibo el siguiente error:
TypeError: unsupported file type: undefined (file: undefined)Acabo de eliminar mi configuración de cargador de imagen/css del paquete web (next.config.js) y comenzó a funcionar.
En next.config.js puede agregar controles y controladores de tipo de archivo. Sé que svg se puede manejar colocando el siguiente código y descargando el paquete npm @svgr/webpack, por lo que posiblemente podría haber un equivalente .png
module.exports = { webpack(config) { config.module.rules.push({ test: /\.svg$/, use: ["@svgr/webpack"], }); return config; }, };Un ejemplo que podría funcionar es este código de este desbordamiento de pila
module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', }, ], }, ], } };Sé que esta respuesta no fue del 100%, pero espero que ayude un poco
Funciona ahora a partir de next@v11.0.1 . No es necesario seguir los pasos a continuación.
Deshabilite la función de imágenes estáticas por ahora como solución alternativa:
// next.config.js module.exports = { images: { disableStaticImages: true } }Actualización: esto se solucionó en next@11.0.1-canary.4 . Instalarlo:
$ npm install next@canaryVea el tema relacionado y el PR .
Deshabilitar importaciones estáticas
-Desde la versión 10.0.0, Next.js tiene un componente de imagen incorporado y una optimización de imagen automática
El comportamiento predeterminado le permite importar archivos estáticos como el icono de importación de './icon.png y luego pasarlo a la propiedad src. En algunos casos, es posible que desee deshabilitar esta función si entra en conflicto con otros complementos que esperan que la importación se comporte de manera diferente. Puede deshabilitar las importaciones de imágenes estáticas con la siguiente configuración a continuación.
// next.config.js images: { disableStaticImages: true }mire el problema en el repositorio de GitHub Tipos de corrección para la imagen estática, funcionará ahora mismo
https://github.com/vercel/next.js/pull/25808
module.exports = { images: { disableStaticImages: true } }