Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG] SIWEButton causes 'An empty string ("") was passed to the href attribute' error #319

Closed
FFdhorkin opened this issue Nov 16, 2023 · 3 comments
Closed

[BUG] SIWEButton causes 'An empty string ("") was passed to the href attribute' error #319

FFdhorkin opened this issue Nov 16, 2023 · 3 comments
Labels
bug Something isn't working

Comments

@FFdhorkin
Copy link

FFdhorkin commented Nov 16, 2023 •
edited
Loading

Describe the bug

I'm attempting to set up connectkit and connectkit-next-siwe. The main ConnectKit part works fine, but the SIWE integration causes an exception I'm having trouble figuring out

To reproduce

    "connectkit": "^1.5.3",
    "connectkit-next-siwe": "^0.2.0",
    "next": "^13.5.4",

The issue appears to be here: https://github.com/family/connectkit/blob/main/packages/connectkit/src/components/Common/Button/index.tsx#L45
const hrefUrl = typeof href === 'string' ? href : flattenChildren(href).join('');

href is undefined at runtime for me, resulting in hrefUrl being the empty string. Looking at where this Button is created ( https://github.com/family/connectkit/blob/main/packages/connectkit/src/components/Standard/SIWE/index.tsx ), I don't see href being provided anywhere and I also don't see a default value.

I suspect older versions of NextJs didn't produce a warning when href was an empty string; it does look like the connectkit code is checking for undefined, so I think this is expected on your end.

There's a pretty easy fix for this, thankfully! If hrefUrl is undefined instead of the empty string, the warning goes away because it doesn't try to include the property.

Simplest solution that solves this for me:
const hrefUrl = href && (typeof href === 'string' ? href : flattenChildren(href).join(''));

Expected behavior

hrefUrl should be undefined, not the empty string

Screenshots

Full stack trace:

Warning: An empty string ("") was passed to the href attribute. To fix this, either do not render the element at all or pass null to href instead of an empty string.
    at button
    at P (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/styled-components@5.3.11_@babel+core@7.23.3_react-dom@18.2.0_react-is@16.13.1_react@18.2.0/node_modules/styled-components/dist/styled-components.browser.esm.js:30:19658)
    at Button (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/connectkit@1.5.3_@babel+core@7.23.3_react-dom@18.2.0_react-is@16.13.1_react@18.2.0_viem@1.15.0_wagmi@1.4.3/node_modules/connectkit/build/index.es.js:5287:19)
    at SIWEButton (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/connectkit@1.5.3_@babel+core@7.23.3_react-dom@18.2.0_react-is@16.13.1_react@18.2.0_viem@1.15.0_wagmi@1.4.3/node_modules/connectkit/build/index.es.js:9312:23)
    at div
    at VisualElementHandler (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.2.0_react@18.2.0/node_modules/framer-motion/dist/es/motion/utils/VisualElementHandler.mjs:13:42)
    at MotionComponent (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.2.0_react@18.2.0/node_modules/framer-motion/dist/es/motion/index.mjs:48:24)
    at P (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/styled-components@5.3.11_@babel+core@7.23.3_react-dom@18.2.0_react-is@16.13.1_react@18.2.0/node_modules/styled-components/dist/styled-components.browser.esm.js:30:19658)
    at div
    at VisualElementHandler (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.2.0_react@18.2.0/node_modules/framer-motion/dist/es/motion/utils/VisualElementHandler.mjs:13:42)
    at MotionComponent (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.2.0_react@18.2.0/node_modules/framer-motion/dist/es/motion/index.mjs:48:24)
    at P (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/styled-components@5.3.11_@babel+core@7.23.3_react-dom@18.2.0_react-is@16.13.1_react@18.2.0/node_modules/styled-components/dist/styled-components.browser.esm.js:30:19658)
    at SignInWithEthereum (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/connectkit@1.5.3_@babel+core@7.23.3_react-dom@18.2.0_react-is@16.13.1_react@18.2.0_viem@1.15.0_wagmi@1.4.3/node_modules/connectkit/build/index.es.js:9377:21)
    at div
    at VisualElementHandler (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.2.0_react@18.2.0/node_modules/framer-motion/dist/es/motion/utils/VisualElementHandler.mjs:13:42)
    at MotionComponent (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.2.0_react@18.2.0/node_modules/framer-motion/dist/es/motion/index.mjs:48:24)
    at P (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/styled-components@5.3.11_@babel+core@7.23.3_react-dom@18.2.0_react-is@16.13.1_react@18.2.0/node_modules/styled-components/dist/styled-components.browser.esm.js:30:19658)
    at div
    at VisualElementHandler (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.2.0_react@18.2.0/node_modules/framer-motion/dist/es/motion/utils/VisualElementHandler.mjs:13:42)
    at MotionComponent (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.2.0_react@18.2.0/node_modules/framer-motion/dist/es/motion/index.mjs:48:24)
    at P (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/styled-components@5.3.11_@babel+core@7.23.3_react-dom@18.2.0_react-is@16.13.1_react@18.2.0/node_modules/styled-components/dist/styled-components.browser.esm.js:30:19658)
    at Page (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/connectkit@1.5.3_@babel+core@7.23.3_react-dom@18.2.0_react-is@16.13.1_react@18.2.0_viem@1.15.0_wagmi@1.4.3/node_modules/connectkit/build/index.es.js:4772:17)
    at div
    at VisualElementHandler (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.2.0_react@18.2.0/node_modules/framer-motion/dist/es/motion/utils/VisualElementHandler.mjs:13:42)
    at MotionComponent (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.2.0_react@18.2.0/node_modules/framer-motion/dist/es/motion/index.mjs:48:24)
    at P (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/styled-components@5.3.11_@babel+core@7.23.3_react-dom@18.2.0_react-is@16.13.1_react@18.2.0/node_modules/styled-components/dist/styled-components.browser.esm.js:30:19658)
    at div
    at VisualElementHandler (webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.2.0_react@18.2.0/node_modules/framer-motion/dist/es/motion/utils/VisualElementHan
window.console.error @ app-index.js:31
console.error @ hydration-error-info.js:45
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
setProp @ react-dom.development.js:32770
setInitialProperties @ react-dom.development.js:33655
finalizeInitialChildren @ react-dom.development.js:35406
completeWork @ react-dom.development.js:19781
completeUnitOfWork @ react-dom.development.js:25870
performUnitOfWork @ react-dom.development.js:25675
workLoopSync @ react-dom.development.js:25380
renderRootSync @ react-dom.development.js:25335
performSyncWorkOnRoot @ react-dom.development.js:24808
flushSyncWorkAcrossRoots_impl @ react-dom.development.js:10171
flushSyncWorkOnAllRoots @ react-dom.development.js:10129
processRootScheduleInMicrotask @ react-dom.development.js:10273
eval @ react-dom.development.js:10444
setTimeout (async)
eval @ utils.mjs:287
sleep @ utils.mjs:286
scheduleMicrotask @ utils.mjs:296
flush @ notifyManager.mjs:59
batch @ notifyManager.mjs:25
dispatch @ mutation.mjs:234
execute @ mutation.mjs:145
await in execute (async)
mutate @ mutationObserver.mjs:85
eval @ useMutation.mjs:19
eval @ index.js:753
connect @ index.es.js:5835
runConnect @ index.es.js:7282
setTimeout (async)
eval @ index.es.js:7293
commitHookEffectListMount @ react-dom.development.js:21096
invokePassiveEffectMountInDEV @ react-dom.development.js:23989
invokeEffectsInDev @ react-dom.development.js:26738
legacyCommitDoubleInvokeEffectsInDEV @ react-dom.development.js:26721
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:26702
flushPassiveEffectsImpl @ react-dom.development.js:26411
flushPassiveEffects @ react-dom.development.js:26335
performSyncWorkOnRoot @ react-dom.development.js:24798
flushSyncWorkAcrossRoots_impl @ react-dom.development.js:10171
flushSyncWorkOnAllRoots @ react-dom.development.js:10129
commitRootImpl @ react-dom.development.js:26266
commitRoot @ react-dom.development.js:25984
commitRootWhenReady @ react-dom.development.js:24711
finishConcurrentRender @ react-dom.development.js:24676
performConcurrentWorkOnRoot @ react-dom.development.js:24521
workLoop @ scheduler.development.js:261
flushWork @ scheduler.development.js:230
performWorkUntilDeadline @ scheduler.development.js:534
@FFdhorkin FFdhorkin added the bug Something isn't working label Nov 16, 2023
@FFdhorkin
Copy link
Author

My original suggestion mysteriously seemed to stop working... this is still working, though:

in packages/connectkit/src/components/Common/Button/index.tsx#L45

  const hrefUrl = href !== undefined
    ? typeof href === 'string' ? href : flattenChildren(href).join('') // Need to have a flat string for the href
    : null;

@lochie
Copy link
Member

lochie commented Mar 25, 2024

@FFdhorkin is this still an issue in version 1.7.2?

@lochie
Copy link
Member

lochie commented Apr 17, 2024

Closing this issue as this should be resolved in newer versions of ConnectKit

@lochie lochie closed this as completed Apr 17, 2024
@metalogica metalogica mentioned this issue Feb 6, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lochie @FFdhorkin