Cannot read property 'rtl' of undefined

[nizhegorodets]

Good afternoon!

I'm trying to use an external component, but I can't import it correctly. Please tell me where I am going wrong?

Component:
https://garden.zendesk.com/components/tabs#tab

Sandbox example:
https://codesandbox.io/s/88ejj?module=src/Example.tsx&file=/src/Example.tsx

I was able to import TabList, Tab, TabPanel successfully, but there is an error when importing Tabs.

Versions:

scalaVersion := "2.13.6"

Compile / npmDependencies += "react"                        -> "16.13.1"
Compile / npmDependencies += "react-dom"                    -> "16.13.1"
Compile / npmDependencies += "react-proxy"                  -> "1.1.8"
Compile / npmDependencies += "react-router-dom"             -> "5.2.0"
Compile / npmDependencies += "@zendeskgarden/react-buttons" -> "8.38.0"
Compile / npmDependencies += "@zendeskgarden/react-tabs"    -> "8.38.0"

Compile / npmDevDependencies += "file-loader"         -> "6.2.0"
Compile / npmDevDependencies += "style-loader"        -> "2.0.0"
Compile / npmDevDependencies += "css-loader"          -> "5.2.6"
Compile / npmDevDependencies += "html-webpack-plugin" -> "4.5.1"
Compile / npmDevDependencies += "copy-webpack-plugin" -> "6.4.0"
Compile / npmDevDependencies += "webpack-merge"       -> "5.8.0"

libraryDependencies += "me.shadaj" %%% "slinky-web" % "0.6.7"
libraryDependencies += "me.shadaj" %%% "slinky-hot" % "0.6.7"

libraryDependencies += "org.scalatest" %%% "scalatest" % "3.2.9" % Test

scalacOptions += "-Ymacro-annotations"

webpack / version := "4.44.2"
startWebpackDevServer / version := "3.11.2"

My code:

@JSImport("@zendeskgarden/react-tabs", JSImport.Default)
@js.native
object GardenTab extends js.Object {
  val Tab: js.Object = js.native
}

@react object Tab extends ExternalComponent {
  case class Props(item: String)
  override val component = GardenTab.Tab
}

@JSImport("@zendeskgarden/react-tabs", JSImport.Default)
@js.native
object GardenTabList extends js.Object {
  val TabList: js.Object = js.native
}

@react object TabList extends ExternalComponent {
  case class Props()
  override val component = GardenTabList.TabList
}

@JSImport("@zendeskgarden/react-tabs", JSImport.Default)
@js.native
object GardenTabPanel extends js.Object {
  val TabPanel: js.Object = js.native
}

@react object TabPanel extends ExternalComponent {
  case class Props(item: String)
  override val component = GardenTabPanel.TabPanel
}

@JSImport("@zendeskgarden/react-tabs", JSImport.Default)
@js.native
object GardenTabs extends js.Object {
  val Tabs: js.Object = js.native
}

@react object Tabs extends ExternalComponent {
  case class Props(isVertical: Boolean)
  override val component = GardenTabs.Tabs
}

@react class App extends StatelessComponent {
  type Props = Unit

  def render() =
    div(className := "App")(
      p(className := "gardenTabs") {
        Tabs(isVertical = true)(
          TabList() {
            Seq(
              Tab(item = "item1")("ITEM1"),
              Tab(item = "item2")("ITEM2"),
              Tab(item = "item3")("ITEM3")
            )
          },
          TabPanel(item = "item1") { "item1 tabPanel" },
          TabPanel(item = "item2") { "item2 tabPanel" }
        )
      }
    )
}

"Tabs code":

import React from 'react';
import { ThemeProps, DefaultTheme } from 'styled-components';
export interface ITabsProps extends Partial<ThemeProps<DefaultTheme>> {
    /**
     * Displays child `Tab` components in a vertical orientation
     */
    isVertical?: boolean;
    /**
     * Sets the currently selected `Tab` to display
     */
    selectedItem?: any;
    /**
     * Provides a callback function that returns the `selectedItem` when a `Tab` has been selected by keyboard or mouse
     * @param {String} selectedItem The `item` value of the selected `Tab`
     */
    onChange?: (updatedSelectedItem: any) => void;
}
declare const _default: React.FC<ITabsProps & React.RefAttributes<HTMLDivElement>>;
/** @component */
export default _default;

[shadaj]

Where specifically does the exception take place? It seems to be happening within React?