formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

TextArea.Aligner throws an error #187

Closed b-graves closed 8 months ago

b-graves commented 8 months ago

I have the following:

<View gap={4} paddingTop={5} paddingBottom={4}>
  <InitiativeTitle />
  <InitiativeDescription initiative={initiative} />
  <InitiativeAddButtons initiative={initiative} />
</View>

Where InitiativeDescription looks like:

 <TextArea.Aligner>
    <TextArea
      name="description"
      variant="headless"
      value={newDescription}
      onChange={(e) => setNewDescription(e.value)}
    />
  </TextArea.Aligner>

but it throws the error:

hooks.tsx:608 React Router caught the following error during render Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `InitiativeDescription`.
    at createFiberFromTypeAndProps (react-dom.development.js:28439:17)
    at createFiberFromElement (react-dom.development.js:28465:15)
    at reconcileSingleElement (react-dom.development.js:15750:23)
    at reconcileChildFibers2 (react-dom.development.js:15808:35)
    at reconcileChildren (react-dom.development.js:19174:28)
    at updateFunctionComponent (react-dom.development.js:19620:3)
    at beginWork (react-dom.development.js:21601:16)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5) {componentStack: '\n    at InitiativeDescription (https://demo.localh….vite/deps/react-router-dom.js?v=64b0571f:3535:5)'}

also

ErrorBoundary.tsx:21 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `InitiativeDescription`.
    at createFiberFromTypeAndProps (react-dom.development.js:28439:17)
    at createFiberFromElement (react-dom.development.js:28465:15)
    at reconcileSingleElement (react-dom.development.js:15750:23)
    at reconcileChildFibers2 (react-dom.development.js:15808:35)
    at reconcileChildren (react-dom.development.js:19174:28)
    at updateFunctionComponent (react-dom.development.js:19620:3)
    at beginWork (react-dom.development.js:21601:16)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)

if I remove the TextArea.Aligner it fixes the error but obviously not aligned

Thanks!

blvdmitry commented 8 months ago

Can you tell me more about your project setup? Which dependencies and which versions you're using? I've just tried it on codesandbox but couldn't reproduce the issue: https://codesandbox.io/s/friendly-meadow-vqkqnw?file=/src/App.tsx

b-graves commented 8 months ago

ah apologies, I think it was because I updated the library to the latest version with the Aligner included, but didn't restart my yarn start. It's working now, sorry about that