support with cloudflare workers

[juanpablocs]

💬 Questions and Help

Nowadays, when generating a build for production, the NextJS rule doesn't apply. The SVG ends up being generated as an asset when I expect an inline component.

/** @type {import('next').NextConfig} */
const nextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};

export default nextConfig;
// added by create cloudflare to enable calling `getCloudflareContext()` in `next dev`
import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare';
initOpenNextCloudflareForDev();

usage component working on local with node

import PersonalizedIcon from "../assets/svg/personalizate.svg"
<PersonalizedIcon />

error result with cloudflare workers:

 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[ItsRyanWu]

It's not related to Cloudflare workers, it's related to Turbopack production build mode.

[ItsRyanWu]

This is because when building for production, your Next.js still uses Webpack instead of Turbopack. To fix the issue, you just need to follow the documentation: https://react-svgr.com/docs/next/ to configure the SVGR plugin for Webpack as well. So, keep 2 sets of configurations for both Turbopack and Webpack for 2 bundling modes.