Next.js中集成@svgr/webpack与Turbopack的实战指南

理解问题：Turbopack与@svgr/webpack的冲突

在next.js应用中，@svgr/webpack是一个非常实用的工具，它允许我们将svg文件作为react组件直接导入和使用，极大地提升了开发效率和组件化能力。然而，当next.js引入其实验性的构建工具turbopack时，两者之间可能会出现兼容性问题，尤其是在svg文件的处理上。

典型的错误信息如下：

Error run turbopack:

Processing image failed
  Failed to parse svg source code for image dimensions

  Caused by:
  - Source code does not contain a <svg> root element

这个错误表明，Turbopack在尝试处理SVG文件时，期望获取其原始的SVG源码以解析图像尺寸。然而，@svgr/webpack的工作原理是在Webpack构建过程中，将.svg文件转换为一个包含SVG内容的React组件。这意味着当Turbopack介入处理时，它接收到的不再是原始的<svg>根元素，而是一个已经转换过的JavaScript模块。由于这种类型不匹配，Turbopack无法找到预期的<svg>标签来解析尺寸，从而抛出错误。

在不使用--turbo标志（即不启用Turbopack）时，Webpack的默认行为能够正确处理@svgr/webpack的转换，因此不会出现此问题。但为了充分利用Turbopack的性能优势，我们需要对其进行专门配置。

解决方案：配置Turbopack规则

解决此问题的关键在于明确告知Turbopack，当它遇到.svg文件并由@svgr/webpack处理后，其输出结果应被视为一个JavaScript模块，而不是一个需要解析尺寸的图像文件。这可以通过修改next.config.js中的experimental.turbo.rules配置来实现。

我们需要在experimental.turbo.rules对象中为*.svg文件类型添加一个特殊的规则，使用as: '*.js'选项。这个选项告诉Turbopack，经过指定loader（这里是@svgr/webpack）处理后，这些文件将以JavaScript模块的形式存在。

集简云

软件集成平台，快速建立企业自动化与智能化

22

查看详情

详细配置示例

以下是经过修正的next.config.js配置示例：

const nextConfig = {
  // 传统的Webpack配置，在不使用Turbopack时仍然有效
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      use: ["@svgr/webpack"],
    });

    return config;
  },

  // 实验性功能配置，包含Turbopack相关设置
  experimental: {
    appDir: true, // 如果你的项目使用了App Router，请保留此项
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js' // 关键：告知Turbopack将SVGR处理后的SVG视为JavaScript模块
        }
      },
    }
  },
};

module.exports = nextConfig;

配置解析：

1. webpack(config): 这是Next.js提供的传统Webpack配置钩子。它确保了在不使用Turbopack时，@svgr/webpack也能正常工作。这里我们为所有.svg文件添加了@svgr/webpack loader。
2. experimental.appDir: true: 这是Next.js 13及更高版本中App Router的启用标志。如果你的项目使用App Router，应保留此项。
3. experimental.turbo: 这是Turbopack的专用配置入口。
4. experimental.turbo.rules: 这是定义Turbopack如何处理不同文件类型的核心。
   • *`'.svg'**: 这是一个匹配模式，表示此规则适用于所有.svg`文件。
   • loaders: ['@svgr/webpack']: 指定Turbopack在处理.svg文件时应使用的loader。这里我们明确指示它使用@svgr/webpack。
   • *`as: '.js'**: **这是解决问题的关键所在。** 它告诉Turbopack，@svgr/webpack处理完.svg文件后，其输出结果应该被视为一个JavaScript文件（*.js`），而不是原始的SVG图像。这样，Turbopack就不会再尝试解析其图像尺寸，而是将其作为可导入的JavaScript模块进行处理。

注意事项与总结

• 实验性功能: Turbopack目前仍处于实验阶段 (experimental 标记)。这意味着其API和行为可能会在未来的Next.js版本中发生变化。在生产环境中使用时，请密切关注Next.js的官方文档和发布说明。
• 配置一致性: 确保在webpack(config)和experimental.turbo.rules中都正确配置了@svgr/webpack。虽然turbo.rules是针对Turbopack的，但webpack(config)中的配置仍可能在某些回退或非Turbopack构建场景中发挥作用。
• 错误排查: 如果在应用上述配置后仍然遇到问题，请检查：
  • @svgr/webpack是否已正确安装 (npm install @svgr/webpack 或 yarn add @svgr/webpack)。
  • next.config.js文件路径和语法是否正确。
  • 是否使用了最新版本的Next.js和相关依赖。

通过上述配置，你可以在Next.js项目中成功地将@svgr/webpack与实验性的Turbopack构建工具集成，从而在享受SVG作为React组件的便利性的同时，也能利用Turbopack带来的构建性能提升。核心在于理解Turbopack对文件类型的预期，并通过as: '*.js'明确指定转换后的输出类型。

以上就是Next.js中集成@svgr/webpack与Turbopack的实战指南的详细内容，更多请关注php中文网其它相关文章！