【问题标题】：Nextjs: TypeError: unsupported file type: undefined after update to v.11Nextjs：TypeError：不支持的文件类型：更新到 v.11 后未定义
【发布时间】：2021-09-01 14:49:08
【问题描述】：

在我尝试加载图像时更新到 11 后：

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

我收到以下错误：

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

【问题讨论】：

标签： reactjs webpack next.js

【解决方案1】：

最新更新

它现在从next@v11.0.1 开始工作。无需按照以下步骤操作。

暂时禁用静态图像功能作为解决方法：

// next.config.js

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

更新：此问题已在 next@11.0.1-canary.4 中修复。安装它：

$ npm install next@canary

请参阅related issue 和the PR。

【讨论】：

这个可行，你知道这是否会在未来得到解决？
谢谢。我希望它可以以不同的方式解决，但我可以看到这是唯一的解决方案。
^11.1.2 仍然出现此错误

【解决方案2】：

禁用静态导入

-从 10.0.0 版本开始，Next.js 内置了图像组件和自动图像优化

默认行为允许您导入静态文件，例如从 './icon.png 导入图标，然后将其传递给 src 属性。在某些情况下，如果它与其他期望导入行为不同的插件冲突，您可能希望禁用此功能。您可以使用以下配置禁用静态图像导入。

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

【讨论】：

【解决方案3】：

我刚刚从 webpack (next.config.js) 中删除了我的 image/css 加载器配置，它开始工作了。

【讨论】：

这里一样，可能最新版本被这些旧方法覆盖了

【解决方案4】：

在next.config.js 中，您可以添加文件类型检查和处理程序。我知道可以通过输入以下代码并下载 npm 包 @svgr/webpack 来处理 svg，因此可能存在 .png 等价物

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

    return config;
  },
};

一个可行的例子是来自this stack overflow的这段代码

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

我知道这个答案不是 100%，但希望能有所帮助

【讨论】：

【解决方案5】：

查看 GitHub 存储库中的问题修复类型的静态图像，它将立即生效

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

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

【讨论】：