Theo's Typesafe CultTTC
Theo's Typesafe Cult4y ago
13 replies
utdev

React SVGR in t3 app?

Does someone know why I can't setup https://react-svgr.com/docs/next/ in my t3 app?

This is my config file:

// @ts-check
/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
 * This is especially useful for Docker builds.
 */
!process.env.SKIP_ENV_VALIDATION && (await import('./src/env/server.mjs'))

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ['cdn.discordapp.com'],
  },
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
  redirect: [
    {
      source: '/',
      destination: '/dashboard',
      permanent: true,
    },
  ]
}

module.exports = {
  /**
   * @param {{ module: { rules: { test: RegExp; issuer: RegExp; use: string[]; }[]; }; }} config
   */
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

export default config

But if I try to run pnpm run dev I get this:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/utdev/code/invoicer.so/.env
error - Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
ReferenceError: module is not defined in ES module scope
`
Transforms SVG into React Components.
Next.js - SVGR
Was this page helpful?