search

quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.93k stars 325 forks source link

Docusaurus `style` prop expects a mapping from style properties to values, not a string #9179

Closed krishaamer closed 7 months ago

krishaamer commented 7 months ago

Bug description

Docusaurus server-side rendering could not render static page with path ... because of error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

This surfaced recently because of tables rendered as such ```

col style="width: 4%" col style="width: 95%"



### Steps to reproduce

_No response_

### Expected behavior

_No response_

### Actual behavior

`[13:37:51.926] Running build in Washington, D.C., USA (East) – iad1
[13:37:52.114] Cloning github.com/krishaamer/green-filter-research (Branch: main, Commit: 907b059)
[13:37:52.527] Previous build cache not available
[13:37:55.940] Cloning completed: 3.823s
[13:37:56.533] Running "vercel build"
[13:37:57.501] Vercel CLI 33.6.1
[13:37:58.778] Installing dependencies...
[13:37:59.445] yarn install v1.22.22
[13:37:59.639] [1/4] Resolving packages...
[13:38:00.501] [2/4] Fetching packages...
[13:38:17.177] [3/4] Linking dependencies...
[13:38:17.182] warning "@docusaurus/core > react-loadable-ssr-addon-v5-slorber@1.0.1" has unmet peer dependency "react-loadable@*".
[13:38:17.187] warning "@docusaurus/core > react-dev-utils > fork-ts-checker-webpack-plugin@6.5.3" has unmet peer dependency "typescript@>= 2.7".
[13:38:17.192] warning "@docusaurus/plugin-ideal-image > @slorber/react-ideal-image@0.0.12" has unmet peer dependency "prop-types@>=15".
[13:38:17.193] warning " > @mdx-js/react@3.0.1" has unmet peer dependency "@types/react@>=16".
[13:38:17.194] warning "@docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react > @algolia/autocomplete-preset-algolia@1.9.3" has unmet peer dependency "@algolia/client-search@>= 4.9.1 < 6".
[13:38:17.194] warning "@docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react > @algolia/autocomplete-core > @algolia/autocomplete-plugin-algolia-insights@1.9.3" has unmet peer dependency "search-insights@>= 1 < 3".
[13:38:17.194] warning "@docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react > @algolia/autocomplete-core > @algolia/autocomplete-shared@1.9.3" has unmet peer dependency "@algolia/client-search@>= 4.9.1 < 6".
[13:38:24.396] [4/4] Building fresh packages...
[13:38:25.856] Done in 26.42s.
[13:38:25.896] Running "yarn run build"
[13:38:26.086] yarn run v1.22.22
[13:38:26.116] $ docusaurus build
[13:38:27.267] [INFO] [en] Creating an optimized production build...
[13:38:30.399] [info] [webpackbar] Compiling Client
[13:38:30.421] [info] [webpackbar] Compiling Server
[13:39:01.777] [success] [webpackbar] Client: Compiled successfully in 31.38s
[13:39:04.258] Error: Docusaurus server-side rendering could not render static page with path /research/literature/ai because of error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
[13:39:04.258]     at serverEntry_render (main:57227:358)
[13:39:04.258]     at runNextTicks (node:internal/process/task_queues:60:5)
[13:39:04.258]     at process.processImmediate (node:internal/timers:449:9)
[13:39:04.258]     at async /vercel/path0/node_modules/p-map/index.js:57:22 {
[13:39:04.258]   [cause]: Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
[13:39:04.258]       at Fa (main:117803:49)
[13:39:04.258]       at K (main:117805:44)
[13:39:04.258]       at Pa (main:117815:222)
[13:39:04.258]       at Xc (main:117849:32)
[13:39:04.258]       at Z (main:117854:89)
[13:39:04.258]       at Yc (main:117857:98)
[13:39:04.259]       at $c (main:117856:140)
[13:39:04.259]       at Z (main:117854:345)
[13:39:04.259]       at Yc (main:117857:98)
[13:39:04.259]       at Xc (main:117849:145)
[13:39:04.259] }
[13:39:04.346] Error: Docusaurus server-side rendering could not render static page with path /research/literature/sustainability because of error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
[13:39:04.346]     at serverEntry_render (main:57227:358)
[13:39:04.346]     at runNextTicks (node:internal/process/task_queues:60:5)
[13:39:04.346]     at process.processImmediate (node:internal/timers:449:9)
[13:39:04.347]     at async /vercel/path0/node_modules/p-map/index.js:57:22 {
[13:39:04.347]   [cause]: Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
[13:39:04.347]       at Fa (main:117803:49)
[13:39:04.347]       at K (main:117805:44)
[13:39:04.347]       at Pa (main:117815:222)
[13:39:04.347]       at Xc (main:117849:32)
[13:39:04.347]       at Z (main:117854:89)
[13:39:04.347]       at Yc (main:117857:98)
[13:39:04.347]       at $c (main:117856:140)
[13:39:04.347]       at Z (main:117854:345)
[13:39:04.347]       at Yc (main:117857:98)
[13:39:04.347]       at Xc (main:117849:145)
[13:39:04.347] }
[13:39:05.081] [success] [webpackbar] Server: Compiled with some errors in 34.66s
[13:39:05.114] 
[13:39:05.114] Error: Unable to build website for locale en.
[13:39:05.114]     at tryToBuildLocale (/vercel/path0/node_modules/@docusaurus/core/lib/commands/build.js:55:19)
[13:39:05.114]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[13:39:05.114]     at async mapAsyncSequential (/vercel/path0/node_modules/@docusaurus/utils/lib/jsUtils.js:44:24)
[13:39:05.114]     at async Command.build (/vercel/path0/node_modules/@docusaurus/core/lib/commands/build.js:82:21) {
[13:39:05.114]   [cause]: Error: Failed to compile due to Webpack errors.
[13:39:05.114]   Error: Docusaurus server-side rendering could not render static page with path /research/literature/ai because of error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
[13:39:05.114]   
[13:39:05.114]   --------------------------
[13:39:05.114]   
[13:39:05.114]   Error: Docusaurus server-side rendering could not render static page with path /research/literature/sustainability because of error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
[13:39:05.114]       at /vercel/path0/node_modules/@docusaurus/core/lib/webpack/utils.js:207:24
[13:39:05.115]       at /vercel/path0/node_modules/webpack/lib/MultiCompiler.js:596:14
[13:39:05.115]       at processQueueWorker (/vercel/path0/node_modules/webpack/lib/MultiCompiler.js:533:6)
[13:39:05.115]       at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
[13:39:05.115] }
[13:39:05.115] 
[13:39:05.115] [INFO] Docusaurus version: 3.1.1
[13:39:05.115] Node version: v20.11.1
[13:39:05.175] error Command failed with exit code 1.
[13:39:05.175] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[13:39:05.190] Error: Command "yarn run build" exited with 1
[13:39:07.713] `

### Your environment

_No response_

### Quarto check output

_No response_
cscheid commented 7 months ago

Can you give us a full .qmd that gives you the error?

mcanouil commented 7 months ago

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````). See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

RPython
`````md ````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` ![An image](https://placehold.co/600x400.png) The end. ```` ````` `````md ````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` ![An image](https://placehold.co/600x400.png) The end. ```` `````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

github-actions[bot] commented 7 months ago

Thank you for using Quarto and reporting an issue!

Unfortunately, this issue is now considered stale because it has been opened since 14 days without providing a "working" reproducible example to help us investigate. If you are still facing the issue, please review the "Bug Reports" guide on how to provide a fully reproducible example as a self-contained Quarto document or a link to a Git repository. Without a reproducible example, it is unlikely that the issue will be addressed.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)

