Position of import.meta.glob causes error

[steveoh]

Astro Info

Astro                    v4.2.1
Node                     v20.9.0
System                   macOS (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/tailwind
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

with the following frontmatter astro throws an error that i is not defined.

---
import type { ImageMetadata } from 'astro';

import Layout from '../layouts/FullWidth.astro';
import Section from '../components/page/Section.astro';
import StaffMember from '../components/page/StaffMember.astro';

import { Image } from 'astro:assets';

const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/pillar-contact/*.svg');

import { staff } from '../data/staff';
---

astro compiles to

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,
  createMetadata as $$createMetadata
} from "astro/runtime/server/index.js";
import type { ImageMetadata } from 'astro';
import Layout from '../layouts/FullWidth.astro';
import Section from '../components/page/Section.astro';
import StaffMember from '../components/page/StaffMember.astro';
import { Image } from 'astro:assets';
import { staff } from '../data/staff';


import * as $$module1 from '../layouts/FullWidth.astro';
import * as $$module2 from '../components/page/Section.astro';
import * as $$module3 from '../components/page/StaffMember.astro';
import * as $$module4 from 'astro:assets';
import * as $$module5 from '../data/staff';

export const $$metadata = $$createMetadata("Card.astro", { modules: [{ module: $$module1, specifier: '../layouts/FullWidth.astro', assert: {} }, { module: $$module2, specifier: '../components/page/Section.astro', assert: {} }, { module: $$module3, specifier: '../components/page/StaffMember.astro', assert: {} }, { module: $$module4, specifier: 'astro:assets', assert: {} }, { module: $$module5, specifier: '../data/staff', assert: {} }], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: new Set([]), hoisted: [] });

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


const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/pillar-contact/*.svg');

i

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

If i move the import above, the error goes away.

What's the expected result?

it should work no matter the order

Link to Minimal Reproducible Example

https://live-astro-compiler.vercel.app/?editor-state=WzMxLDEzOSw4LDAsMTA1LDE4OCwxNjksMTAxLDIsMywxMjUsODIsNzcsNzksMjIwLDQ4LDE2LDI1Myw0Myw4Niw0NiwyMTksODYsMTA4LDIyMCwxNzAsMTgzLDI0NCw2Nyw2Niw4NCw4NCw3MiwzMiw4NSwxMzIsMTUwLDMwLDE4NCwyMDQsMjE4LDE0NywxNzMsMzcsMTI3LDE2NCw1MSwxNCw0Myw4OCwyNDEsMjIzLDI1LDExMSwxNTAsNCw4OCw5LDIyOSwxOCwxNDMsMjIzLDEyMywxMjYsMjQzLDEwMiwxODIsMTQ5LDI1LDEzNiw0OCwyMzAsMTQ3LDIwLDEyMiwyMzEsMTQ1LDI1NCwzMiwxNzcsNzUsMTc3LDEwNiwxNzAsNzksMjQ1LDIzMSwyNTAsOTksMTE3LDg0LDE1MywxMDAsODEsMTQyLDIwMywyMjksMjQyLDM4LDE4NiwyMDgsMzksMjAyLDQyLDIyMywyNDUsMTY4LDE4MiwyMzQsNDQsMTkyLDI2LDQ3LDQ4LDEzMSwxMzMsMTIsMjM0LDY1LDExNywxNDgsMTMwLDkwLDAsMTAzLDc0LDEzOSw0Nyw1NSwxMTMsMTMwLDE1OSwxOTUsOTMsMjYsMjQyLDI1NCwxODYsMTc0LDE4MSwyMjMsMTU3LDg5LDE1OSwxNCwyMjIsOTUsNTksMTU1LDI1NSwyMTMsMTksMTAzLDIwNywxMDQsMjA5LDEwMCwxMTMsNDksODMsMTQwLDIxNiw3NSw4MSwxMjQsMTc4LDIzOCwyMjksODEsMTg5LDcsMjgsMTgsNTEsMTE2LDIyMSw1LDEzNCwyMSwyMTAsMjcsMjI4LDI1LDUyLDExLDc2LDE4LDI1MSwxOTAsOTQsMjQ2LDIxMSwwLDUxLDEwMiwzMCwxMjksMzgsNjksMjA2LDIwMiwyMSwyMCwxNzEsMTExLDI0Miw4MywxMjAsMTE3LDE0NCwzMiwyMzQsMTgxLDc5LDE3MSwxNzUsOTEsMTAxLDE3NywxMzEsMTkzLDIzMSwyMzAsMTE3LDY4LDIyMywyMjMsNDUsNTIsMTQ3LDIwOSwzNSw4Nyw3NSwyMjYsMzAsMTA0LDQxLDEyMiwyNSw3NiwyMTQsMzEsMTA2LDE5MCw5Myw0NywyMjIsMjA3LDIyMSwxMDgsMjEsMjMsMTcxLDE0NywyMSwyMzMsMTY1LDIzMiwyMzIsOTMsMTE3LDI0NCwxNzgsMjcsNzUsMjQ5LDU0LDEwNCw5MywyMTgsMjUyLDcxLDQzLDM1LDIxOSwzNiwxNzgsMjE1LDQsMTI1LDQ3LDE2NywzOCwyMTEsMTI4LDcxLDg1LDI0LDE2NywxNTIsOSwzNCwxMTksMTM3LDEzMCwxNjAsMTIyLDMyLDE5OCw5NSwxMzcsOTMsNzMsMTc4LDEwNiw1OCwyNDAsNDQsMTkyLDksMTEzLDIyLDUxLDgyLDQsMjU1LDI1MSwyNDIsOTIsMTM2LDEzMCwyMzksMTAwLDYzLDM0LDEzMiwzNCwxMTUsMiwxMDAsMTk5LDIzMiwxNjQsMzAsNSwxMiwyMjIsMjIxLDE2Myw2MSwxNTcsMTcsODIsMTU5LDE0OCwyMTgsNTIsMTQ0LDE5MywwLDI1MywyMjUsMzUsMTk5LDY5LDIyNywxNjcsMTMyLDYsMjU0LDE1MiwyMTQsMjUyLDEzOCw4OCwxNTAsODIsMTMwLDU3LDE2NCw5MywzNCw3NSwxODgsMTczLDczLDIxMCw5NywyMzUsMjExLDE0MCwxODQsMTE3LDE4NCwyNDksMzMsMTEzLDEzOSwxNyw1OSwxMzAsNjgsMTE1LDc2LDEyOCwyMDksMjAzLDIxMCwxNjAsMTg5LDEyMiwxOCwxODUsMTMwLDE0OSwxODgsMTgzLDkxLDIzOSwxMDMsMTgzLDIzNywyMjMsMTAzLDI0NSwxMzUsNzEsMjksMjE4LDExNiwxOTksMzIsMywwLDBd

Participation

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

[ematipico]

It was really difficult to understand the error, because you didn't explain where is the error. And "If i move the import above" isn't very clear: above of what?

So, is it correct that the error is that i that appears after the import.meta.glob?

const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/pillar-contact/*.svg');

i // this one

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

[steveoh]

It was really difficult to understand the error, because you didn't explain where is the error. And "If i move the import above" isn't very clear: above of what?

I'm sorry. Yes the random i is the error and invalid syntax.

updating the frontmatter from

---
import type { ImageMetadata } from 'astro';

import Layout from '../layouts/FullWidth.astro';
import Section from '../components/page/Section.astro';
import StaffMember from '../components/page/StaffMember.astro';

import { Image } from 'astro:assets';

const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/pillar-contact/*.svg');

import { staff } from '../data/staff';
---

to

---
import type { ImageMetadata } from 'astro';

import Layout from '../layouts/FullWidth.astro';
import Section from '../components/page/Section.astro';
import StaffMember from '../components/page/StaffMember.astro';

import { Image } from 'astro:assets';

import { staff } from '../data/staff';

const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/pillar-contact/*.svg');
---

which is moving the const images = import.meta.glob< to the end of the frontmatter removes the invalid compiler generated syntax.

[natemoo-re]

The temporary solution to this is to keep all the static import statements at the top of the file, and any runtime code (import.meta.glob) below the import statements!