flat-fuchsia•2y ago

How to Fix this broke Sider Component from V3.xx

Hi, I wanted to use this custom sider that I repurposed from a v3.xx app to work on a 4.xx one. I basically already migrated the whole project. Only this is left. Here's my Resources Object that I'm passing to Refine. I've configured the routes and they seem to be working correctly. But the Sider isn't. The editor shows errors and the App also crashes. While trying to fix this, Something else broke, I'm not sure what. So the whole app crashes rn.

6 Replies

flat-fuchsiaOP•2y ago

here's the Custom Sider File

CustomSider.tsx

kapa.ai•2y ago

Hey @thalfpant! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- I understand that you're facing issues with the custom Sider component after migrating from v3.xx to v4.xx. To help you fix the issue, I'll need to see the code for your custom Sider component. However, I can provide some general guidance based on the information extracts. 1. Make sure you're using the new routing system in v4.xx. The route property is deprecated, and you should define custom routes per action. You can find more information about this in the migration guide (https://refine.dev/docs/migration-guide/3x-to-4x). 2. If you have customized the <Sider> component, there might be a color mismatch issue. You can fix this by giving the theme dark to the <Menu> component in the <Sider> component, as shown in the migration guide (https://refine.dev/docs/api-reference/antd/migration-guide/v4-to-v5).

<Menu  
+ theme='dark'  
  selectedKeys={[selectedKey]}  
  defaultOpenKeys={defaultOpenKeys}  
  mode='inline'  
  onClick={() => {  
  if (!breakpoint.lg) {  
  setCollapsed(true)  
  }  
  }}>  
  {renderSider()}  
</Menu>

<Menu  
+ theme='dark'  
  selectedKeys={[selectedKey]}  
  defaultOpenKeys={defaultOpenKeys}  
  mode='inline'  
  onClick={() => {  
  if (!breakpoint.lg) {  
  setCollapsed(true)  
  }  
  }}>  
  {renderSider()}  
</Menu>

3. If you're using the Sider property in the <Refine> component, it's deprecated. Instead, pass the Sider property to the Layout component when using the new routing system. You can find more information about this in the Refine documentation (https://refine.dev/docs/api-reference/core/components/refine-config). 4. You can use the render prop to customize the render of the <Sider> without needing to swizzle the whole component. You can find more information about this in the custom layout tutorial (https://refine.dev/docs/advanced-tutorials/custom-layout). If you can provide the code for your custom Sider component, I can give more specific guidance on how to fix the issue. ----------------------

kapa.ai•2y ago

<@439051486597611531> kapa.ai is still learning and improving, please let us how it did by reacting below

compatible-crimson•2y ago

Hey @thalfpant, There is no problem with resource definitions 👍 I caught differences between your custom <Sider> and our Sider. You can compare it using swizzle or this https://github.com/refinedev/refine/blob/next/packages/mui/src/components/layout/sider/index.tsx. Swizzle doc: https://refine.dev/docs/packages/documentation/cli/#swizzle

probable-pink•2y ago

Hey @thalfpant check out this section in the migration guide, this will probably resolve the issue https://refine.dev/docs/migration-guide/router-provider/#changes-in-custom-sider-components

Migrating Router Provider from 3.x.x to 4.x.x | refine

Motivation behind the changes

flat-fuchsiaOP•2y ago

Man, Instant Fix! Damn! Thank you very much. It really fixed the problem.