Top-level await is not available when updating pnpm lock

[wassfila]

What version of astro are you using?

1.6.12

Are you using an SSR adapter? If so, which one?

Node

What package manager are you using?

pnpm

What operating system are you using?

Window

Describe the Bug

in this exact commit (or some of the previous) work fine MicroWebStacks/astro-big-doc@a06ed36 if I delete the pnpm-lock.yaml file and reinstall pnpm install

pnpm run build runs perfectly fine, but I start getting the error and crash in pnpm run dev mode

this is a commit with the newly generated not working lock pnpm-lock.yaml file MicroWebStacks/astro-big-doc@959171c

D:\Dev\MicroWebStacks\astro-big-doc>pnpm run dev

> @example/minimal@0.0.1 dev D:\Dev\MicroWebStacks\astro-big-doc
> astro dev

[MDX] Now inheriting remark and rehype plugins from "markdown" config.
If you applied a plugin to both your Markdown and MDX configs, we suggest removing the duplicate MDX entry.
See "extendPlugins" option to configure this behavior.
   astro  v1.6.12 started in 364ms

  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

X [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 ove

    node_modules/.pnpm/vitefu@0.2.2_vite@3.2.4/node_modules/vitefu/src/index.js:14:31:
      14 │     const { createRequire } = (await import('module')).default
         ╵                                ~~~~~

D:\Dev\MicroWebStacks\astro-big-doc\node_modules\.pnpm\esbuild@0.15.16\node_modules\esbuild\lib\main.js:1574
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
node_modules/.pnpm/vitefu@0.2.2_vite@3.2.4/node_modules/vitefu/src/index.js:14:31: ERROR: Top-level await is not available in the configured tar, "firefox78", "safari13" + 2 overrides)
    at failureErrorWithLog (D:\Dev\MicroWebStacks\astro-big-doc\node_modules\.pnpm\esbuild@0.15.16\node_modules\esbuild\lib\main.js:1574:15)
    at D:\Dev\MicroWebStacks\astro-big-doc\node_modules\.pnpm\esbuild@0.15.16\node_modules\esbuild\lib\main.js:1032:28
    at runOnEndCallbacks (D:\Dev\MicroWebStacks\astro-big-doc\node_modules\.pnpm\esbuild@0.15.16\node_modules\esbuild\lib\main.js:1446:61)
    at buildResponseToResult (D:\Dev\MicroWebStacks\astro-big-doc\node_modules\.pnpm\esbuild@0.15.16\node_modules\esbuild\lib\main.js:1030:7)
b\main.js:734:9)
    at Socket.readFromStdout (D:\Dev\MicroWebStacks\astro-big-doc\node_modules\.pnpm\esbuild@0.15.16\node_modules\esbuild\lib\main.js:655:7)
    at Socket.emit (node:events:513:28)
    at Socket.emit (node:domain:489:12) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 31,
        file: 'node_modules/.pnpm/vitefu@0.2.2_vite@3.2.4/node_modules/vitefu/src/index.js',
        length: 5,
        line: 14,
        lineText: "    const { createRequire } = (await import('module')).default",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    }
  ],
  warnings: []
}

Node.js v18.12.1
 ELIFECYCLE  Command failed with exit code 1.

This are main diffs I spotted, I keep trying all possible combinations of newer versions of astro, mdx, vite, rollup, without success, I cannot get rid of the Top-level await is not available error anymore. Any hints Or correct versions to use or is any depedency causing this

Link to Minimal Reproducible Example

Issue reproducible in this commit :
MicroWebStacks/astro-big-doc@959171c

Issue not reproducible in this previous commit with same package but different lock
MicroWebStacks/astro-big-doc@a06ed36

good and bad pnpm.lock files

I had to rename lock files from .yaml to .txt to be able to attach them here

pnpm-lock - committed - ok.txt

pnpm-lock - new - not ok.txt

Participation

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

[wassfila]

I'm working on narrowing down the issue cause and it boils down to importing the .mjs config from a js file which is a remark plugin even unused lodaded on dev mode
https://github.com/MicroWebStacks/astro-big-doc/blob/36c93586055a8b4b4a29439870bc6cacdf2540e9/src/libs/remark-image-pz.js#L4

import config from '../../astro.config.mjs'

I'll try to create a minimal example and then point out the exact package and version with which the dev error start.

[wassfila]

Mico example now in a single file single line
Take any astro project add a test.js within which a single import line creates the dev issue

Example Crashes dev mode

test.js

import { defineConfig } from 'astro/config';
import config from './config.mjs'
console.log(config)

Example works fine

test.js

//import { defineConfig } from 'astro/config';
import config from './config.mjs'
console.log(config)

Noe that here intentionally an import of an mjs module is kept to show that it's not du to generic import of .mjs but due to a specific one in astro/config function defineConfig
astro.mjs

const config = {}
console.log(config)
export default config;

[wassfila]

• I tried with config.js instead of .mjs same issue only reproducible when importing from the dependency not from the local file.
• Also, I tested many versions down to Astro 1.0.0 and surprisingly now the issue is systematically reproducible not like on my heavy example above, so I assume that this is Vite's black magic non systematic behavior depending on load or whatever

So given that this is unlikely to be an issue in Astro's code but Vite behavior, and given that nowhere it was recommended in Astro's doc to import the defineConfig or a file importing it from a user js, I will not follow up this issue as it's easy to work around it by using my own env vars and not try to reread what was input in Astro's config.

[wassfila]

unstable behvior not as reproted above sometimes only importing as such breaks dev

import config from '../../astro.config.mjs'
console.log(config)

[bluwy]

You can workaround this for now by specifying:

  vite: {
    optimizeDeps: {
      exclude: ['astro']
    }
  }

in your Astro config. Re-opening this for now as this should probably be added by Astro by default.

[wassfila]

Excellent, thanks a lot @bluwy for taking this serious and reopening the issue.
Thanks also for the workaround suggestion, I realized that good grasp of Vite is helpful sometime in Astro.

[gp-slick-coder]

I also had to exclude vitefu.

import { defineConfig } from 'astro/config';

import mdx from "@astrojs/mdx";
import svelte from "@astrojs/svelte";

export default defineConfig({
  integrations: [mdx(), svelte()],
  vite: {
    optimizeDeps: { exclude: ["fsevents", "astro", "vitefu"] },
  }
});