Next.js Discord

Discord Forum

TypeError [ERR_INVALID_URL]: invalid url during build

Unanswered
Alligator mississippiensis posted this in #help-forum
Open in Discord
Alligator mississippiensisOP
while building im getting an invalid URL error, despite me telling the component to be client side. its building it regardless and i dont want it to.ive specified use client, no-cache and force-dynamic and the builder just dosent seem to be listening. here is the error:
14:10:40  TypeError: Failed to parse URL from /api/blog/tags
14:10:40      at new Request (node:internal/deps/undici/undici:7134:19)
14:10:40      at r (/app/.next/server/chunks/271.js:5789:65)
14:10:40      at doOriginalFetch (/app/node_modules/.pnpm/next@13.4.5_@babel+core@7.22.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/patch-fetch.js:273:24)
14:10:40      at /app/node_modules/.pnpm/next@13.4.5_@babel+core@7.22.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/patch-fetch.js:392:20 {
14:10:40    [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
14:10:40        at new NodeError (node:internal/errors:405:5)
14:10:40        at new URL (node:internal/url:743:13)
14:10:40        at new Request (node:internal/deps/undici/undici:7132:25)
14:10:40        at r (/app/.next/server/chunks/271.js:5789:65)
14:10:40        at doOriginalFetch (/app/node_modules/.pnpm/next@13.4.5_@babel+core@7.22.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/patch-fetch.js:273:24)
14:10:40        at /app/node_modules/.pnpm/next@13.4.5_@babel+core@7.22.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/patch-fetch.js:392:20 {
14:10:40      input: '/api/blog/tags',
14:10:40      code: 'ERR_INVALID_URL'

component:
"use client"

import { useState } from "react"
import AsyncCreatableSelect from "react-select/async-creatable"

export const dynamic = 'force-dynamic'

export async function TagSelector({selectedTags}:{selectedTags:{value:string, label:string}[]}){
  "use client"
  async function GetTags(){
    "use client"
    const tags = await fetch("/api/blog/tags",{
      method:"GET",
      cache:"no-cache"
    })
    const result = await tags.json()
    return result.map(({_id, label}:{_id:string, label:string})=>({value:_id, label}))
  }

  async function AddTag(newLabel:string){
    "use client"
    const tag = await fetch("/api/blog/tags",{
      method:"POST",
      headers:{
        "Content-Type":"application/json"
      },
      body: JSON.stringify({label: newLabel}),
      cache:"no-cache"
    })
    const {_id, label} = await tag.json()
    return {value:_id, label}
  }

  const [tags, setTags] = useState(await GetTags())
  const [loading, setLoading] = useState(false)
  const [value, setValue] = useState<{value:string, label:string}[]>([])

  async function HandleCreate(label:string){
    "use client"
    setLoading(true)
    const tag = await AddTag(label)
    setTags(await GetTags())
    setValue((state) => ([...state, tag]))
    setLoading(false)
  }

  return(<AsyncCreatableSelect
    isMulti
    defaultValue={selectedTags}
    onCreateOption={HandleCreate}
    options={tags}
    isLoading={loading}
    isDisabled={loading}
    value={value}
    onChange={(newValue)=>{setValue(newValue as {value:string, label:string}[])}}
    />)
}

10 Replies

Rafael Almeida
there are a few issues in this code:
1. client components are still pre-rendered in the server so by adding 'use client' to the top of the file doesn't opt-out of pre-rendering
2. client component can't be async
3. you don't need to add the directive on every function scope
if you want to out-out of SSR you need to import the component with next/dynamic and ssr: false: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr
Alligator mississippiensisOP
https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
client components can be async. idk where you got that info from, this component was async before adding in the fetch requests, and i was adding the directive out of desperation, i know i dont need to but i was trying everything
i guess the dynamic declaration dosent get applied to child components
which sucks
Rafael Almeida
see the docs for the difference between RSC and RCC: https://nextjs.org/docs/getting-started/react-essentials#when-to-use-server-and-client-components
you can't fetch data directly in the body of client components at the moment
you need to either fetch the data inside useEffect (it won't be available during pre-rendering) or move it to a server component and pass the data through props to the client component
and yeah the route segment configs only work in route segment files (page.tsx or route.ts)
@Alligator mississippiensis https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic client components can be async. idk where you got that info from, this component was async before adding in the fetch requests, and i was adding the directive out of desperation, i know i dont need to but i was trying everything
joulev
client components can be async
except it cannot, and I would be very interested to know where you got that info from. The link only writes about whether the page should be rendered at build time or at request time, it doesn't say anything about async/await and react components