"n.startsWith is not a function" in some vercel preview loader code?

(edited)

After I deploy my vercel project it works good, but in the preview of v0 I get a weird exception.

https://kzmpcpwr7w6ka0s1trny.lite.vusercontent.net/login

kzmpcpwr7w6ka0s1trny.lite.vusercontent.net

You can try entering any login and password, if you check the devtools logs you will see an exception

Login error: TypeError: n.startsWith is not a function
    at new window.URL (VM171 8777-c1a2e4ed2d5ae98c.js:1:67099)
    at w (get-request-url.ts:21:14)
    at Object.login (composable.ts:132:24)
    at async login (6ebdb52b-1939-4873-92df-c23bb9d3cd9c:31:24)
    at async login (8f9baea0-099c-433f-9af5-1edec14248fb:64:28)
    at async handleSubmit (4ac749a8-9aee-49f1-82d7-cdbd255f28c9:43:28)

The trace does not look like it comes from some misconfiguration of webpack. This might be some v0 webpack bundling bug?

When I added this breakpoint, on page load I see the n gets strings. But for some reason, when my page tries to do fetch(), it gets window object instead of a string and throws an exception.

Vercel Staff

Hi , sorry that you're facing this issue. Can you try clearing all browser cache for the v0.dev website and retrying the preview?

Also, can you share what is n supposed to be in the source code?

Hi , after clearing the browser cache, the preview still raises that exception. The exception happens in some libraries, but not in my source code. It looks like that library is an internal v0 library that is used for preview loading.

The thing is that when I deploy the app it works good on vercel, it only fails to work in preview.

You can try the preview page yourself https://kzmpcpwr7w6ka0s1trny.lite.vusercontent.net/login

kzmpcpwr7w6ka0s1trny.lite.vusercontent.net

Vercel Staff

Thanks . Can you still share what happens on submit in that code?

https://v0.dev/chat/telegram-chat-bubbles-LOwqzfQ0xY5?b=b_6RP7rDZnmGo

Here is the project, the onsubmit is

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")

    if (!email) {
      setError("Please enter your email")
      return
    }

    if (!password) {
      setError("Please enter your password")
      return
    }

    setIsLoading(true)

    try {
      // Use the provided onLogin function or fall back to the auth context's login
      const loginFn = onLogin || login
      const result = await loginFn(email, password)

      // If onLogin doesn't return a result, assume success
      if (result && !result.success) {
        setError("Invalid email or password")
      }
    } catch (err) {
      setError("An error occurred during login")
      console.error(err)
    } finally {
      setIsLoading(false)
    }
  }

reply to #5

Vercel Staff

Thanks for sharing . I've asked our team for help to debug this internally.

In the meantime, can you try forking this project and see if the issue persists?

I have forked the chat, the preview issue persists.

Hey , is there any any update on that case?

Vercel Staff

Hi , sorry I don't have an update yet. I've reached out to the team to investigate further on this. Are you able to still reproduce the issue?

This topic is closed. It no longer accepts new replies.

Login error: TypeError: n.startsWith is not a function at new window.URL (VM171 8777-c1a2e4ed2d5ae98c.js:1:67099) at w (get-request-url.ts:21:14) at Object.login (composable.ts:132:24) at async login (6ebdb52b-1939-4873-92df-c23bb9d3cd9c:31:24) at async login (8f9baea0-099c-433f-9af5-1edec14248fb:64:28) at async handleSubmit (4ac749a8-9aee-49f1-82d7-cdbd255f28c9:43:28)

const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setError("") if (!email) { setError("Please enter your email") return } if (!password) { setError("Please enter your password") return } setIsLoading(true) try { // Use the provided onLogin function or fall back to the auth context's login const loginFn = onLogin || login const result = await loginFn(email, password) // If onLogin doesn't return a result, assume success if (result && !result.success) { setError("Invalid email or password") } } catch (err) { setError("An error occurred during login") console.error(err) } finally { setIsLoading(false) } }