vercel toolbar failing during build
Answered
Asiatic Lion posted this in #help-forum
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)
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)
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/toolbarfirst 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 beforeDutch
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-checkmaybe it's just a ts error and the type is just wrong
yeah with
ts-check then this code fails toothe type is just wrong, just put
ts-expect-error thereit 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 
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 fineDutch
yes that's the problem too why I had:
import { default as withVercelToolbar } from '@vercel/toolbar/plugins/next';joulev
wait, what file is this
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 goodjust export
withVercelToolbar as default insteadDutch
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
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 😦
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 
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
joulev
https://github.com/joulev/debug/commit/338a11a2a57b6f34bfee6426a6091a13fb432d89
hmm it works fine for me
hmm it works fine for me
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
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