TabList in v9 not working properly with v8

[ShrutiJaiswal1494]

trafficstars

Hi Team,

We are using Fluent-UI react v8 for our internal office application. However, we wanted to use the TabList control that was added in v9. As we aren't planning on migrating any of the controls from v8-v9 yet and based on the documentation it seems like we can use both v8 and v9 version side-by-side, so after adding the FluentUI react-component v9 version in the app, the edge's devTool is not loading and also the TabList control is not appearing as expected.

I am following the documentation here to add the new react-component to the existing app. To be specific I just added the the package using yarn and now I am trying use the TabList control. Is there something I am missing here? Any help would be really appreciated. Thanks in advance!

Issue in DevTool

Added TabList in UI

Environment Information

• Package version(s): fluentui/react: 8.68.0 fluentui/react-components: 9.2.0
• Browser and OS versions: Microsoft Edge: Version 103.0.1264.77 OS: Windows 11 Enterprice

[layershifter]

@ShrutiJaiswal1494 it seems that you don't have configured FluentProvider in your tree:

"I tried using the new components but there does not seem to be any styling applied to them. Am I doing something wrong?" Components in version 8 could be used in isolation and still retain their default styling. For components to be styled in version 9, they must be wrapped with FluentProvider with a theme passed to it.

https://react.fluentui.dev/?path=/docs/concepts-upgrading-from-v8-troubleshooting--page

Can you please check?

[ShrutiJaiswal1494]

Hi @layershifter, Thanks for the reply. I was indeed missing the FluentProvider component in my App, after configuring it my styling got fixed. However, I am still getting this out of memory error from the edge devtools when I load/reload the App. It's been happening after I added the V9 package. Can you please help me know what might be wrong here.

[layershifter]

@ShrutiJaiswal1494 sorry, but it's not clear to me how I can reproduce the problem. Do you have a minimal reproduction case that you can share? Does it repro on Chrome, for example?

Naive idea is that it might be caused by @fluentui/react-icons and sourcemaps somehow. If you're are using Webpack, can you please try to set devtool: false?

[ShrutiJaiswal1494]

Setting devtool to false is not causing the problem though we would like to restore the original behavior. Also after using makestyles I am getting error and the App is not loading. We are using class based components if in case that matters.

 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:242:21)
    at invokeGuardedCallback (react-dom.development.js:286:33)
    at beginWork$1 (react-dom.development.js:23338:9)
    at performUnitOfWork (react-dom.development.js:22292:14)
    at workLoopSync (react-dom.development.js:22265:24)
    at performSyncWorkOnRoot (react-dom.development.js:21891:11)
    at scheduleUpdateOnFiber (react-dom.development.js:21323:9)
    at updateContainer (react-dom.development.js:24508:5)
    at react-dom.development.js:24893:9
    at unbatchedUpdates (react-dom.development.js:22038:14)

[layershifter]

Setting devtool to false is not causing the problem though we would like to restore the original behavior.

Sorry, but I did not get. Does devtool: false solve the problem with Devtools or not? Does it repro on Chrome, for example?

Also after using makestyles I am getting error and the App is not loading. We are using class based components if in case that matters.

Sorry, but I don't have any idea what is happening... Can you please provide a minimal reproduction case on CodeSandbox/Codepen so I could check?

P.S. makeStyles() function cannot be called inside components and is not compatible with class components as makeStyles() call returns a React hook.

[ShrutiJaiswal1494]

I haven't checked on chrome yet. But setting devtools to false solved the out of memory issue that we were facing. With restoring to original behavior I meant making the source-map option for devtool work with V9. Yes, Since makesStyles() returns a hook I think it's causing the App to crash. Is there a workaround for class components if we want to use the vertical TabList?

Currently we are using the semantic-ui Tab control in our App and wanted to replace it with something similar from FluentUI. It would be great if you can share some example/doc on how to create something similar for class components.

[layershifter]

I haven't checked on chrome yet. But setting devtools to false solved the out of memory issue that we were facing. With restoring to original behavior I meant making the source-map option for devtool work with V9.

What devtool value are you using in your app? One of our partners uses v9 in a big project without issues with eval-cheap-module-source-map:

// webpack.config.js
devtool: "eval-cheap-module-source-map",

Would you mind to try it?

---

Yes, Since makesStyles() returns a hook I think it's causing the App to crash. Is there a workaround for class components if we want to use the vertical TabList?

Currently we are using the semantic-ui Tab control in our App and wanted to replace it with something similar from FluentUI. It would be great if you can share some example/doc on how to create something similar for class components.

Indeed you can't do following:

const useClasses = makeStyles();

class Component extends React.Component {
  render() {
    // ❌ This will throw
    const classes = useClasses();

    return <TabList className={classes.root} />;
  }
}

However you can still use v9 components:

class Component extends React.Component {
  render() {
    return <TabList />;
  }
}

As a workaround to use v9 styling you can use render props:

const useClasses = makeStyles();

const ComponentClasses = props => {
  // ✅ This is a functional component, it will not throw
  const classes = useClasses();

  return props.children(classes);
};

class Component extends React.Component {
  render() {
    return (
      <ComponentClasses>
        {classes => <TabList className={classes.root} />}
      </ComponentClasses>
    );
  }
}

[ShrutiJaiswal1494]

Thank you @layershifter. This worked! Also, how can I make the tabs work with the Zoom feature. For e.g. when I zoom it 200% or 400% the contents in the tab pane gets truncated without any scroll bar (I know about the ScrollablePanel, Is that the workaround for this case?).

[layershifter]

Thank you @layershifter. This worked! Also, how can I make the tabs work with the Zoom feature.

Great, I am going to close this issue as we resolved existing problems 🙌

or e.g. when I zoom it 200% or 400% the contents in the tab pane gets truncated without any scroll bar (I know about the ScrollablePanel, Is that the workaround for this case?).

Can you please create a separate issue/discussion and describe your requirement a bit more? 🙏 Thanks.