TTC
Theo's Typesafe Cult•3y ago
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
// @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
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
`
Next.js - SVGR
Transforms SVG into React Components.
6 Replies
nexxel
nexxel•3y ago
// @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,
    },
  ],
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

export default config
// @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,
    },
  ],
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

export default config
this is what you need in ct3a, the next config file is .mjs file its a es module you can't module.exports in a module, the syntax is export default just put whatever configurations you need in the config object you won't even need to go outside of that config object
utdev
utdevOP•3y ago
Thanks @nexxel but it still does not find the svg file in my component? It says that the src properly is empty: Any idea regarding that? 
import { signIn, useSession } from 'next-auth/react'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import LoginForm from '../components/auth/login-form'
import AuthLayout from '../layouts/auth-layout'
import Image from 'next/image'
import defaultSvg from '/public/default.svg'
import LoginWithDiscordButton from '../components/auth/login-with-discord-btn'
import { SignUp, Login, signUpSchema } from '@/lib/zod/auth-schema'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { trpc } from '@/utils/trpc'
import { AuthStates } from 'src/enums/auth-states'

export default function SignIn() {
  const router = useRouter()
  const { status } = useSession()

  const { register, handleSubmit } = useForm<SignUp>({
    resolver: zodResolver(signUpSchema),
  })

  const onSubmit = async (data: SignUp) => {
    await signIn('credentials', { ...data, callbackUrl: '/dashboard' })
  }

  return (
    <AuthLayout>
      status: {status}
      <div className="mx-auto w-full max-w-sm lg:w-96">
        <div>
          <Image src={defaultSvg} alt="Logo" />
import { signIn, useSession } from 'next-auth/react'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import LoginForm from '../components/auth/login-form'
import AuthLayout from '../layouts/auth-layout'
import Image from 'next/image'
import defaultSvg from '/public/default.svg'
import LoginWithDiscordButton from '../components/auth/login-with-discord-btn'
import { SignUp, Login, signUpSchema } from '@/lib/zod/auth-schema'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { trpc } from '@/utils/trpc'
import { AuthStates } from 'src/enums/auth-states'

export default function SignIn() {
  const router = useRouter()
  const { status } = useSession()

  const { register, handleSubmit } = useForm<SignUp>({
    resolver: zodResolver(signUpSchema),
  })

  const onSubmit = async (data: SignUp) => {
    await signIn('credentials', { ...data, callbackUrl: '/dashboard' })
  }

  return (
    <AuthLayout>
      status: {status}
      <div className="mx-auto w-full max-w-sm lg:w-96">
        <div>
          <Image src={defaultSvg} alt="Logo" />
The image exists inside my public directory
nexxel
nexxel•3y ago
idk about that never used this library sorry
utdev
utdevOP•3y ago
ok 🙂
Unknown User
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
utdev
utdevOP•3y ago
True, yes I misunderstood it right now using the svg directly as a component, thanks for the clarification
Want results from more Discord servers?
Add your server