<image/> tag error in version 11.0.0

[maximegheraille]

What version of Next.js are you using?

11.0.0

What version of Node.js are you using?

v14.15.3

What browser are you using?

chrome

What operating system are you using?

Windows

How are you deploying your application?

none

Describe the Bug

Hi,
I am getting a problem with an tag when upgrading from 10.2.3 to 11.0.0 while changing nothing in my code.

error on the image src

Type 'StaticImageData' is not assignable to type 'string'.ts(2322)
index.d.ts(2145, 9): The expected type comes from property 'src' which is declared here on type 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>'

error from the console

error - ./public/images/logo.png
TypeError: unsupported file type: undefined (file: undefined)

my simple image tag

import logo from "../../../public/images/logo.png";
<img
src={logo}
alt="Picture of the author"
className="h-full"
/>

Expected Behavior

I expected to have no problem when upgrading to 11.0.0

To Reproduce

use an <img/> tag with a local image with version 10.2.3 and upgrade to version 11.0.0

[LukasGirsch]

I'm getting the same error when using the import in the style tag as url but with a png.

I have been using webpack 5 with 10.2.3 previously and have not had any issues.

[gu-stav]

Same as: #25950

Can you disable the new static image feature for now:

// next.config.js

module.exports = {
  images: {
    disableStaticImages: true
  }
}

[deadcoder0904]

@gustavpursche that works as a workaround for now :)

[timneutkens]

use an tag with a local image with version 10.2.3 and upgrade to version 11.0.0

I think that you're leaving out that you customized the webpack configuration to load images. Can you please add a complete reproduction.

[WilsonPhooYK]

I have the same problem when using with

const withImages = require('next-images') to load images previously from work folder instead of public folder.

It works after removing it since now we can directly import the image outside of the public folder in NextJS v11.

[deadcoder0904]

@timneutkens here's my repro:

next.config.js

const path = require('path')
const { createLoader } = require('simple-functional-loader')
const visit = require('unist-util-visit')
const withBundleAnalyzer = require('@next/bundle-analyzer')({
	enabled: process.env.ANALYZE === 'true',
})

const rehypeHighlightCode = require('./rehype/highlight-code')
const rehypeMetaAttribute = require('./rehype/meta-attribute')
// const { withSyntaxHighlighting } = require('./remark/withSyntaxHighlighting')
// const withCodeSamples = require('./remark/withCodeSamples')

module.exports = withBundleAnalyzer({
	pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
	experimental: {
		modern: true,
	},
	images: {
		disableStaticImages: true,
	},
	redirects: async () => {
		return require('./redirects.json')
	},
	webpack: (config, options) => {
		config.module.rules.push({
			test: /\.(svg|png|jpe?g|gif|mp4)$/i,
			use: [
				{
					loader: 'file-loader',
					options: {
						publicPath: '/_next',
						name: 'static/media/[name].[hash].[ext]',
					},
				},
			],
		})

		const mdx = [
			options.defaultLoaders.babel,
			{
				loader: '@mdx-js/loader',
				options: {
					remarkPlugins: [
						/*withCodeSamples, withSyntaxHighlighting*/
					],
					rehypePlugins: [rehypeMetaAttribute, rehypeHighlightCode],
				},
			},
		]

		config.module.rules.push({
			test: /\.mdx$/,
			oneOf: [
				{
					resourceQuery: /preview/,
					use: [
						...mdx,
						createLoader(function (src) {
							if (src.includes('<!-- more -->')) {
								const [preview] = src.split('<!-- more -->')
								return this.callback(null, preview)
							}

							const [preview] = src.split('<!--/excerpt-->')
							return this.callback(null, preview.replace('<!--excerpt-->', ''))
						}),
					],
				},
				{
					resourceQuery: /rss/,
					use: [
						...mdx,
						createLoader(function (src) {
							return this.callback(null, src)
						}),
					],
				},
				{
					include: [path.resolve(__dirname, 'src/pages/essay')],
					use: [
						...mdx,
						createLoader(function (src) {
							const content = [
								'import Essay from "@/components/Essay"',
								'export { getStaticProps } from "@/utils/essay/getStaticProps"',
								src,
								'export default (props) => <Essay meta={meta} {...props} />',
							].join('\n')

							if (content.includes('<!-- more -->')) {
								return this.callback(null, content.split('<!-- more -->').join('\n'))
							}

							return this.callback(null, content.replace(/<!--excerpt-->.*<!--\/excerpt-->/s, ''))
						}),
					],
				},
				{
					include: [path.resolve(__dirname, 'src/pages/tutorial')],
					use: [
						...mdx,
						createLoader(function (src) {
							const content = [
								'import Tutorial from "@/components/Tutorial"',
								'export { getStaticProps } from "@/utils/tutorial/getStaticProps"',
								src,
								'export default (props) => <Tutorial meta={meta} {...props} />',
							].join('\n')

							if (content.includes('<!-- more -->')) {
								return this.callback(null, content.split('<!-- more -->').join('\n'))
							}

							return this.callback(null, content.replace(/<!--excerpt-->.*<!--\/excerpt-->/s, ''))
						}),
					],
				},
			],
		})

		if (!options.dev && options.isServer) {
			const originalEntry = config.entry

			config.entry = async () => {
				const entries = { ...(await originalEntry()) }
				entries['./scripts/build-rss'] = './scripts/build-rss.js'
				entries['./scripts/build-sitemap'] = './scripts/build-sitemap.js'
				return entries
			}
		}

		return config
	},
})

And the repo is at → https://github.com/deadcoder0904/better-code-blocks (just update Next.js to 11.0.0 but rest of the code is the same)

Before updating to 11.0.0, try running it as it is to see it work :)

[styfle]

Thanks for reporting this issue!

This looks like a duplicate of #26130 so we're going to consolidate to one issue.

[deadcoder0904]

@styfle do I still need to add this workaround even if I install next@^11.0.2-canary.0?

Because without it, I still get the error:

TypeError: unsupported file type: undefined (file: undefined)

[maximegheraille]

@deadcoder0904 They released version 11.0.1 which fixes the issues.

[deadcoder0904]

@maximegheraille i tried it but didn't work before. i tried again after cleaning cache & it works now. no need to add the existing workaround. thank you :)

[sendy34]

Update code from

import image from './assets/image.jpg'
<img src={image} />

to

import image from './assets/image.jpg';
<img src={image.src} />

[Defite]

@deadcoder0904 They released version 11.0.1 which fixes the issues.

I have latest next version and it's still broken.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.