CODEWITHSUNDEEP
reactjswebpacknext.js
Bart Krakowski
Bart Krakowski

Reputation: 1670

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

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)

Upvotes: 38

Views: 29724

Answers (7)

Deekshant
Deekshant

Reputation: 9

Try to import the userProfile from "@/assets/images/my-image.png"; I also faced the same issue but, when I try to fix this using

import userProfile from "./assets/images/my-image.png";

it worked

Upvotes: 0

ANURAG
ANURAG

Reputation: 33

guys i know this is a little late but i was facing this issue for a while i wanted to disable some settings but it was creating some problems so to really get to the bottom i tried some things , if you are on firefox as i am mainly testing things on it , the most easiest way to really stop those type errors when running on localhost as dev just diable the react developer tools errors are coming from enablin that extension i will be doing some more digging but for now this is the eaisest and most forward way to stop those errors there is nothing wrong with the nextjs project template or configs these two just aren't working together..if some have more suggestions please feel free to write below

Upvotes: 0

Mohammed Al-Reai
Mohammed Al-Reai

Reputation: 2816

look to the issue in the GitHub repo Fix types for the static image it will be work right now

https://github.com/vercel/next.js/pull/25808

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

Upvotes: 2

samurai jack
samurai jack

Reputation: 411

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

Upvotes: 5

mojaba moradi
mojaba moradi

Reputation: 131

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
    }

Upvotes: 9

deadcoder0904
deadcoder0904

Reputation: 8693

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.

Upvotes: 39

Ashley Zhu
Ashley Zhu

Reputation: 11

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

Upvotes: 1

Related Questions