Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Nextjs next build fails when I have svgr svg component

import * as Brands from '@/components/icons/brands'

export async function Signup() {
  const provider = { name: 'Google', icon: Brands.Google, id: 'google' }
  return <provider.icon />
}

This fails with a cryptic error message when I do a next build.

import Discord from './discord.svg'
import GitHub from './github.svg'
import Google from './google.svg'
import Microsoft from './microsoft.svg'
import Reddit from './reddit.svg'

export { Google, Reddit, GitHub, Discord, Microsoft }

this is brands.ts

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="10 10 19.6 20" width="24" height="24">
    <path d="M29.6 20.2273C29.6 19.5182 29.5364 18.8364 29.4182 18.1818H20V22.05H25.3818C25.15 23.3 24.4455 24.3591 23.3864 25.0682V27.5773H26.6182C28.5091 25.8364 29.6 23.2727 29.6 20.2273Z" fill="#4285F4" />
    <path d="M20 30C22.7 30 24.9636 29.1045 26.6181 27.5773L23.3863 25.0682C22.4909 25.6682 21.3454 26.0227 20 26.0227C17.3954 26.0227 15.1909 24.2636 14.4045 21.9H11.0636V24.4909C12.7091 27.7591 16.0909 30 20 30Z" fill="#34A853" />
    <path d="M14.4045 21.9C14.2045 21.3 14.0909 20.6591 14.0909 20C14.0909 19.3409 14.2045 18.7 14.4045 18.1V15.5091H11.0636C10.3864 16.8591 10 18.3864 10 20C10 21.6136 10.3864 23.1409 11.0636 24.4909L14.4045 21.9Z" fill="#FBBC04" />
    <path d="M20 13.9773C21.4681 13.9773 22.7863 14.4818 23.8227 15.4727L26.6909 12.6045C24.9591 10.9909 22.6954 10 20 10C16.0909 10 12.7091 12.2409 11.0636 15.5091L14.4045 18.1C15.1909 15.7364 17.3954 13.9773 20 13.9773Z" fill="#E94235" />
</svg>

this is google.svg, rest are similar svg files

this is my next.config.mjs

/** @type {import('next').NextConfig} */
export default {
    experimental: {
        turbo: {
            rules: {
                '*.svg': {
                    loaders: ['@svgr/webpack'],
                    as: "*.js",
                }
            }
        }
    }
};

svgr version: "@svgr/webpack": "^8.1.0"

type

Typescript resolves the component properly and it runs in development mode successfully, fails with the below error message when trying to build though.

(venv) iktpwsl@iktp:~/code/personal/wsd/wsd-frontend$ npm run build

> [email protected] build
> next build

  ▲ Next.js 14.2.16
  - Experiments (use with caution):
    · turbo

(node:326292) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)
   Creating an optimized production build ...
(node:326617) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
   Generating static pages (0/13)  [    ]Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '3007206190'
}
Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '3007206190'
}
Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '3007206190'
}
Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '3007206190'
}
Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '3007206190'
}
Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '3007206190'
}
Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '3007206190'
}
Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '3007206190'
}
Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '3007206190'
}
Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '3007206190'
}
Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '3007206190'
}
   Generating static pages (5/13)  [=   ]
Error occurred prerendering page "/auth/signup". Read more: https://nextjs.org/docs/messages/prerender-error

Error: Unsupported Server Component type: {...}
    at e (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137966)
    at ek (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138016)
    at Object.toJSON (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135626)
    at stringify (<anonymous>)
    at eP (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142090)
    at eE (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142569)
    at Timeout._onTimeout (/home/iktpwsl/code/personal/wsd/wsd-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135346)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)
 ✓ Generating static pages (13/13)

> Export encountered errors on following paths:
        /(app)/auth/signup/page: /auth/signup
(venv) iktpwsl@iktp:~/code/personal/wsd/wsd-frontend$

If I remove the provider.icon and put something else as an element, it works fine. I’ve stripped everything else from the component to reproduce it as purely as I can.

Edit: Currently I suspect it might be the next config I have, the config I have is only for turbo which I think is only for the development server and not for the actual build process, seems like there is no straightforward way to build for prod with turbo (or I couldn’t find it). Investigating this further

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Apparently the issue was what I suspected in my edit. The nextjs config I had was for turbo which only works in development mode, hence the worked in dev server but not during the build. Adding a very similar config for webpack for the build solved the issue.


  2. 0

    I think the error is related to TS, could you take a look here

    https://react-svgr.com/docs/next/#typescript

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search