Nextjs: TypeError: unsupported file type: undefined after update to v.11

Question

After update Next to 11 when I'm trying to load an image with:

import segmentLogoWhitePng from 'assets/images/my-image.png'

I'm getting the following error:

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

Answer 1

Latest Update

It works now as of [email protected]. No need to follow the steps below.

---

Disable the static images feature for now as a workaround:

// next.config.js

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

---

Update: This has been fixed in [email protected]. Install it:

$ npm install next@canary

See the related issue & the PR.

Answer 2

Disable Static Imports

-Since version 10.0.0, Next.js has a built-in Image Component and Automatic Image Optimization

The default behavior allows you to import static files such as import icon from './icon.png and then pass that to the src property. In some cases, you may wish to disable this feature if it conflicts with other plugins that expect the import to behave differently. You can disable static image imports with the following configuration below.

  // next.config.js
  
  images: {
        disableStaticImages: true
    }

Answer 3

I just removed my image/css loader config from webpack (next.config.js) and it started working.

Answer 4

In next.config.js you can add file type checks and handlers. I know that svg can be handled by putting the following code and downloading the npm package @svgr/webpack so there could possibly be a .png equivalent

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

One example that could work is this code from this stack overflow

module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader',
            },
          ],
        },
      ],
    }
};

I know this answer wasn't 100%, but hopefully it helps out a little bit