Type '{}' is not assignable to type 'ReactNode'. #35986
Labels
Comments
|
I also have a similar problem. const ReactQuill = dynamic(
async () => {
const { default: RQ } = await import('react-quill');
return ({ forwardedRef, ...props }: IReactQuillProps) => (
<RQ ref={forwardedRef} {...props} />
);
},
{
ssr: false,
},
);this is compile-error message. Type error: 'RQ' cannot be used as a JSX component.
Its instance type 'ReactQuill' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/Users/pomme/project/myproject/node_modules/@types/react-redux/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'. |
|
Having the same issue here. Error : |
|
I'm having the same issue here. Our Next.js app is hosted on Vercel and no deploys are working anymore since 20h ago. No major changes made or anything like that, just a few cosmetic stuffs. I'm using NextJS v11.1.4, though. Looking forward to some news. |
|
We have same issue there on more our products running in nextjs ... what is reason of this? We didnt do any updates in code, yesterday it works correctly, today it is broken. |
|
I have the same problem :( |
|
I´m having the same issue. the app build doesn´t run correctly. Yesterday was running correctly. Today is broken |
|
I'm having the same issue here. =/ |
|
Worked perfect yesterday, but today recent redeploy was broken without any changes. Local builds are broken too, huge amount of weird TS errors |
|
This is getting bad, please please if anyone has suggestion on how to even bypass, would love to hear! |
|
Almost similar but this also happens to me only in Vercel deployment - in my local it builds as expected. By almost similar, I mean I am not even using dynamic import, and it worked fine just before this thread was opened. My code |
|
People, the same error occurs with my apps. |
|
I am still not sure how is this possible. |
|
What i did was getting back a old version of my |
thanks, this works for me in vercel deploying nextjs |
|
I can report the exact same issue in our web app only in Vercel's CI. |
|
I fixed it by updating
- "@types/react": "^17.0.23",
+ "@types/react": "^18.0.0",with But it will cause other component type errors... |
|
Seems a lot of types issues maybe these references help to solve the issue |
|
|
In our case, upgrading to node 16.14.2 made it work. However we had to use the --ignore-peer-deps flag, cause we had package conflicts. |
|
fixed with Updating my package.json with: |
2 tasks
|
Hi guys. I found a temporary fixed for me that let me ship the build. All I had to do was upgrade @types/react to version 18.0.1 along with react and react-dom. Then I created a file at the root of the project named react-temporary.d.ts and pasted this inside: Hope this temporary fix helps someone |
balazsorban44
added
type: needs investigation
TypeScript
HT-Moh
changed the title
|
What worked for me: Add the following to Fixing all types of issues by declaring explicitly the children on the component props. Then fixing types issues by declare explicitly the children inside the component props import { NextPage } from 'next'
export const CopyToClipboardButton: NextPage<{
className?: string
content: string
}> = ({ className, content, children }) => {
const clickHandle = () => {
navigator.clipboard.writeText(content)
}
return (
<button onClick={clickHandle} className={className}>
{children}
</button>
)
}to import { ReactElement } from 'react'
// eslint-disable-next-line unicorn/prevent-abbreviations
interface InputProps {
children: ReactElement
className?: string
content: string
}
export const CopyToClipboardButton = ({
children,
className,
content
}: InputProps) => {
const clickHandle = () => {
navigator.clipboard.writeText(content)
}
return (
<button onClick={clickHandle} className={className}>
{children}
</button>
)
} |
|
can you please reopen? some projects are not ready for react 18 yet |
|
I tried all resolutions presented in the thread but ultimately could only fix by upgrading react/next/types to latest. |
|
why close this problem ???????????????????????????? we still nofix Why did this error occur ？ Why do we have to upgrade ? |
|
Yeah if this is a breaking change (which it was), shouldn't next have been bumped to 13.0.0? |
|
Still broken |
|
Why close? I still experimenting with the issue. |
|
Note that this is not a change in Next.js. You're using the latest version of |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
and others
Verify canary release
Provide environment information
"next": "12.1.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
file
tsconfig.jsonWhat browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
The issue is that after upgrading to the last nextjs version, I am getting the error
Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'for all components that are imported dynamically.Workaround: Change dynamic import to normal import solves the issue
Expected Behavior
it should work.
To Reproduce
create a component and import it dynamically
The text was updated successfully, but these errors were encountered: