mui-treasury icon indicating copy to clipboard operation
mui-treasury copied to clipboard

Mutate state tutorial: An error "Cannot read property 'sm' of undefined"

Open LukaszGrela opened this issue 3 years ago • 1 comments

By using the get**Scheme methods I see the Cannot read property 'sm' of undefined error thrown at DrawerSidebar component.

pickNearestBreakpoint.ts:9 Uncaught TypeError: Cannot read property 'sm' of undefined
    at pickNearestBreakpoint (pickNearestBreakpoint.ts:9)
    at useBreakpointConfig (useBreakpointConfig.ts:7)
    at DrawerSidebar (DrawerSidebar.tsx:58)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at discreteUpdates$1 (react-dom.development.js:22420)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

Mutating the scheme:

const standardScheme = getStandardScheme()

standardScheme.configureEdgeSidebar(builder => {
  builder.update('primarySidebar', config => {
    config.sm.collapsible = false;
  });
});

Fails with object possibly undefined (sm), then when it is assured that it exists if(config.sm) it throws error that collapsible does not exist:

Property 'collapsible' does not exist on type 'Omit<EdgeSidebarConfig, "id" | "anchor">'.

It looks like the EdgeSidebarConfig is missing the CollapsibleSidebarConfig, I guess it should say:

export declare type EdgeSidebarConfig = PersistentSidebarConfig | PermanentSidebarConfig | TemporarySidebarConfig | CollapsibleSidebarConfig;

TypeScript: 4.2.3 @mui-treasury/layout: 4.5.0

LukaszGrela avatar Mar 23 '21 10:03 LukaszGrela

Can you provide the code that I can reproduct?

siriwatknp avatar Apr 15 '21 03:04 siriwatknp