`__dirname is not defined in ES module scope` because of mdx integration

[openscript]

`__dirname is not defined in ES module scope` because of mdx integration

[Fryuni]

For future debugging reference, since sourcemap information is lost for module loading errors, this is one way to debug where the offending reference is being imported from:

function testDirname(): Plugin {
  const broken: string[] = [];

  return {
    name: 'test-dirname',
    config(config) {
      config.define ??= {};
	  // Make the build not break
      config.define['__dirname'] = 'BROKEN_REFERENCE_FIND_ME';
    },
    transform(code, id) {
      if (!code.includes('BROKEN_REFERENCE_FIND_ME') && !code.includes('__dirname')) return;

      console.log('Found broken reference:', id);
      broken.push(id);
    },
    generateBundle() {
      for (const id of broken) {
        console.log('Broken reference on module:', id);
        let importer: string | undefined = id;
        while (true) {
          const moduleInfo = this.getModuleInfo(importer);
          if (!moduleInfo) {
            console.log('   Module has no info!');
            break;
          }
          importer = moduleInfo.importers?.[0];
          if (!importer) {
            break;
          }
          console.log('  Imported by:', importer);
        }
      }
    }
  }
}

In the case of the project references in the issue it shows the following logs:

Broken reference on module: /proj/node_modules/.pnpm/[email protected]/node_modules/source-map/lib/read-wasm.js
  Imported by: /proj/node_modules/.pnpm/[email protected]/node_modules/source-map/lib/read-wasm.js?commonjs-proxy
  Imported by: /proj/node_modules/.pnpm/[email protected]/node_modules/source-map/lib/source-map-consumer.js
  Imported by: /proj/node_modules/.pnpm/[email protected]/node_modules/source-map/lib/source-map-consumer.js?commonjs-proxy
  Imported by: /proj/node_modules/.pnpm/[email protected]/node_modules/source-map/source-map.js
  Imported by: /proj/node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@astrojs/mdx/dist/plugins.js
  Imported by: /proj/node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@astrojs/mdx/dist/vite-plugin-mdx.js
  Imported by: /proj/node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@astrojs/mdx/dist/index.js
  Imported by: /proj/astro.config.ts
  Imported by: /proj/src/pages/[...locale]/[blog]/[...slug].astro

@astrojs/mdx is being imported at runtime due to the pages importing astro.config.ts. The integration is a build-time integration, so failing to bundle it in the runtime of an Astro project is expected to break.

[openscript]

I've enabled sourcemaps in my astro.config.ts:

import { defineConfig } from 'astro/config';
import mdx from "@astrojs/mdx";

// https://astro.build/config
export default defineConfig({
  vite: {
    build: {
      sourcemap: true
    }
  },
  prefetch: true,
  i18n: {
    defaultLocale: "en",
    locales: ["de", "en"]
  },
  integrations: [mdx()]
});

Now the error looks like this:

 generating static routes 
__dirname is not defined in ES module scope
  Stack trace:
    at <anonymous> (/workspaces/astro-theme-international/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/native.js:69:23)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:485:26)
    at async generatePages (file:///workspaces/astro-theme-international/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/core/build/generate.js:119:7)
    at async AstroBuilder.build (file:///workspaces/astro-theme-international/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/core/build/index.js:133:5)
    at async build (file:///workspaces/astro-theme-international/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/core/build/index.js:45:3)
 ELIFECYCLE  Command failed with exit code 1.
 ```