The end.

cscheid commented 7 months ago

@krishaamer Sorry to ping you, but would it be possible for you to send us a repro case?

krishaamer commented 7 months ago

Thanks for trying to help @cscheid ! It happens on deploying to Vercel (which until 22 days ago was deploying fine) and also on localhost only on pages that have markdown tables (however some tables work)..

Screenshot 2024-04-10 at 00 26 20

Here's another log from my production app.. let me see I can get a minimal repro.

[00:05:43.364] Cloning github.com/krishaamer/green-filter-research (Branch: main, Commit: ed9aaee)
[00:05:43.661] Previous build cache not available
[00:05:45.713] Cloning completed: 2.349s
[00:05:45.969] Running "vercel build"
[00:05:46.413] Vercel CLI 33.7.0
[00:05:47.020] Installing dependencies...
[00:05:47.362] yarn install v1.22.22
[00:05:47.444] [1/4] Resolving packages...
[00:05:47.839] [2/4] Fetching packages...
[00:06:01.107] [3/4] Linking dependencies...
[00:06:01.111] warning "@docusaurus/core > react-loadable-ssr-addon-v5-slorber@1.0.1" has unmet peer dependency "react-loadable@*".
[00:06:01.114] warning "@docusaurus/core > react-dev-utils > fork-ts-checker-webpack-plugin@6.5.3" has unmet peer dependency "typescript@>= 2.7".
[00:06:01.117] warning "@docusaurus/plugin-ideal-image > @slorber/react-ideal-image@0.0.12" has unmet peer dependency "prop-types@>=15".
[00:06:01.119] warning " > @mdx-js/react@3.0.1" has unmet peer dependency "@types/react@>=16".
[00:06:01.119] warning "@docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react > @algolia/autocomplete-preset-algolia@1.9.3" has unmet peer dependency "@algolia/client-search@>= 4.9.1 < 6".
[00:06:01.120] warning "@docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react > @algolia/autocomplete-core > @algolia/autocomplete-plugin-algolia-insights@1.9.3" has unmet peer dependency "search-insights@>= 1 < 3".
[00:06:01.120] warning "@docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react > @algolia/autocomplete-core > @algolia/autocomplete-shared@1.9.3" has unmet peer dependency "@algolia/client-search@>= 4.9.1 < 6".
[00:06:07.369] [4/4] Building fresh packages...
[00:06:08.796] Done in 21.44s.
[00:06:08.833] Running "yarn run build"
[00:06:09.027] yarn run v1.22.22
[00:06:09.058] $ docusaurus build
[00:06:10.332] [INFO] [en] Creating an optimized production build...
[00:06:11.377] [info] [webpackbar] Compiling Client
[00:06:11.399] [info] [webpackbar] Compiling Server
[00:06:34.797] [success] [webpackbar] Server: Compiled successfully in 23.40s
[00:06:44.670] [success] [webpackbar] Client: Compiled successfully in 33.29s
[00:06:48.348] 
[00:06:48.351] [ERROR] Error: Unable to build website for locale en.
[00:06:48.351]     at tryToBuildLocale (/vercel/path0/node_modules/@docusaurus/core/lib/commands/build.js:53:19)
[00:06:48.351]     at async /vercel/path0/node_modules/@docusaurus/core/lib/commands/build.js:64:9
[00:06:48.351]     at async mapAsyncSequential (/vercel/path0/node_modules/@docusaurus/utils/lib/jsUtils.js:20:24)
[00:06:48.351]     at async Command.build (/vercel/path0/node_modules/@docusaurus/core/lib/commands/build.js:62:5) {
[00:06:48.351]   [cause]: Error: Docusaurus static site generation failed for 3 paths:
[00:06:48.351]   - "/research/discussion"
[00:06:48.351]   - "/research/literature/ai"
[00:06:48.352]   - "/research/literature/sustainability"
[00:06:48.352]       at generateStaticFiles (/vercel/path0/node_modules/@docusaurus/core/lib/ssg.js:85:15)
[00:06:48.352]       at async executeSSG (/vercel/path0/node_modules/@docusaurus/core/lib/commands/build.js:146:23)
[00:06:48.352]       ... 4 lines matching cause stack trace ...
[00:06:48.352]       at async Command.build (/vercel/path0/node_modules/@docusaurus/core/lib/commands/build.js:62:5) {
[00:06:48.352]     [cause]: AggregateError
[00:06:48.352]         at generateStaticFiles (/vercel/path0/node_modules/@docusaurus/core/lib/ssg.js:86:20)
[00:06:48.352]         at async executeSSG (/vercel/path0/node_modules/@docusaurus/core/lib/commands/build.js:146:23)
[00:06:48.352]         at async buildLocale (/vercel/path0/node_modules/@docusaurus/core/lib/commands/build.js:126:31)
[00:06:48.352]         at async tryToBuildLocale (/vercel/path0/node_modules/@docusaurus/core/lib/commands/build.js:46:13)
[00:06:48.352]         at async /vercel/path0/node_modules/@docusaurus/core/lib/commands/build.js:64:9
[00:06:48.352]         at async mapAsyncSequential (/vercel/path0/node_modules/@docusaurus/utils/lib/jsUtils.js:20:24)
[00:06:48.352]         at async Command.build (/vercel/path0/node_modules/@docusaurus/core/lib/commands/build.js:62:5) {
[00:06:48.352]       [errors]: [
[00:06:48.352]         Error: Can't render static file for pathname "/research/discussion"
[00:06:48.352]             at generateStaticFile (/vercel/path0/node_modules/@docusaurus/core/lib/ssg.js:119:15)
[00:06:48.352]             at runNextTicks (node:internal/process/task_queues:60:5)
[00:06:48.352]             at process.processImmediate (node:internal/timers:449:9)
[00:06:48.352]             at async /vercel/path0/node_modules/p-map/index.js:57:22 {
[00:06:48.352]           [cause]: Error: Expected component `Figure` to be defined: you likely forgot to import, pass, or provide it.
[00:06:48.352]               at _missingMdxReference (server.bundle.js:1041:9)
[00:06:48.352]               at _createMdxContent (server.bundle.js:575:16)
[00:06:48.352]               at MDXContent (server.bundle.js:1038:8)
[00:06:48.352]               at Uc (server.bundle.js:46586:44)
[00:06:48.352]               at Xc (server.bundle.js:46588:253)
[00:06:48.352]               at Z (server.bundle.js:46594:89)
[00:06:48.352]               at Xc (server.bundle.js:46592:231)
[00:06:48.352]               at Z (server.bundle.js:46594:89)
[00:06:48.352]               at Xc (server.bundle.js:46588:481)
[00:06:48.352]               at Z (server.bundle.js:46594:89)
[00:06:48.353]         },
[00:06:48.353]         Error: Can't render static file for pathname "/research/literature/ai"
[00:06:48.353]             at generateStaticFile (/vercel/path0/node_modules/@docusaurus/core/lib/ssg.js:119:15)
[00:06:48.353]             at runNextTicks (node:internal/process/task_queues:60:5)
[00:06:48.353]             at process.processImmediate (node:internal/timers:449:9)
[00:06:48.353]             at async /vercel/path0/node_modules/p-map/index.js:57:22 {
[00:06:48.353]           [cause]: Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
[00:06:48.353]               at Fa (server.bundle.js:46543:49)
[00:06:48.353]               at K (server.bundle.js:46545:44)
[00:06:48.353]               at Pa (server.bundle.js:46555:222)
[00:06:48.353]               at Xc (server.bundle.js:46589:32)
[00:06:48.353]               at Z (server.bundle.js:46594:89)
[00:06:48.353]               at Yc (server.bundle.js:46597:98)
[00:06:48.353]               at $c (server.bundle.js:46596:140)
[00:06:48.353]               at Z (server.bundle.js:46594:345)
[00:06:48.353]               at Yc (server.bundle.js:46597:98)
[00:06:48.353]               at Xc (server.bundle.js:46589:145)
[00:06:48.353]         },
[00:06:48.353]         Error: Can't render static file for pathname "/research/literature/sustainability"
[00:06:48.354]             at generateStaticFile (/vercel/path0/node_modules/@docusaurus/core/lib/ssg.js:119:15)
[00:06:48.354]             at runNextTicks (node:internal/process/task_queues:60:5)
[00:06:48.354]             at process.processImmediate (node:internal/timers:449:9)
[00:06:48.354]             at async /vercel/path0/node_modules/p-map/index.js:57:22 {
[00:06:48.354]           [cause]: Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
[00:06:48.354]               at Fa (server.bundle.js:46543:49)
[00:06:48.354]               at K (server.bundle.js:46545:44)
[00:06:48.354]               at Ka (server.bundle.js:46548:184)
[00:06:48.354]               at Pa (server.bundle.js:46556:68)
[00:06:48.354]               at Xc (server.bundle.js:46589:32)
[00:06:48.354]               at Z (server.bundle.js:46594:89)
[00:06:48.354]               at Yc (server.bundle.js:46597:98)
[00:06:48.354]               at $c (server.bundle.js:46596:140)
[00:06:48.354]               at Z (server.bundle.js:46594:345)
[00:06:48.354]               at Xc (server.bundle.js:46589:476)
[00:06:48.354]         }
[00:06:48.354]       ]
[00:06:48.354]     }
[00:06:48.354]   }
[00:06:48.354] }
[00:06:48.355] [INFO] Docusaurus version: 3.2.1
[00:06:48.355] Node version: v20.12.1
[00:06:48.421] error Command failed with exit code 1.
[00:06:48.422] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[00:06:48.436] Error: Command "yarn run build" exited with 1
[00:06:48.919]

