strapi / design-system

Strapi.io's design system :rocket:
https://design-system.strapi.io
MIT License
470 stars 165 forks source link

[bug]: "Cannot read properties of undefined (reading 'Root')" on Modal component #1777

Open mmarzullotv opened 2 months ago

mmarzullotv commented 2 months ago

What version of design-system are you using?

^1.19.0

What's Wrong?

When I try to add a Modal component, entire UI will crash in white with the error on the title. Is not recognizing the . I'm using this component inside a custom field plugin on Strapi's CMS.

I was also wondering where to add the <DesignSystemProvider> provider in this case since from the plugin perspective, it just loads a component. Should I just wrap the component in this provider either way? I tried but keeps happening the same issue.

Screenshot 2024-08-16 at 13 02 25

This is my current code that I was testing as an example:

const ModalImpl = (): JSX.Element => {
  return (
    <Modal.Root>
      <Modal.Trigger>
        <Button>Select Content</Button>
      </Modal.Trigger>
      <Modal.Content>
        <Modal.Header>
          <Modal.Title>Search content</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Field.Root name="name" required>
            <Field.Label>Content Title</Field.Label>
            <Field.Input />
          </Field.Root>
        </Modal.Body>
        <Modal.Footer>
          <Modal.Close>
            <Button variant="tertiary">Cancel</Button>
          </Modal.Close>
          <Button>Confirm</Button>
        </Modal.Footer>
      </Modal.Content>
    </Modal.Root>
  );
};

This is my dependency list

"dependencies": {
    "@strapi/design-system": "^1.19.0",
    "@strapi/icons": "^1.19.0",
    "@strapi/plugin-cloud": "4.25.6",
    "@strapi/plugin-i18n": "4.25.6",
    "@strapi/plugin-users-permissions": "4.25.6",
    "@strapi/strapi": "4.25.6",
    "better-sqlite3": "8.6.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "5.3.4",
    "styled-components": "5.3.3"
  },

To Reproduce

Add a markdown for a <Modal.Root>

Expected Behaviour

It should render without any issues.

ruan-azevedo commented 2 months ago

I'm having the same issue with same versions

mmarzullotv commented 2 months ago

@ruan-azevedo yea, I ended up having to use different components. Something's off with the current design-system documentation giving non-updated examples? Not sure what could be happening.

This is the modal structure example that I had to put and worked:

    <ModalLayout onClose={handleClose} labelledBy="title" as="form" onSubmit={handleSubmit}>
      <ModalHeader>
        <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
          Modal Title
        </Typography>
      </ModalHeader>
      <ModalBody>
        <TextInput
          placeholder="What do you need to do?"
          label="Name"
          name="text"
          hint="Max 40 characters"
          error={getError()}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
          value={name}
        />
      </ModalBody>
      <ModalFooter
        startActions={
          <Button onClick={handleClose} variant="tertiary">
            Cancel
          </Button>
        }
        endActions={
          <Button type="submit" loading={status === 'loading'}>
            {status === 'loading' ? 'Saving...' : 'Save'}
          </Button>
        }
      />
    </ModalLayout>
DarlyMR commented 2 months ago

@mmarzullotv The documentation does not say that it is directed for the V2 (or I did not read it), I had to analyze the repository to realize that

DanzCode commented 2 months ago

@ruan-azevedo yea, I ended up having to use different components. Something's off with the current design-system documentation giving non-updated examples? Not sure what could be happening.

Probably because tag v.1.19.0 and main differ significantly from each other and the storybook documentation linked in the readme is built against main (at least according to the URL)