code-hike / codehike

Marvellous code walkthroughs
https://codehike.org
MIT License
4.39k stars 135 forks source link

`NaN` set as `width` in docusaurus tabs #279

Closed austince closed 1 year ago

austince commented 1 year ago

Hey there, I'm using Docusaurus tabs and having an issue where code blocks within all-but-the-first tabs don't render, but instead seem to set NaN as the width.

<Tabs>
<TabItem value="tab1">
\```sh
curl http://google.com
\```
</TabItem>
<TabItem value="tab2">
\```sh
curl http://bing.com
\```
</TabItem>
</Tabs>

The first tab renders fine, but the second gives a stack trace like:

Warning: `NaN` is an invalid value for the `width` css style property.
div
LineContainer@webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:2050:23
LineGroup@webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:2007:19
Lines@webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:1985:15
div
div
Content$1@webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:1895:19
code
Container@webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:1887:19
SmoothContainer@webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:1866:25
SmoothLines
div
Wrapper@webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:2150:17
AfterDimensions@webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:2135:25
CodeTween@webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:2124:39
CodeSpring@webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:2425:28
div
InnerCode@webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:3445:26
Code@webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:3424:64
div
TabItem@webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/TabItem/index.js:13:58
div
div
TabsComponent@webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/Tabs/index.js:20:168
Tabs@webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/Tabs/index.js:25:3502

My docusaurus config is:

const {
  remarkCodeHike,
} = require("@code-hike/mdx")

const config = {
// ...
  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          beforeDefaultRemarkPlugins: [
            [remarkCodeHike, { theme }],
          ],
// ...
}

Any ideas on what could be going wrong here?

pusolito commented 1 year ago

Any updates on this? I'm also blocked from using code-hike because of this issue.