#export Astro Component from .ts file throwing error

6 messages · Page 1 of 1 (latest)

mighty bramble
#

I am trying to export astro Component as a field of an object in a .ts file is throwing the following error

Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

even if i rename the file to .jsx or .tsx the same is happening,

here is the example code

// file: accordion-item.markdoc.ts
import Accordion from "../../components/Accordion.astro";
import type { AstroMdocConfig } from "astro-mdoc/src/config";

export const Accordion = {
    "AccordionItem": {
        render: Accordion as any,
        children: ['paragraph', 'tag', 'list'],
        attributes: {
            heading: {
                type: String,
            },
            content: {
                type: String,
            }
        }
    }
} satisfies AstroMdocConfig['tags'] as AstroMdocConfig;
// file: index.ts
import { Accordion } from "./accordion-item.markdoc";

export {
    Accordion
}
#
[vite] Error when evaluating SSR module /src/markdoc/nodes/accordion-item.markdoc.tsx:
|- Error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
    at TransformPluginContext._formatError (file:///home/user/vscode/mdoc-wygin/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.10/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49748:41)
    at TransformPluginContext.error (file:///home/user/vscode/mdoc-wygin/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.10/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49743:16)
    at TransformPluginContext.transform (file:///home/user/vscode/mdoc-wygin/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.10/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:64285:14)
    at async PluginContainer.transform (file:///home/user/vscode/mdoc-wygin/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.10/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49589:18)
    at async loadAndTransform (file:///home/user/vscode/mdoc-wygin/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.10/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:52411:27)

5:46:01 PM [vite] Error when evaluating SSR module /home/user/vscode/mdoc-wygin/packages/wygin/src/markdoc/nodes/index.ts:
|- Error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
royal fern
#

What does astro-mdoc do?

#

I find it unlikely that it'd work by passing imports like that

mighty bramble