Error while using @strapi/design-system v1.19.0 in strapi v4.25.0

Discord Q&A strapi-questions
1

I’m using @strapi/design-system v1.19.0 and tried to follow the instruction to use the Popover compoment from Strapi Design System (@storybook/cli - Storybook) and when I run the code. It gives me following 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.

Here is my code:

import React from 'react';
import { Box, Popover } from '@strapi/design-system';
import pluginId from '../../pluginId';

const HomePage = () => {
  return (
    <div>
      <h1>{pluginId}&apos;s HomePage</h1>
      <Popover.Root>
            <Popover.Trigger>
              <button>click me!</button>
            </Popover.Trigger>
            <Popover.Content>
            {Array(15).fill(null).map((_, index) => <Box color="neutral800" key={index} padding={3} as="li">
                        Element{index}
                      </Box>)}
            </Popover.Content>
          </Popover.Root>
    </div>
  );
};

export default HomePage;

This topic has been created from a Discord post (1251329228604178494) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord

1 Like
2

Same error, did you found solution?

3

Seems like the current storybook is actually for a different version

4

You can check out the repo and run storybook locally for whatever version you have installed through the instructions in the CONTRIBUTING file

But <@1070467185354481724> This, along with the typescript releases being in a different undocumented version, does not help plugin development :sweat_drops: