Some plugins require async run

See original GitHub issue

Initial checklist

I read the support docs
I read the contributing guide
I agree to follow the code of conduct
I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

8.0.2

Link to runnable example

https://codesandbox.io/s/nice-austin-wrug0t

Steps to reproduce

Install remark-code-frontmatter
Install remark-code-extra
Configure the component to use both plugins
See error

Expected behavior

The render still works.

Actual behavior

When using the remark-code-frontmatter and remark-code-extra plugins, I’m getting the following error:

index.js:566 Uncaught (in promise) Error: `runSync` finished async. Use `run` instead
    at assertDone (index.js:566)
    at Function.runSync (index.js:352)
    at ReactMarkdown (react-markdown.js:107)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)

Digging in, it looks like the remark-code-extra plugin is returning Promises, forcing the async flow.

Runtime

No response

Package manager

No response

OS

No response

Build and bundle tools

No response

Issue Analytics

State:
Created a year ago
Comments:12 (6 by maintainers)

Top GitHub Comments

1reaction

ujjwalchadha8commented, Dec 5, 2022

Here is the link to the RFC for React Server Components: https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md

Read the example: https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#basic-example Notice the difference between the first example (server component which is async) and the second example (client component)

Can you show this component?

The remark plugin I am building basically reads a link node in the markdown (mdast tree), then performs http requests on that URL to fetch some data. Based on that data, it changes the mdast subtree of that link node. So my plugin must run async.

0reactions

wooormcommented, Dec 6, 2022

As I understand it, the RFC on async/await on the server is still open (https://github.com/reactjs/rfcs/pull/229). I believe this is also what adds a use() to the client to await promises. And there are a lot of comments there about naming.

Top Results From Across the Web

Is it possible to run async code in a Babel Plugin Visitor?

This means that plugins have no way of being async, because Babel itself is fully synchronous. Depending on what your requirements are, you ......

Plugins - RequireJS

Some plugins may do an async operation in the browser, but opt to complete the resource load synchronously when run in Node/Nashorn.

Async Vite plugins · Discussion #8509 · vitejs/vite - GitHub

For plugins that require running async code on initialization, e.g. importing a config file, not having async support makes it hard to arrange...

Async JavaScript – WordPress plugin

Async JavaScript gives you full control of which scripts to add an 'async' or 'defer' attribute to or to exclude to help increase...

Creating Apollo Server plugins - Apollo GraphQL Docs

All plugin lifecycle methods are async , except for willResolveField and schemaDidLoadOrUpdate . You can create your own Apollo Server plugins to perform...