Example using Remark plugins in react

[icew4ll]

Example using Remark plugins in react to address issue:

https://github.com/brillout/vite-plugin-mdx/issues/30

[brillout]

Thanks for the PR. So, the only problem with #30 was that @krevativ forgot to include the CSS, correct?

[icew4ll]

The syntax he posted differs slightly from how I was able to get remark-prism to work. An example, would need the following to work:

1) vite.config.js, needed to wrap the plugin in require

  remarkPlugins: [
    require('remark-prism')
  ],

2) index.jsx, import the css

import "prismjs/themes/prism-tomorrow.css"

3) Have installed "prismjs" and "remark-prism" with node/yarn.

OP submitted a follow up question which may be worth including regarding line numbering which I suspect can be done with prism plugins but haven't been able to get that working yet.

[brillout]

How about:

• We add remark-prism to the existing examples/react instead of creating a new example.
• We improve the readme, e.g. the readme mentions // E.g. `remark-frontmatter` which we may want to replace with // E.g. `require("remark-frontmatter")` or something better.

[icew4ll]

Okay, that makes sense. How do we proceed should I update my fork with these changes?

[brillout]

Yes

On Thu, May 27, 2021 at 7:39 PM icew4ll @.***> wrote:

Okay, that makes sense. How do we proceed should I update my fork with these changes?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/brillout/vite-plugin-mdx/pull/31#issuecomment-849816470, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHVQRW5PP25EM3WUKZYFH3TPZ7THANCNFSM45PUOI3Q .

[valikron]

Regarding the line numbers, there is an open issue in rehype-prism too. So this seem to be a common problem that people have with this plugins. I've asked too, just in case one of you knows more. But it's not critical. At least for what I need it.

Thanks again for your example @icew4ll That helped me a lot.

[icew4ll]

Requested changes have been made

[brillout]

@icew4ll Have you seen the last review comment?

[msakrejda]

When trying to run the React example, I get

$ yarn start
yarn run v1.22.5
warning package.json: No license field
$ yarn build:vite-plugin-mdx && yarn install && yarn dev
warning package.json: No license field
$ cd ../../ && yarn build
$ yarn install && yarn tsc:once
[1/4] Resolving packages...
success Already up-to-date.
$ tsc --build
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
success Already up-to-date.
warning package.json: No license field
$ vite
failed to load config from /tmp/vite-plugin-mdx/examples/react/vite.config.js
error when starting dev server:
Error: Cannot find module '/tmp/vite-plugin-mdx/examples/react/node_modules/vite-plugin-mdx/dist/index.js'. Please verify that the package.json has a valid "main" entry
    at tryPackage (internal/modules/cjs/loader.js:303:19)
    at Function.Module._findPath (internal/modules/cjs/loader.js:516:18)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:867:27)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/tmp/vite-plugin-mdx/examples/react/vite.config.js:30:41)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.require.extensions.<computed> [as .js] (/tmp/vite-plugin-mdx/examples/react/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:70305:20)
    at Module.load (internal/modules/cjs/loader.js:928:32)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Any ideas?

[silvenon]

You probably installed dependencies in the example before building vite-plugin-mdx, in the start script you can see the order in which these steps should been run, so in your case examples/node_modules/vite-plugin-mdx was created before dist. If you run yarn install --force it will include the newly created dist.

I'm thinking if there is some obvious less fragile alternative setup for this, e.g. including some lifecycle scripts, but I can't think of any right now. 🤔

[msakrejda]

@silvenon yep, that was it. Thanks!

[msakrejda]

So I got remark-prism working as in the example, but I can't seem to get remark-frontmatter working. Version 4.0.0 fails with this error, and when I try the older 3.0.0, it just doesn't seem to do anything. I've extended the example to try to add some frontmatter to the .md file and log the resulting React component to inspect, and added remark-frontmatter to the plugin list (tried both orders), but the frontmatter is ignored. I'm pretty sure my config is valid. Does remark-frontmatter have to be configured differently? I pushed my changes to the example to https://github.com/uhoh-itsmaciek/vite-plugin-mdx/pull/1

Edit: it looks like downgrading further to remark-frontmatter 2.0 does parse the frontmatter correctly (i.e., it's not considered part of the markdown anymore), but I can't figure out how to access the frontmatter metadata from the resulting component. Most of the examples of react-frontmatter seem to work with the resulting AST. Is there a way to access this on the React component?

[msakrejda]

I realized that I need something like remark-mdx-frontmatter to actually do anything useful with the frontmatter (remark-frontmatter by itself only changes the ast), but ran into https://github.com/remcohaszing/remark-mdx-frontmatter/issues/3 -- I'm not sure if that's compatible with remark-frontmatter 2.0.

Please let me know if I should open a separate issue, btw, instead of adding notes here--I thought it was relevant because I'm working with the example infrastructure, so adding a plugin in a "clean room" environment. I think if there are issues with that with popular plugins like remark-frontmatter, it would be nice to get them resolved or documented. But I'm happy to open a separate issue instead.

[brillout]

@uhoh-itsmaciek Yea let's move the discussion somewhere else. PR is welcome if changes are needed on vite-plugin-mdx's side (I don't believe so though).

[brillout]

Let's supersede this by https://github.com/brillout/vite-plugin-mdx/pull/35