Next.js：升级到v.11后出现TypeError：不支持的文件类型：未定义

Question

在我更新 Next 到版本 11 后，当我尝试加载一张图片时：

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

我遇到了以下错误：

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

- Bart Krakowski

Answer 1

最新更新

截至于next@v11.0.1版本，它现在可以运行了。无需执行以下步骤。

---

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

// next.config.js

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

---

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

$ npm install next@canary

请查看相关问题和PR。

- deadcoder0904

---

这个可以用，你知道这个将来会被修复吗？ - Jordi Castillo

谢谢您。我希望能以不同的方式解决它，但我可以看到这是唯一的解决方案。 - Bart Krakowski

使用版本号 ^11.1.2 仍然会出现这个错误。 - JohnAllen

仍然（或者再次？）发生在^12+中。disableStaticImages也没有帮助。必须将其移动到public文件夹并使用相对URL而不是import。 - Domi

在实施了解决方法之前，我一直使用的是 ^12.1.6 版本。 - avalanche1

当我使用npm next-images时，即使在13.0.6版本中仍然会出现这个问题。 - Ayo Adesina

Answer 2

禁用静态导入

- 自10.0.0版本以来，Next.js已经内置图像组件和自动图像优化。

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

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

- mojaba moradi

---

这个对我的问题有帮助 - 可能是一个旧版本的next，重新启动后就会出现这个bug - 谢谢！ - jimmyNames

Answer 3

我刚刚从webpack（next.config.js）中删除了我的图像/CSS加载器配置，并且它开始正常工作了。

- samurai jack

---

一样的情况，可能是最新版本被这些旧方法覆盖了。 - Jamie Nicholl-Shelley

Answer 4

请查看 GitHub 存储库中的问题，修复静态图像类型，这样它就可以立即正常工作。 https://github.com/vercel/next.js/pull/25808

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

- Mohammed Al-Reai

Answer 5

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

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

    return config;
  },
};

一个可行的示例是来自这个 Stack Overflow 的代码。

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

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

- Ashley Zhu