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
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
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?
@Dutch try converting to module/mjs and see if it borks if you ahve time?
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
thereit seems
withVercelToolbar
should be exported as default here, not as a named exportDutch
you shouldnt be having to battle with TS in an ESM file though 

but maybe cause of the the type defs i guess
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
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 😬
yeah can confirm patching + moving to mjs works
Answer
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 😬
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
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
it's already late here so bedtime
yeah no worries @joulev thanks for the halp
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