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

[mmarzullotv]

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 <Modal.Root>. 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.

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]

I'm having the same issue with same versions

[mmarzullotv]

@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]

@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]

@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)