-
-
Notifications
You must be signed in to change notification settings - Fork 153
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add/astro-example #282
add/astro-example #282
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
// https://astro.build/config | ||
export default defineConfig({ | ||
markdown: { | ||
syntaxHighlight: false, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Astro's default syntax highlighting behavior was causing issues when @code-hike/mdx
was used.
}, | ||
integrations: [ | ||
react(), | ||
mdx({ remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]] }), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Setting autoImport
to false
, because Astro is unable to find the proper import for CH
when attempting to hydrate the components otherwise.
I think this may be because @code-hike
uses the following pattern for auto-importing:
import { annotations, Code, Slideshow, CodeSlot } from "@code-hike/mdx/dist/components.cjs.js";
export const CH = {
annotations,
Code,
Slideshow,
CodeSlot
};
Astro looks at the import statements when attempting to hydrate a component, so it isn't able to resolve components that use the CH
namespace here.
@@ -0,0 +1,14 @@ | |||
import "@code-hike/mdx/styles.css" | |||
import { CH } from "@code-hike/mdx/components" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Specifying an explicit import for CH
allows Astro to properly hydrate the component (see comment about disabling autoImport
for additional context)
"react": "^18.0.0", | ||
"react-dom": "^18.0.0" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was seeing Warning: Invalid hook call.
warnings in my terminal when running the example. I'm pretty sure its because there are multiple versions of React present in the monorepo.
The warnings went away when I downgraded react
and react-dom
to v17, but since this is an example, we probably should use the latest version of React.
thanks a lot! I'll take a look later |
thank you, there are some things that don't work but I'll merge this and I'll try to see if they are fixable one by one |
🚀 PR was released in |
Resolves: #255
Adding an Astro example to the project
Steps Taken:
yarn create astro
to initialize the example@code-hike/mdx
,@astrojs/mdx
, and@astrojs/react
to projectastro.config.mjs
filecodehike.mdx
page to the app