-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
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
🐛 BUG: astro-embed integration fails due to .astro file extension error #4071
Comments
Thanks, the logic for how we determine to mark an ecosystem package to be automatically marked as astro/packages/astro/src/core/create-vite.ts Line 168 in 13b4f8a
If anyone wants to take a look at why this one is not being marked, that's the place to go. |
It seems like the I was able to fix this by adding the |
Quick fix: add these packages to our internal |
Hi, I couldn't get the integration to work with Here's my import { defineConfig } from 'astro/config'
import mdx from '@astrojs/mdx'
import sitemap from '@astrojs/sitemap'
// Use: npm run dev/build --experimental-integrations
import embeds from 'astro-embed/integration'
// https://astro.build/config
export default defineConfig({
site: 'https://example.com',
integrations: [embeds(), mdx(), sitemap()],
vite: {
ssr: {
noExternal: [/@astro-/]
}
}
}) |
Spent some time investigating what we can do here today. Looking for a quick fix?Add import { defineConfig } from 'astro/config';
export default defineConfig({
vite: {
ssr: {
noExternal: [/@astro-community/]
}
}
}) More long-term solutionsBackgroundThird-party packages that provide These heuristics fail for
The current heuristics only check direct dependencies and add them to Possible solutions1 — Userland: Never depend on another Astro package from your third-party packageI could refactor However, this is still brittle. Let’s say someone builds a theme utility package that provides layouts you can import and they decide to use 2 — Astro: Add some RegExps to Astro’s
|
@delucis Thank you for the reply and for the detailed explanation! I think however I'm running into a separate issue, specially with the integration part of the So while using your "quickfix" above I get no error, I also get no functionality, still (read on to see how I got things working with a different method!): Here's my configuration with the quickfix: import { defineConfig } from 'astro/config'
import mdx from '@astrojs/mdx'
import sitemap from '@astrojs/sitemap'
import remarkBreaks from 'remark-breaks'
// Use: npm run dev/build --experimental-integrations
import embeds from 'astro-embed/integration'
// tables
import remarkGfm from 'remark-gfm'
export default defineConfig({
site: 'https://blog.okturtles.org',
markdown: {
remarkPlugins: [remarkGfm, remarkBreaks],
},
integrations: [embeds(), mdx(), sitemap()],
vite: {
ssr: {
noExternal: [/@astro-community/]
}
}
}) With this method, no embeds are shown at all. In other words, when a markdown file contains a line that looks like this: Lorem ipsum text.
https://www.youtube.com/watch?v=XXXXX
Foo bar baz. The link is stripped from the generated content, and no embed is visible. The same occurs with Twitter links. However, using a specific remark plugin, I was able to get better results, with actual embeds being generated: import { defineConfig } from 'astro/config'
import mdx from '@astrojs/mdx'
import sitemap from '@astrojs/sitemap'
import remarkBreaks from 'remark-breaks'
// embed via remark
import remarkEmbedder from '@remark-embedder/core'
import oembedTransformer from '@remark-embedder/transformer-oembed'
const remarkEmbedPlugin = [remarkEmbedder.default, {
transformers: [oembedTransformer.default],
// https://github.com/remark-embedder/transformer-oembed/issues/25#issuecomment-888613740
// https://github.com/remark-embedder/core#handleerror-errorinfo-errorinfo--gottenhtml--promisegottenhtml
handleError ({error, url, transformer}) {
if (transformer.name !== '@remark-embedder/transformer-oembed' || !url.includes('twitter.com')) {
// we're only handling errors from this specific transformer and the twitter URL
// so we'll rethrow errors from any other transformer/url
throw error
}
return `<p style="color:red">ERROR: Unable to embed <a href="${url}">this tweet</a> (possibly deleted).</p>`
}
}]
// tables
import remarkGfm from 'remark-gfm'
export default defineConfig({
site: 'https://blog.okturtles.org',
markdown: {
remarkPlugins: [remarkEmbedPlugin, remarkGfm, remarkBreaks],
},
integrations: [sitemap(), mdx()],
}) So this other method works the way the integrations section for |
Hi @taoeffect — that's a sightly different issue concerning MDX support. Haven't done any work on Would you mind opening an issue for MDX support in the astro-embed repo? |
@delucis Perhaps I'm misunderstanding, but we're not using These are regular The README for the I saw this cool Tweet the other day:
https://twitter.com/astrodotbuild/status/1511750228428435457 This is exactly what we have too, but it doesn't work when using |
That integration was built for a previous version of Astro that supported components in |
What version of
astro
are you using?1.0.0-rc.1
Are you using an SSR adapter? If so, which one?
None
What package manager are you using?
npm
What operating system are you using?
Mac (macOS Monterey 12.4)
Describe the Bug
Site start in dev mode fails with astro-embed integration enabled in astro.config.mjs with warning about unknown .astro file extension type.
Link to Minimal Reproducible Example
https://github.com/scottaw66/astrobug
Participation
The text was updated successfully, but these errors were encountered: