Element type is invalid | Storybook | Page 1

abstract lion Jul 1, 2023, 7:24 AM

#

Framework: Nextjs 12 Storybook v7

SideNav.tsx is simple function based component.
This is SideNav.stories.tsx

import LanguageProvider from '@/components/LanguageProvider';

import type { Meta, StoryObj } from '@storybook/react';

import SideNav from './SideNav';

const meta: Meta<typeof SideNav> = { component: SideNav };
export default meta;

type Story = StoryObj<typeof SideNav>;

export const Default: Story = {
  render: () => <SideNav className="sidenav" />,
};

abstract lion Jul 3, 2023, 7:33 AM

#

still looking for solution

open spindle Jul 4, 2023, 8:45 PM

#

Does SideNav exist. As in, is the default export in SideNav a component?

abstract lion Jul 7, 2023, 5:30 AM

#

This is SideNav.tsx

import { translate } from '@/components/IntlGlobalProvider';
import AllOrdersIcon from '@/public/icons/all-orders-icon.svg';
import TripDashboardIcon from '@/public/icons/trip-dashboard.svg';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import React from 'react';
import styled from 'styled-components';

const StyledMenu = styled(Menu)`
  display: flex;
  overflow: auto;
  width: 256px;
  max-height: calc(100vh - (48px));
  // to give scroll in sideNav menu after hitting screen height; 48px is header's height
  flex-direction: column;
  gap: 22px;
  font-weight: 700;
  font-size: 14px;
`
const SideNav: React.FC<ISideNav> = ({ className: cName }: ISideNav) => {
  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e);
  };

  const items: MenuProps['items'] = [
    getItem(
      translate('trip_dashboard'),
      'trip_dashboard',
      <TripDashboardIcon />
    ),
      getItem(translate('all_orders'), 'all_orders', <AllOrdersIcon />, [
      getItem(translate('open_orders'), 'open_orders'),
      getItem(translate('dispatched_orders'), 'dispatched_orders'),
      getItem(translate('completed_orders'), 'completed_orders'),

  ];

  return (
    <StyledMenu
      className={cName}
      onClick={onClick}
      style={{ width: 256 }}
      mode="inline"
      items={items}
      subMenuOpenDelay={0.5}
      subMenuCloseDelay={0.5}
      // theme={'dark'}
    />
  );
};

export default SideNav;

abstract lion Jul 7, 2023, 5:31 AM

#

open spindle Does `SideNav` exist. As in, is the default export in `SideNav` a component?

yes, look above code.

dense stirrup Jul 7, 2023, 6:48 AM

#

Could you try printing SideNav in the story? See if you get the default export, or an object with a default prop? Happens in some stacks

abstract lion Jul 7, 2023, 4:41 PM

#

dense stirrup Could you try printing SideNav in the story? See if you get the default export, ...

what do you mean by printing? i did make .stories.tsx file and render SideNav component. it show me Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

open spindle Jul 7, 2023, 7:21 PM

#

console.log

dense stirrup Jul 8, 2023, 11:49 AM

#

Just to check you get your component function and not null or an object with `default

abstract lion Jul 8, 2023, 4:19 PM

#

FIxed. issue was svg component was not loading. so i had to add webpack rules for svg loaders

#

svgr webpack config (Solution)

webpackFinal: (config) => {
    // Default rule for images /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
    const fileLoaderRule = config.module.rules.find(
      (rule) => rule.test && rule.test.test('.svg')
    );
    fileLoaderRule.exclude = /\.svg$/;

    config.module.rules.push({
      test: /\.svg$/,
      enforce: 'pre',
      loader: require.resolve('@svgr/webpack'),
    });

    return config;
  },

#Element type is invalid