Next.js Discord

Discord Forum

vercel toolbar failing during build

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Hello!

We followed the docs for the toolbar but encountering issues during build. Everything appears to work as expected during development.

Please see the PR: https://github.com/bautistaaa/typehero/pull/412

Build Log Errors(image attached)
Answered by joulev
yeah can confirm patching + moving to mjs works
View full answer

54 Replies

Asiatic LionOP
cc @Dutch
Dutch
i think the issue is the missing import for the ESM folk
joulev
can't help with anything here, but wow what is this @vercel/toolbar
first time i heard of it
there is zero documentation except on npmjs.com/@vercel/toolbar too
Dutch
yeah it's rather SEKRIT methinks
but it allows you to add the comments toolbar to locahost and even non-next apps
joulev
not entirely sure what's wrong, i tried it and it works well, [code](https://github.com/joulev/debug/tree/try-this-secret-vercel-toolbar-thing) and [deployment log](https://vercel.com/joulev/debug/3F9WHdHMQNYYLzYqASCvTkQTssSu)
and locally the toolbar does show up normally
so probably something buggy is between this simple minimal code and your PR; could you divide and conquer the code to get a more minimal setup that doesn't work?
also, maybe try next.config.mjs and use modular syntax instead of next.config.js, i had similar issues with unrelated libraries before
Dutch
try converting to module/mjs and see if it borks if you ahve time?
@Dutch try converting to module/mjs and see if it borks if you ahve time?
joulev
hmm so this errors
// @ts-check
import withVercelToolbar from "@vercel/toolbar/plugins/next";
const nextConfig = {};
export default withVercelToolbar()(nextConfig);
wait
in my code above i didn't have ts-check
maybe it's just a ts error and the type is just wrong
the type is just wrong, just put ts-expect-error there
it seems withVercelToolbar should be exported as default here, not as a named export
Dutch
you shouldnt be having to battle with TS in an ESM file though :Thonk:
but maybe cause of the the type defs i guess
joulev
yeah the type definition is wrong
just slap the ts-expect-error and everything will work fine
@joulev it seems `withVercelToolbar` should be exported as default here, not as a named export
Dutch
yes that's the problem too why I had:
import { default as withVercelToolbar } from '@vercel/toolbar/plugins/next';
Dutch
so the exports are borked on their end, I could patch package it to see if it's a way to unblock
@Dutch so the exports are borked on their end, I could patch package it to see if it's a way to unblock
joulev
yeah then i think patching @vercel/toolbar/dist/plugins/next.d.ts is good
just export withVercelToolbar as default instead
Dutch
i wish I could just raise a PR
who from the god team can we tag here to help us make the better option 😬
joulev
yeah can confirm patching + moving to mjs works
Answer
joulev
this works fine in next dev, can build and typescript is happy with the next.config file too
@Dutch who from the god team can we tag here to help us make the better option 😬
joulev
i don't know either, i'm also just a normal user like you, but there is a secret channel here with vercel staff in there, i'll forward this bug to them there
forwarded this to them, but that secret channel hasn't had a message for 2 months so we can only hope someone will care enough to come lol
in the meantime we just need to apply the patch
Dutch
i dont think it works for our mono repo setup 😦
:eyes_sus:
still grinding let me see
joulev
it would be scary if it was a runtime error, but this is just a typescript error so i think the patch should be sufficient :thinkies:
if it doesn't work feel free to post the error here i will try tomorrow
Dutch
yeah will share the commit
joulev
it's already late here so bedtime
yeah no worries @joulev thanks for the halp
what was the error in your case?
can you simplify the repo to a minimal reproduction? because at the current state there are lots of things to set up so i can't just clone it and try to deploy myself
@Dutch ping
Dutch
Yeah typehero has a bunch of setup, I can try again tomorrow
Dutch
its working now :eyes_sus:
Dutch
@Asiatic Lion mark as resolved please
Asiatic LionOP
at the store where’s the resolve button, can i just put a green check mark