Support NextJS 13 #183
Comments
|
Thanks for reporting! I think I found what's causing conflict. Try installing |
|
Hello, I just upgraded to @latest version.
|
|
Edit: I just labeled the component using the Icons with |
|
I think you've misread my message. Please try Though error about |
|
I have this version installed The error message still appears when I do not add "use client"
import { Icon as BaseIcon, IconProps } from "@iconify/react";
const Icon:React.FunctionComponent<IconProps> = (props) => <BaseIcon {...props} />
export default Icon |
|
Thanks. This is weird error message. In |
|
I've debugged this. Component works correctly with NextJS 13 without any issues. I've also reverted change to see if I'll get that error message, didn't get it. So I can't replicate issue. Using basic app created with edit: also cannot replicate issue using NextJS 12.2.5. I suspect issue is with outdated Webpack, not NextJS. |
|
I created a repository to show you the bug : It has two pages /error and /success to show you how this error occurs |
|
Thanks a lot! Now I'm seeing that bug and can debug it. This is very helpful! |
|
I'm very confused. In your code Icon component is fine. It uses React in intended way, but something else is messing with it. Somewhere in build process React package seem to be reduced. These is everything that is exported from React using [
'Children',
'Fragment',
'Profiler',
'StrictMode',
'Suspense',
'__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED',
'cache',
'cloneElement',
'createElement',
'createRef',
'createServerContext',
'forwardRef',
'isValidElement',
'lazy',
'memo',
'startTransition',
'use',
'useCallback',
'useContext',
'useDebugValue',
'useId',
'useMemo',
'version'
]These are keys I get when importing React in my demo app: [
'Children',
'Component',
'Fragment',
'Profiler',
'PureComponent',
'StrictMode',
'Suspense',
'__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED',
'cloneElement',
'createContext',
'createElement',
'createFactory',
'createRef',
'forwardRef',
'isValidElement',
'lazy',
'memo',
'startTransition',
'unstable_act',
'useCallback',
'useContext',
'useDebugValue',
'useDeferredValue',
'useEffect',
'useId',
'useImperativeHandle',
'useInsertionEffect',
'useLayoutEffect',
'useMemo',
'useReducer',
'useRef',
'useState',
'useSyncExternalStore',
'useTransition',
'version'
]It is missing the following keys: [
'Component',
'PureComponent',
'createContext',
'createFactory',
'unstable_act',
'useDeferredValue',
'useEffect',
'useImperativeHandle',
'useInsertionEffect',
'useLayoutEffect',
'useReducer',
'useRef',
'useState',
'useSyncExternalStore',
'useTransition'
]So something is messing with React in your code. I don't know what is doing that. |
|
One more weird thing: I've installed React |
|
React is imported from this file: I suspect Webpack is to blame here. |
|
The missing keys seems to be the one that you can't use anymore in Fyi, the project was simply created with
|
|
I can't find anything in Next documentation that states that class components are not allowed. |
|
When I console log React keys from IconWrapper.tsx it shows all the correct keys "use client"
import { Icon as BaseIcon, IconProps } from "@iconify/react";
import React from 'react';
const Icon:React.FunctionComponent<IconProps> = (props) => {
console.log(Object.keys(React));
return <BaseIcon {...props} />
}
export default Icon |
|
Indeed. Same when importing it in console. But add this to top of console.log('Imported React. Keys:', Object.keys(React));and it will show short list. |
|
Only Client Components seem to be able to use I don't know how to handle that with |
|
With |
|
So it is not Webpack's fault. Found where stuff is missing: React is not being imported from file I've mentioned above, but from Looks like it is by design. But why? |
|
This can't possibly be intended by design. Very weird. I've reported this as bug to Next repository, including your demo repository: vercel/next.js#43051 |
|
Oh well, got response from NextJS team, missing support for class components is by design. Looks like for now your solution with wrapper component is the only way to make it work. Another option is to use "use client";
import { Icon } from "@iconify-icon/react";
export default Icon;It no longer throws errors. However, is still an issue:
So now there is a different bug: web component not being bundled on some pages. What a clusterfuck Next13 is. |
|
Reported issue for web component not being bundled, based on your repo: vercel/next.js#43068 |
|
Hey! I am also struggling with this. Any updates on this? Are we waiting for the issue to be resolved on their side? |
|
Depends on which part of issue you are referring to. If using If using So either way it is better to just wrap it in client side component. |
|
I am also facing this issue in my project. By design, NextJS 13 does not support class components when a page is rendered on the server. You need to force the icon component to render on the client, which in my opinion is not a very good thing. |
|
It won't render anything on server side anyway, so forcing it to render on client side doesn't make any difference. This component works by loading data dynamically from API, which means on first render icon data might not be available, so it doesn't render anything. Data is loaded only on client side. If you need to render component immediately and on server side, there are different solutions:
If you do need dynamic icon data, |
|
Facing problem with Nextjs 14. <button className="border-[2px] px-5 py-4 rounded-lg">
Explore Now <Icon icon="solar:arrow-right-outline" />
</button>I found |
|
You probably forgot to import |
Hi thanks for your reply.. in Root layout of Application, I have included |
|
In browser console type It should return class for web component. If it doesn't return it, web component is not bundled. |
|
Did some more testing, found a possible issue why it might not always work in Next, published |
Thank you good sir. |
|
Published new version of Currently available as Long overdue. Sorry for delay. |
Hello,
I am upgrading a project from NextJS12 to NextJs13 and there is an error concerning this package.
When I add a new Icon the application throws an error
<Icon icon="mdi:facebook" className="w-5 h-5"/>error - (sc_server)\node_modules\@iconify\react\dist\iconify.js (1795:54) @ eval error - TypeError: Class extends value undefined is not a constructor or null at eval (webpack-internal:///(sc_server)/./node_modules/@iconify/react/dist/iconify.js:1643:55) at Object.(sc_server)/./node_modules/@iconify/react/dist/iconify.js (E:\JEEBIE.ME\Projets\OCLR\oc-lr.com - V2\.next\server\app\sites\[subdomain]\page.js:828:1) at __webpack_require__ (E:\JEEBIE.ME\Projets\OCLR\oc-lr.com - V2\.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///(sc_server)/./components/common/Footer.tsx:6:72) at Object.(sc_server)/./components/common/Footer.tsx (E:\JEEBIE.ME\Projets\OCLR\oc-lr.com - V2\.next\server\app\sites\[subdomain]\page.js:764:1) at __webpack_require__ (E:\JEEBIE.ME\Projets\OCLR\oc-lr.com - V2\.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///(sc_server)/./app/sites/[subdomain]/layout.tsx:13:83) at Object.(sc_server)/./app/sites/[subdomain]/layout.tsx (E:\JEEBIE.ME\Projets\OCLR\oc-lr.com - V2\.next\server\app\sites\[subdomain]\page.js:742:1) at __webpack_require__ (E:\JEEBIE.ME\Projets\OCLR\oc-lr.com - V2\.next\server\webpack-runtime.js:33:42) at Object.layout (webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fsites%2F%5Bsubdomain%5D%2Fpage&appPaths=%2Fsites%2F%5Bsubdomain%5D%2Fpage&pagePath=private-next-app-dir%2Fsites%2F%5Bsubdomain%5D%2Fpage.tsx&appDir=E%3A%5CJEEBIE.ME%5CProjets%5COCLR%5Coc-lr.com%20-%20V2%5Capp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=E%3A%5CJEEBIE.ME%5CProjets%5COCLR%5Coc-lr.com%20-%20V2&isDev=true&tsconfigPath=tsconfig.json!:28:129) { type: 'TypeError', page: '/sites/[subdomain]' }I am using
The text was updated successfully, but these errors were encountered: