search

negomi / react-burger-menu

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
http://negomi.github.io/react-burger-menu/
MIT License
5.05k stars 586 forks source link

NextJS warning message #498

Open ttsoares opened 1 year ago

ttsoares commented 1 year ago

Warning: Menu: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. at Menu (webpack-internal:///(ssr)/./node_modules/react-burger-menu/lib/menuFactory.js:60:46) at div at HamburgerMenu at div at nav at BMenu at Lazy at div at section at body at html at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11) at ReactDevOverlay (/extra/frontendmentor.io/urlshorter/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (/extra/frontendmentor.io/urlshorter/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:343:11) at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:144:11) at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:82:9) at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:109:11) at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:403:13) at Lazy at Lazy at ServerComponentWrapper (/extra/frontendmentor.io/urlshorter/node_modules/next/dist/server/app-render/create-server-components-renderer.js:78:31) at ServerComponentWrapper (/extra/frontendmentor.io/urlshorter/node_modules/next/dist/server/app-render/create-server-components-renderer.js:78:31) at ServerInsertedHTMLProvider (/extra/frontendmentor.io/urlshorter/node_modules/next/dist/server/app-render/server-inserted-html.js:26:39) Warning: Invalid DOM property fill-rule. Did you mean fillRule? at g at svg at div at HamburgerIcon at div at BurgerIcon (webpack-internal:///(ssr)/./node_modules/react-burger-menu/lib/components/BurgerIcon.js:31:5) at div at div at Menu (webpack-internal:///(ssr)/./node_modules/react-burger-menu/lib/menuFactory.js:60:46) at div at HamburgerMenu at div at nav at BMenu at Lazy at div at section at body at html at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11) at ReactDevOverlay (/extra/frontendmentor.io/urlshorter/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (/extra/frontendmentor.io/urlshorter/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:343:11) at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:144:11) at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:82:9) at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:109:11) at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:403:13) at Lazy at Lazy at ServerComponentWrapper (/extra/frontendmentor.io/urlshorter/node_modules/next/dist/server/app-render/create-server-components-renderer.js:78:31) at ServerComponentWrapper (/extra/frontendmentor.io/urlshorter/node_modules/next/dist/server/app-render/create-server-components-renderer.js:78:31) at ServerInsertedHTMLProvider (/extra/frontendmentor.io/urlshorter/node_modules/next/dist/server/app-render/server-inserted-html.js:26:39)

sergromanov4 commented 1 year ago

You can use it only in client component, so use

'use client'

fikkatra commented 1 year ago

Possible duplicate of #488 @sergromanov4 marking it as a client component, doesn't remove the console warning

Choco-milk-for-u commented 1 year ago

any possible solution?

ttsoares commented 1 year ago

Several other libraries are showing this same message with NextJS 13. For now I've been ignoring it OR migrate to a custom hand-made solution as I did with this burger menu.

davebm1 commented 11 months ago

I'm also getting this warning (with NextJS 14). If support for defaultProps is being removed, surely the answer is for the devs to implement JavaScript default parameters, as recommended in the warning message?

farukparhat commented 9 months ago

Several other libraries are showing this same message with NextJS 13. For now I've been ignoring it OR migrate to a custom hand-made solution as I did with this burger menu.

Are you still using parts of this library or just rewrote everything from scratch?

Is there a fork of this library where the warning has been addressed?

tkoolhoven2 commented 5 months ago

I too am getting this warning message in NextJS 14.