importing markdown and referencing import.meta.env can crash the renderer if done in a certain order

[kaytwo]

Astro Info

Astro                    v5.1.2
Node                     v18.20.3
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

Describe the Bug

accessing an import.meta.env variable before a markdown loaded import causes inscrutable bugs. See stackblitz below for an example.

TLDR: This order does not error:

import { Content } from "../test.md"
const mode = import.meta.env.MODE;

This order errors out:

const mode = import.meta.env.MODE;
import { Content } from "../test.md"

In addition to [ERROR] Unterminated string literal I've also seen [ERROR] Expected "*/" to terminate multi-line comment.

If I had to guess I think that some of the Vite preprocessing for environment variables is leaking somehow, but the stack trace is all esbuild stuff that I'm not familiar with:

ERROR: Unterminated string literal
    at failureErrorWithLog (/home/projects/aonirmbnzk.github/node_modules/vite/node_modules/esbuild/lib/main.js:1466:15)
    at eval (/home/projects/aonirmbnzk.github/node_modules/vite/node_modules/esbuild/lib/main.js:745:50)
    at responseCallbacks.<computed> (/home/projects/aonirmbnzk.github/node_modules/vite/node_modules/esbuild/lib/main.js:612:9)
    at handleIncomingPacket (/home/projects/aonirmbnzk.github/node_modules/vite/node_modules/esbuild/lib/main.js:667:12)
    at Socket.readFromStdout (/home/projects/aonirmbnzk.github/node_modules/vite/node_modules/esbuild/lib/main.js:590:7)
    at Socket.emit (node:events:30:10899)
    at addChunk (node:internal/streams/readable:225:3685)
    at readableAddChunk (node:internal/streams/readable:225:3393)
    at Readable.push (node:internal/streams/readable:225:4971)
    at _0x50b08f.onStreamRead (node:internal/stream_base_commons:211:2596)

What's the expected result?

You should be able to access env vars and imports in any legal order without crashing the renderer.

I would submit a PR if I knew where to start on this one... the workaround of reordering imports seems fine for now, but because I don't know the root cause I don't know whether that will always work.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ozuitpwy?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[ascorbic]

This seems to be an Astro compiler bug, where it's trying to hoist the imports, and it's incorrectly identifying the import.meta.env as an import. The workaround will work and in any case an ESM compiler will always hoist imports to the top of the module, so changing the order should have no effect. I'm going to transfer this to the compiler repo and add a bit more info.

[ascorbic]

Repro: https://live-astro-compiler.vercel.app/?editor-state=WzMxLDEzOSw4LDAsMTEzLDIwNSwxMjMsMTAzLDIsMywxMDEsMTQ1LDc5LDc5LDIsNDksMTYsMTk3LDE5MSwyMDIsMTY2LDEwMywxNjgsOSwxMzcsMjMsMTQwLDcsMiwxMDQsNzYsNTIsMjYsMjIsMjU1LDI4LDI0Niw1MCwxODAsMTc5LDE2Niw3MywyMTksMTA1LDE2Niw5Myw0OCwxOCwxOTAsMTg3LDE3OSwxNiw2NCwyMjksMjE2LDIxNSw1NSwyMzksMjE1LDEyMSwyMjEsNDIsMjExLDQ5LDk5LDQ0LDgzLDEwLDIwMSwxMjEsMjI4LDU1LDIyOCwyMzYsNDAsMTcwLDE3NywyNiwyMzMsMTA3LDYxLDgyLDMsMTAxLDIwMCwxNjIsMjgsMTM1LDE5NSw5NywxOSwxMywxOTcsOTIsMTcwLDMyLDc0LDExNyw5MSwxODUsMTQ0LDEzNiwxMzksMTQsODgsNjQsOTksOTIsMjM1LDE2NywyMzEsMjE3LDI1MiwxNjYsMTM3LDcsMTg1LDIxOCw4Niw4MywxMzgsNjksMTQ2LDE3MSw5MywyMTMsNTAsMTMzLDE3MCw4MSw5MCw5NSwyMSwyMDQsNTAsOTcsMjcsMjEzLDE5NiwzOCwyMzgsMzUsMTMzLDE3NiwzMywxODIsMjM5LDEyLDQxLDE2MSw4NSwyMjcsMTk0LDI5LDE0LDg0LDE0MywxNiwxMDQsOTcsMTM2LDE4NSwzNywxNCwyMjYsNzQsMTkyLDI1LDk1LDQwLDE4NywxNzgsMTI3LDk1LDExLDYyLDEzOSwyNDEsMjI4LDEyMCwxNiwyNCw3MSwyNDAsMTc1LDEzOSw3MSwyNSwyMCwxMjcsNDMsMjM1LDY4LDgsMTI1LDIwNCwyMCwyMTYsMTA2LDIwMCwxMzMsNzMsMjQ0LDQwLDEwMiwyNDAsMjM4LDI3LDIzNywyMjEsMjE3LDMzLDI1MCw0MSwxNjksMTY2LDE0MiwxMyw2LDcyLDE1MSwxNDQsNzMsMTU5LDExMywyMzksMTA1LDUsMTI2LDE5NCwxNTksMjQ5LDIyMyw5NiwyMjMsMzMsMTUyLDExNCw1NywxODIsMTkyLDIyMCwyNDksODIsMjcsMTQ2LDEzLDEwNyw3OSwxMDMsMTk5LDIxOCwyMjUsMTAyLDM4LDI1MywyMDEsNjcsMjM2LDE5MywzNiwxNTMsMTM1LDYsNTAsMTIyLDUyLDUsMjM3LDI0MiwyNCwxNzgsMTMyLDE0OSwyNDAsMjQ2LDE5MSwyNDEsMjM1LDE4MiwyNTQsMjQ4LDE2MywxNTksMTQ0LDI0MywxNzUsMTMyLDIzNiwxMzAsMjQ0LDE1LDEyNiwxMjksMjA5LDM0LDIxNSwxMzQsOTMsNTgsMTYyLDExOSw2MywyMDgsOTEsMjE0LDI1LDI0OSwxLDAsMF0%3D

[ascorbic]

This is the transformed output:

import {
  Fragment,
  render as $$render,
  createAstro as $$createAstro,
  createComponent as $$createComponent,
  renderComponent as $$renderComponent,
  renderHead as $$renderHead,
  maybeRenderHead as $$maybeRenderHead,
  unescapeHTML as $$unescapeHTML,
  renderSlot as $$renderSlot,
  mergeSlots as $$mergeSlots,
  addAttribute as $$addAttribute,
  spreadAttributes as $$spreadAttributes,
  defineStyleVars as $$defineStyleVars,
  defineScriptVars as $$defineScriptVars,
  renderTransition as $$renderTransition,
  createTransitionScope as $$createTransitionScope,
  
} from "astro/runtime/server/index.js";
import { Content } from "../test.md"



const $$Astro = $$createAstro();
const Astro = $$Astro;
const $$Card = $$createComponent(async ($$result, $$props, $$slots) => {
const Astro = $$result.createAstro($$Astro, $$props, $$slots);
Astro.self = $$Card;

const mode = import.meta.env.MOD
"



return $$render``;
}, 'Card.astro', undefined);
export default $$Card;