Next.js Discord

Discord Forum

I'm getting the following error when building and deploying preview build, what am I doing wrong?

Unanswered
English Spot posted this in #help-forum
Open in Discord
English SpotOP
[15:49:33.548] Collecting page data ...
[15:49:34.209] TypeError [ERR_INVALID_URL]: Invalid URL
[15:49:34.210] at new NodeError (node:internal/errors:405:5)
[15:49:34.210] at new URL (node:internal/url:611:13)
[15:49:34.210] at 45203 (/vercel/path0/.next/server/chunks/197.js:1:1151)
[15:49:34.210] at Function.webpack_require (/vercel/path0/.next/server/webpack-runtime.js:1:145)
[15:49:34.210] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[15:49:34.211] at async collectGenerateParams (/vercel/path0/node_modules/next/dist/build/utils.js:858:17)
[15:49:34.211] at async /vercel/path0/node_modules/next/dist/build/utils.js:1074:17
[15:49:34.211] at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:105:20) {
[15:49:34.211] input: 'mkelley33-or0at8tef-mkelley33.vercel.app',
[15:49:34.211] code: 'ERR_INVALID_URL'
[15:49:34.211] }
[15:49:34.217]
[15:49:34.217] > Build error occurred
[15:49:34.218] Error: Failed to collect page data for /blog/[slug]
[15:49:34.219] at /vercel/path0/node_modules/next/dist/build/utils.js:1178:15
[15:49:34.219] at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
[15:49:34.219] type: 'Error'
[15:49:34.219] }
[15:49:34.315] Error: Command "npm run build" exited with 1

17 Replies

English SpotOP
It builds fine locally
@English Spot It builds fine locally
Naeemgg
What was the problem though??
English SpotOP
I don’t know what the problem is from the logs output above. They are from when I deployed using vercel cli
@Naeemgg the build runs fine locally on my computer, but does not deploy successfully as you can see from the logs above
Clown
Invalid url means you are probably fetching from the wrong url
Send a example of a fetch function
In your code
English SpotOP
const handleOnSubmit: SubmitHandler<IContactForm> = async (data) => {
    const res = await fetch('/api/contact/hcaptcha', {
      method: 'POST',
      body: JSON.stringify({ token }),
    });
    const json = await res.json();

    if (!json.success) {
      setHCaptchaError('hCaptcha validation failed. Please try again.');
    }

    if (isValid && json.success) {
      const res = await fetch('/api/contact', {
        method: 'POST',
        body: JSON.stringify(data),
      });
      const json = await res.json();

      if (json.success) {
        router.push('/post-contact');
      } else if (json.error) {
        if (captchaRef.current) {
          // @ts-expect-error resetCaptcha does in fact exist on this ref
          captchaRef.current.resetCaptcha();
        }
        toast.error(json.error, {
          position: toast.POSITION.TOP_CENTER,
          hideProgressBar: true,
        });
      }
    }
  };
@Clown see the above code
English SpotOP
my repo is public at https://github.com/mkelley33/mkelley33-pwa/pull/1
English SpotOP
Does anyone know why this error might be occurring when I deploy?
English SpotOP
Actually, now running vercel build locally fails outputting a different path every time in the error message:

Build error occurred
Error: Failed to collect page data for /post-contact
English SpotOP
Does anyone know if this is a problem with the latest nextjs being compatible or not with the latest vercel cli?
Clown
Why are you even running vercel cli tho?
Also this error isnt happening in this code im pretty sure. The original error gives this link:
English SpotOP
@Clown I was just trying different methods of deployment. I didn't want to make a random push to my PR again, so I chose to use vercel deploy
@Clown as for the link given in the error, that was auto-generated so I'm not sure why it's erroring