Next.js Discord

Discord Forum

vercel toolbar failing during build

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Avatar
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)
Image
Answered by joulev & fuma pray for Schneider
yeah can confirm patching + moving to mjs works
View full answer

54 Replies

Avatar
Asiatic LionOP
cc @Dutch
Avatar
Dutch
i think the issue is the missing import for the ESM folk
Image
Avatar
joulev & fuma pray for Schneider
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
Avatar
Dutch
yeah it's rather SEKRIT methinks
but it allows you to add the comments toolbar to locahost and even non-next apps
Avatar
joulev & fuma pray for Schneider
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
Avatar
Dutch
try converting to module/mjs and see if it borks if you ahve time?
Avatar
joulev & fuma pray for Schneider
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
yeah with ts-check then this code fails too
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
Image
Avatar
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
Avatar
joulev & fuma pray for Schneider
yeah the type definition is wrong
just slap the ts-expect-error and everything will work fine
Avatar
Dutch
yes that's the problem too why I had:
import { default as withVercelToolbar } from '@vercel/toolbar/plugins/next';
Avatar
joulev & fuma pray for Schneider
wait, what file is this
Avatar
Dutch
so the exports are borked on their end, I could patch package it to see if it's a way to unblock
Avatar
joulev & fuma pray for Schneider
yeah then i think patching @vercel/toolbar/dist/plugins/next.d.ts is good
just export withVercelToolbar as default instead
Avatar
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 😬
Avatar
joulev & fuma pray for Schneider
yeah can confirm patching + moving to mjs works
Answer
Avatar
joulev & fuma pray for Schneider
this works fine in next dev, can build and typescript is happy with the next.config file too
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
Avatar
Dutch
i dont think it works for our mono repo setup 😦
:eyes_sus:
Image
still grinding let me see
Avatar
joulev & fuma pray for Schneider
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
Avatar
Dutch
yeah will share the commit
Avatar
joulev & fuma pray for Schneider
it's already late here so bedtime
yeah no worries @joulev & fuma pray for Schneider thanks for the halp
Avatar
joulev & fuma pray for Schneider
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
Avatar
Dutch
Yeah typehero has a bunch of setup, I can try again tomorrow
Avatar
Dutch
its working now :eyes_sus:
Avatar
Dutch
@Asiatic Lion mark as resolved please
Avatar
Asiatic LionOP
at the store where’s the resolve button, can i just put a green check mark