Doesn't work with Astro MDX

[PuruVJ]

Describe the bug

This package doesn't work with Astro+MDX integration.

I defined the proper component path and exports in the config. When I Use the auto imports in .astro files or .svelte files, it works well. But in .mdx file, it completely fails.

In reproduction, if you go to /some-page route, it works there. But on / page which is a .mdx file, it doesn't

Reproduction

https://stackblitz.com/edit/github-vsez61?file=package.json,astro.config.mjs,src%2Fpages%2Findex.mdx,src%2Fpages%2Fsome-page.astro&on=stackblitz

System Info

System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 229.92 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/Library/pnpm/node
    Yarn: 1.22.19 - ~/Library/pnpm/yarn
    npm: 8.15.0 - ~/Library/pnpm/npm
  Browsers:
    Brave Browser: 107.1.45.118
    Chrome: 107.0.5304.110
    Edge: 107.0.1418.42
    Firefox: 104.0.2
    Safari: 16.1

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[azaleta]

hmm... out of scope for now. May be supported in future. A new addon is needed for https://github.com/unjs/unimport

with import

import { Fragment } from "astro/jsx-runtime";
export const frontmatter = {};
export function getHeadings() {
  return [];
}
import Code from "../components/Code.svelte";
import { jsx as _jsx } from "astro/jsx-runtime";
function _createMdxContent(props) {
  return _jsx(Code, {});
}

try to use auto-import

import { Fragment } from "astro/jsx-runtime";
import { jsx as _jsx } from "astro/jsx-runtime";
export const frontmatter = {};
export function getHeadings() {
  return [];
}
function _createMdxContent(props) {
  const {
    Code
  } = props.components || {};
  if (!Code) _missingMdxReference("Code", true);
  return _jsx(Code, {});
}

[PuruVJ]

Can I add this to my own code? If yes, where?

[azaleta]

this is not the addon source. It's the transform original code from you MDX file.

import { Fragment } from "astro/jsx-runtime";
export const frontmatter = {};
export function getHeadings() {
  return [];
}
import Code from "../components/Code.svelte";
import { jsx as _jsx } from "astro/jsx-runtime";
function _createMdxContent(props) {
  return _jsx(Code, {});
}
function MDXContent(props = {}) {
  const {
    wrapper: MDXLayout
  } = props.components || {};
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
export default MDXContent;
__astro_tag_component__(getHeadings, "astro:jsx");
__astro_tag_component__(MDXContent, "astro:jsx");
MDXContent[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);
export const url = "";
export const file = "C:/Users/.../Desktop/ts/src/pages/index.mdx";
export function rawContent() { throw new Error("MDX does not support rawContent()! If you need to read the Markdown contents to calculate values (ex. reading time), we suggest injecting frontmatter via remark plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins") };
export function compiledContent() { throw new Error("MDX does not support compiledContent()! If you need to read the HTML contents to 
calculate values (ex. reading time), we suggest injecting frontmatter via rehype plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins") };
export const Content = MDXContent;
if (import.meta.hot) {
                                                                                        import.meta.hot.decline();
                                                                                }

since it does not contain any keyword like 'import' so the auto-import fails.

you need to write an addon to parsing MDX file to identify imports. Like https://github.com/unjs/unimport/blob/main/src/addons/vue-template.ts

This is for vue template to find all _ctx. as import target.

In your case, it will be more complex. because I find the _createMdxContent is quite different with/without import.

[marfalkov]

you need to write an addon to parsing MDX file to identify imports. Like https://github.com/unjs/unimport/blob/main/src/addons/vue-template.ts

This is for vue template to find all _ctx. as import target.

In your case, it will be more complex. because I find the _createMdxContent is quite different with/without import.

There is a working implementation(although in a different context) that might help: https://github.com/delucis/astro-auto-import