React errors:


    at col
    at colgroup
    at table
    at MDXContent (webpack-internal:///./research/literature/sustainability.mdx:2576:71)
    at MDXProvider (webpack-internal:///./node_modules/@mdx-js/react/lib/index.js:76:18)
    at MDXContent (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/MDXContent/index.js:15:25)
    at div
    at DocItemContent (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocItem/Content/index.js:27:306)
    at article
    at div
    at div
    at div
    at DocItemLayout (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocItem/Layout/index.js:28:750)
    at HtmlClassNameProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/metadataUtils.js:29:46)
    at DocProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/doc.js:24:26)
    at DocItem (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocItem/index.js:17:72)
    at RouteContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/routeContext.js:16:60)
    at LoadableComponent (webpack-internal:///./node_modules/react-loadable/lib/index.js:138:32)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:648:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:850:29)
    at div
    at main
    at DocRootLayoutMain (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocRoot/Layout/Main/index.js:16:32)
    at div
    at div
    at DocRootLayout (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocRoot/Layout/index.js:18:28)
    at DocsSidebarProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/docsSidebar.js:19:34)
    at HtmlClassNameProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/metadataUtils.js:29:46)
    at DocRoot (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocRoot/index.js:20:143)
    at RouteContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/routeContext.js:16:60)
    at LoadableComponent (webpack-internal:///./node_modules/react-loadable/lib/index.js:138:32)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:648:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:850:29)
    at DocsVersionProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/docsVersion.js:17:34)
    at HtmlClassNameProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/metadataUtils.js:29:46)
    at DocVersionRootContent (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocVersionRoot/index.js:18:820)
    at DocVersionRoot
    at RouteContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/routeContext.js:16:60)
    at LoadableComponent (webpack-internal:///./node_modules/react-loadable/lib/index.js:138:32)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:648:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:850:29)
    at ErrorBoundary (webpack-internal:///./node_modules/@docusaurus/core/lib/client/exports/ErrorBoundary.js:16:269)
    at div
    at NavbarSecondaryMenuDisplayProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/navbarSecondaryMenu/display.js:21:318)
    at NavbarMobileSidebarProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/navbarMobileSidebar.js:23:414)
    at NavbarSecondaryMenuContentProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/navbarSecondaryMenu/content.js:16:157)
    at NavbarProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/navbarUtils.js:22:29)
    at HtmlClassNameProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/metadataUtils.js:29:46)
    at PluginHtmlClassNameProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/metadataUtils.js:32:42)
    at DocsPreferredVersionContextProviderUnsafe (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/docsPreferredVersion.js:33:382)
    at DocsPreferredVersionContextProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/docsPreferredVersion.js:36:50)
    at ScrollControllerProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/scrollUtils.js:21:489)
    at AnnouncementBarProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/announcementBar.js:25:450)
    at ColorModeProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/colorMode.js:27:1246)
    at eval (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/reactUtils.js:59:9)
    at LayoutProvider (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/Layout/Provider/index.js:20:646)
    at Layout (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/Layout/index.js:26:33)
    at HtmlClassNameProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/metadataUtils.js:29:46)
    at DocsRoot (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocsRoot/index.js:18:544)
    at RouteContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/routeContext.js:16:60)
    at LoadableComponent (webpack-internal:///./node_modules/react-loadable/lib/index.js:138:32)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:648:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:850:29)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:648:29)
    at ClientLifecyclesDispatcher (webpack-internal:///./node_modules/@docusaurus/core/lib/client/ClientLifecyclesDispatcher.js:15:261)
    at PendingNavigation (webpack-internal:///./node_modules/@docusaurus/core/lib/client/PendingNavigation.js:17:150)
    at Root (webpack-internal:///./node_modules/@docusaurus/core/lib/client/theme-fallback/Root/index.js:20:16)
    at BrowserContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/browserContext.js:21:127)
    at DocusaurusContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/docusaurusContext.js:21:496)
    at ErrorBoundary (webpack-internal:///./node_modules/@docusaurus/core/lib/client/exports/ErrorBoundary.js:16:269)
    at App (webpack-internal:///./node_modules/@docusaurus/core/lib/client/App.js:29:241)
    at Router (webpack-internal:///./node_modules/react-router/esm/react-router.js:267:30)
    at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/esm/react-router-dom.js:58:35)
    at r (webpack-internal:///./node_modules/react-helmet-async/lib/index.module.js:17:7350)

Warning: Invalid DOM property `rowspan`. Did you mean `rowSpan`?
    at td
    at tr
    at tbody
    at table
    at MDXContent (webpack-internal:///./research/literature/ai.mdx:2287:71)
    at MDXProvider (webpack-internal:///./node_modules/@mdx-js/react/lib/index.js:76:18)
    at MDXContent (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/MDXContent/index.js:15:25)
    at div
    at DocItemContent (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocItem/Content/index.js:27:306)
    at article
    at div
    at div
    at div
    at DocItemLayout (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocItem/Layout/index.js:28:750)
    at HtmlClassNameProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/metadataUtils.js:29:46)
    at DocProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/doc.js:24:26)
    at DocItem (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocItem/index.js:17:72)
    at RouteContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/routeContext.js:16:60)
    at LoadableComponent (webpack-internal:///./node_modules/react-loadable/lib/index.js:138:32)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:648:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:850:29)
    at div
    at main
    at DocRootLayoutMain (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocRoot/Layout/Main/index.js:16:32)
    at div
    at div
    at DocRootLayout (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocRoot/Layout/index.js:18:28)
    at DocsSidebarProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/docsSidebar.js:19:34)
    at HtmlClassNameProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/metadataUtils.js:29:46)
    at DocRoot (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocRoot/index.js:20:143)
    at RouteContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/routeContext.js:16:60)
    at LoadableComponent (webpack-internal:///./node_modules/react-loadable/lib/index.js:138:32)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:648:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:850:29)
    at DocsVersionProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/docsVersion.js:17:34)
    at HtmlClassNameProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/metadataUtils.js:29:46)
    at DocVersionRootContent (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocVersionRoot/index.js:18:820)
    at DocVersionRoot
    at RouteContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/routeContext.js:16:60)
    at LoadableComponent (webpack-internal:///./node_modules/react-loadable/lib/index.js:138:32)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:648:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:850:29)
    at ErrorBoundary (webpack-internal:///./node_modules/@docusaurus/core/lib/client/exports/ErrorBoundary.js:16:269)
    at div
    at NavbarSecondaryMenuDisplayProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/navbarSecondaryMenu/display.js:21:318)
    at NavbarMobileSidebarProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/navbarMobileSidebar.js:23:414)
    at NavbarSecondaryMenuContentProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/navbarSecondaryMenu/content.js:16:157)
    at NavbarProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/navbarUtils.js:22:29)
    at HtmlClassNameProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/metadataUtils.js:29:46)
    at PluginHtmlClassNameProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/metadataUtils.js:32:42)
    at DocsPreferredVersionContextProviderUnsafe (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/docsPreferredVersion.js:33:382)
    at DocsPreferredVersionContextProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/docsPreferredVersion.js:36:50)
    at ScrollControllerProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/scrollUtils.js:21:489)
    at AnnouncementBarProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/announcementBar.js:25:450)
    at ColorModeProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/colorMode.js:27:1246)
    at eval (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/reactUtils.js:59:9)
    at LayoutProvider (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/Layout/Provider/index.js:20:646)
    at Layout (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/Layout/index.js:26:33)
    at HtmlClassNameProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/metadataUtils.js:29:46)
    at DocsRoot (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocsRoot/index.js:18:544)
    at RouteContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/routeContext.js:16:60)
    at LoadableComponent (webpack-internal:///./node_modules/react-loadable/lib/index.js:138:32)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:648:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:850:29)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:648:29)
    at ClientLifecyclesDispatcher (webpack-internal:///./node_modules/@docusaurus/core/lib/client/ClientLifecyclesDispatcher.js:15:261)
    at PendingNavigation (webpack-internal:///./node_modules/@docusaurus/core/lib/client/PendingNavigation.js:17:150)
    at Root (webpack-internal:///./node_modules/@docusaurus/core/lib/client/theme-fallback/Root/index.js:20:16)
    at BrowserContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/browserContext.js:21:127)
    at DocusaurusContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/docusaurusContext.js:21:496)
    at ErrorBoundary (webpack-internal:///./node_modules/@docusaurus/core/lib/client/exports/ErrorBoundary.js:16:269)
    at App (webpack-internal:///./node_modules/@docusaurus/core/lib/client/App.js:29:241)
    at Router (webpack-internal:///./node_modules/react-router/esm/react-router.js:267:30)
    at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/esm/react-router-dom.js:58:35)
    at r (webpack-internal:///./node_modules/react-helmet-async/lib/index.module.js:17:7350)
cscheid commented 7 months ago

Warning: Invalid DOM property rowspan. Did you mean rowSpan?

This is pretty sus.

and also on localhost only on pages that have markdown tables (however some tables work)

Can you share those tables? I've tried a few things and still can't repro.

cscheid commented 7 months ago

Expanding more, I don't know how you're getting rowspan into markdown tables; Our docusaurus writer is relatively limited when it comes to markdown tables. Given a grid table, for example, we emit back a plain markdown table with no rowspans or colspans:

---
title: table test
---

+---------------------+----------+
| Property            | Earth    |
+=============+=======+==========+
|             | min   | -89.2 °C |
| Temperature +-------+----------+
| 1961-1990   | mean  | 14 °C    |
|             +-------+----------+
|             | min   | 56.7 °C  |
+-------------+-------+----------+
$ quarto render tables.qmd --to docusaurus
$ cat tables.mdx
---
title: table test
---

| Property              |      | Earth    |
|-----------------------|------|----------|
| Temperature 1961-1990 | min  | -89.2 °C |
|                       | mean | 14 °C    |
|                       | min  | 56.7 °C  |
krishaamer commented 7 months ago

Hi @cscheid I managed to get a broken minimal repro, posted here: https://github.com/krishaamer/quarto-broken-citations-reproducible/tree/broken-markdown-tables

When I remove the MD title markers # from the table it starts to work.

Screenshot 2024-04-10 at 17 34 49 Screenshot 2024-04-10 at 17 42 46
mcanouil commented 7 months ago

Maybe a naive question, but why is there markdown headers in the table?

Also could you not share code as screenshot? It makes the code shared unusable. Thank you.

EDIT: plain text is quite enough

---
title: Broken Tables
editor:
    render-on-save: false 
---

# Broken Markdown Tables

+-------+-------+---------------------------------------------+-------+
| # ad  | # ad  | # asd                                       |       |
+-------+-------+---------------------------------------------+-------+
|       |       |                                             |       |
+-------+-------+---------------------------------------------+-------+
| ad    | 2015  |                                             |       |
+-------+-------+---------------------------------------------+-------+
| aad   | 2021  | ad                                          |       |
+-------+-------+---------------------------------------------+-------+
| asd   | ad    | asd                                         |       |
+-------+-------+---------------------------------------------+-------+
| ad    | ad    | asd                                         |       |
+-------+-------+---------------------------------------------+-------+
| add   | ad    |                                             |       |
+-------+-------+---------------------------------------------+-------+
krishaamer commented 7 months ago

Maybe a naive question, but why is there markdown headers in the table?

I was using the the VSCode "Edit in Visual Mode" to create the MD tables. I got one file working by removing the # titles however another one is still broken without any titles inside the tables so probably some other markers are also problematic.

Also could you not share code as screenshot? It makes the code shared unusable. Thank you.

Sure, here's the screenshotted code from the repro: https://github.com/krishaamer/quarto-broken-citations-reproducible/blob/broken-markdown-tables/research/broken.qmd

cscheid commented 7 months ago

Thank you, I can repro locally now.

This is a bit of a wild one - the presence of the headings inside cells causes Pandoc to emit HTML tables in the commonmark writer.

$ cat 9179.md
+-------+-------+---------------------------------------------+-------+
| # ad  | # ad  | # asd                                       |       |
+-------+-------+---------------------------------------------+-------+
|       |       |                                             |       |
+-------+-------+---------------------------------------------+-------+
| ad    | 2015  |                                             |       |
+-------+-------+---------------------------------------------+-------+
| aad   | 2021  | ad                                          |       |
+-------+-------+---------------------------------------------+-------+
| asd   | ad    | asd                                         |       |
+-------+-------+---------------------------------------------+-------+
| ad    | ad    | asd                                         |       |
+-------+-------+---------------------------------------------+-------+
| add   | ad    |                                             |       |
+-------+-------+---------------------------------------------+-------+
$ cat 9179.md | pandoc -f markdown -t commonmark
<table style="width:97%;">
<colgroup>
<col style="width: 11%" />
<col style="width: 11%" />
<col style="width: 63%" />
<col style="width: 11%" />
</colgroup>
<tbody>
<tr class="odd">
<td><h1 id="ad">ad</h1></td>
<td><h1 id="ad-1">ad</h1></td>
<td><h1 id="asd">asd</h1></td>
<td></td>
</tr>
<tr class="even">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td>ad</td>
<td>2015</td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td>aad</td>
<td>2021</td>
<td>ad</td>
<td></td>
</tr>
<tr class="odd">
<td>asd</td>
<td>ad</td>
<td>asd</td>
<td></td>
</tr>
<tr class="even">
<td>ad</td>
<td>ad</td>
<td>asd</td>
<td></td>
</tr>
<tr class="odd">
<td>add</td>
<td>ad</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Quarto is simply emitting this as an .mdx output, and MDX appears to be interpreting this as a react component (or something?), and so wants the structured form of the style property. What we need to do is wrap this HTML in an unsafe block.

The problem, however, is that I don't know how to detect when Pandoc will choose to emit HTML rather than Markdown as its output.

mcanouil commented 7 months ago

Isn't it something that Pandoc's developers could help with?

cscheid commented 7 months ago

I found it.

This is the relevant portion of Pandoc's Markdown writer:

https://github.com/jgm/pandoc/blob/bf674e8ddd1ddb78d6300f362a3cd98ac9382b8a/src/Text/Pandoc/Writers/Markdown.hs#L596-L660

The buggy output happens when we hit the codepath in lines 657--659.

For that to be the case, isSimple must be false, hasBlocks must be true, and hasSimpleCells must be false (we don't enable the options that are checked in the other tests).

cscheid commented 7 months ago

Furthermore:

...
  let hasSimpleCells = onlySimpleTableCells $ headers : rows
  let isSimple = hasSimpleCells && all (==0) widths
...
  let isPlainBlock (Plain _) = True
      isPlainBlock _         = False
  let hasBlocks = not (all isPlainBlock $ concat . concat $ headers:rows)
...

onlySimpleTableCells comes from

https://github.com/jgm/pandoc/blob/main/src/Text/Pandoc/Shared.hs#L628-L637

onlySimpleTableCells :: [[[Block]]] -> Bool
onlySimpleTableCells = all isSimpleCell . concat
  where
    isSimpleCell [Plain ils] = not (hasLineBreak ils)
    isSimpleCell [Para ils ] = not (hasLineBreak ils)
    isSimpleCell []          = True
    isSimpleCell _           = False
    hasLineBreak = getAny . query isLineBreak
    isLineBreak LineBreak = Any True
    isLineBreak _         = Any False

None of this is exposed to Lua, sadly. There's at least two ways we could solve this:

  1. Reimplement this logic in Lua
  2. Perform a test write of the table output to commonmark, and if it comes back looking like HTML, then we add a wrapper block

I actually like option 2 better, because it's more robust against future changes in Pandoc (both in requiring changes to the required Lua reimplementation, and more likely to require such changes to begin with)