Next 16 Canary, No errors in dev server but Type error in buld
Answered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
Hi was on the latest version of Next and now i am testing Next 16, but for some reason i am getting a type error. Didnt they say there is no linting in builds please help.
Answered by Asiatic Lion
He does not make it, i made it myself, because if you do as he follows and just copy and paste then it does not work. maybe there is a dependency i could of added for it to work out the box but i dont want bloat and to be tracked.
Here is my custom def
Here is my custom def
import type { DetailedHTMLProps, HTMLAttributes } from 'react';
type ElevenLabsConvaiElementProps = DetailedHTMLProps<
HTMLAttributes<HTMLElement>,
HTMLElement
> & {
'agent-id'?: string;
};
declare module 'react' {
namespace JSX {
interface IntrinsicElements {
'elevenlabs-convai': ElevenLabsConvaiElementProps;
}
}
}41 Replies
Asiatic LionOP
no errors in dev server
Asiatic LionOP
i already have the type definition, in
src/types/custom.d.tsthis is my config
Asiatic LionOP
solved just type errors
@Asiatic Lion solved just type errors
can you reproduce it on minimal repository?
Asiatic LionOP
not sure i can, my repo is quite small, it is a bit strange to get type errors,
@alfonsüs ardani here is the diff
honestly
this is weird
is it a custom component?
web-component?
react component?
if it starts with small letter then it should be intrinsic elements like "div" and "span" and such
is there a documentaiton page for
<elevenlabs-convai>?have you tried adding
//@ts-ignore above it?shouldn't you be using this?
@alfonsüs ardani is it a custom component?
Asiatic LionOP
its react component but i have to make it custom for it to work, i just got this type error among others when upgrading.
but this is what eleven labs give you.
it is react, but didnt work out of the box for me
this is the example implementation from them
https://youtu.be/XweA70b45Ws?si=SSXVhVjYY_LOOJ9j&t=64
but this is what eleven labs give you.
<elevenlabs-convai agent-id="agentxxxxxxxxxxxxxxxx"></elevenlabs-convai><script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>it is react, but didnt work out of the box for me
this is the example implementation from them
https://youtu.be/XweA70b45Ws?si=SSXVhVjYY_LOOJ9j&t=64
@alfonsüs ardani shouldn't you be using this?
Asiatic LionOP
they give you the snippet after you make the agent, it is supposed to be copy and paste. I am just confused as i didnt get these errors on Next Js 15.5, im on 16.0.5 Canary
thats not a react component....
what happens if you ctrl.click <elevenlabs-convai> ?
@Asiatic Lion Click to see attachment
Asiatic LionOP
also they said linting is removed from builds, but that still happens
thats not linting.. thats type errors..
@alfonsüs ardani react 19 have tighter types
Asiatic LionOP
oh i guess it was this upgrade
either you ignore it via
//@ts-ignore or you use the next.js/react guide from elevenlabswriting <elevenlabs-convai> is not a valid react component and will confuse the compiler
@alfonsüs ardani thats not a react component....
Asiatic LionOP
it takes me to my custom type defintion, otherwise if i just copy and paste what they gave me then i get an error. the guy does that in the video i linked, with that being copying and pasting
@alfonsüs ardani either you ignore it via `//@ts-ignore` or you use the next.js/react guide from elevenlabs
Asiatic LionOP
okay got it, i just prefer making the type def, i used ultracite so ts ignore is forbidden
couldn't find it in the video
Asiatic LionOP
He does not make it, i made it myself, because if you do as he follows and just copy and paste then it does not work. maybe there is a dependency i could of added for it to work out the box but i dont want bloat and to be tracked.
Here is my custom def
Here is my custom def
import type { DetailedHTMLProps, HTMLAttributes } from 'react';
type ElevenLabsConvaiElementProps = DetailedHTMLProps<
HTMLAttributes<HTMLElement>,
HTMLElement
> & {
'agent-id'?: string;
};
declare module 'react' {
namespace JSX {
interface IntrinsicElements {
'elevenlabs-convai': ElevenLabsConvaiElementProps;
}
}
}Answer
@alfonsüs ardani thats not linting.. thats type errors..
Asiatic LionOP
so can you quickly explain this, so Next 16 just doesnt do Eslint in the build it just check types? i thought that is linting
@Asiatic Lion so can you quickly explain this, so Next 16 just doesnt do Eslint in the build it just check types? i thought that is linting
no, linting is putting squiggly lines on "code styles" or "code preferences".
type errors or type checks check for the validity of your code's typing
type errors or type checks check for the validity of your code's typing
type checks checks structure of a variable/function and make errors based on that
while linting just infers usage of a token and make warnings or error if you violate it
i.e using <a> instead of <Link>, thats a lint error. It logically works but next prefers Link over a. (which historically you can just disable)
while linting just infers usage of a token and make warnings or error if you violate it
i.e using <a> instead of <Link>, thats a lint error. It logically works but next prefers Link over a. (which historically you can just disable)
but
const a:number = "Hello" thats a type errorAsiatic LionOP
Oh okay got it thanks!
alternatively if you want to skip build errors theres a next config that disables typescript warning on build:
idk if you'd want that lol