ReferenceError: `__WC_CONFIG__` is not defined

[AriPerkkio]

Describe the bug

Freshly created tutorials without any modifications are running into __WC_CONFIG__ is not defined errors. This is coming up randomly and looks like possible race condition. When page is refreshed with cache clearing the error disappears, but normal refreshes run into this error immediatelly.

This only affects dev mode.

Link to a StackBlitz project which shows the error

No response

Steps to reproduce

1. pnpm create tutorial
2. Start in dev mode
3. Open page in browser
4. Keep refreshing page and check JS console

Expected behavior

Error should not happen.

Screenshots

Platform

• TutorialKit version: 0.2.0

Additional context

No response

[Nemikolh]

Could this be a bug with Astro? I wonder if we also see this issue with an older version of Astro.

I'm wondering because this is literally the first thing we set in the vite config and I don't think this has ever really changed:

https://github.com/stackblitz/tutorialkit/blob/3e7e6cb59f7f6ffd4551f483d71f36f51fcf0ef9/packages/astro/src/index.ts#L77-L94

(also if that helps bisecting the combo that breaks, I've never encountered that issue when I was doing demos back in June)

[AriPerkkio]

This issue isn't present on 0.1.2 but appears first in 0.1.3.

https://github.com/stackblitz/tutorialkit/compare/0.1.2...0.1.3

[AriPerkkio]

This is likely introduced in https://github.com/stackblitz/tutorialkit/pull/219.

When import of './OpenInStackblitzLink.astro' is removed here, the issue disappears:

https://github.com/stackblitz/tutorialkit/blob/3e7e6cb59f7f6ffd4551f483d71f36f51fcf0ef9/packages/astro/src/default/components/TopBarWrapper.astro#L6-L8

There's two depedency chains for the setup.ts that tries to access __WC_CONFIG__:

TopBarWrapper.astro > setup
TopBarWrapper.astro > OpenInStackblitzLink.astro > webcontainer > setup

The first one works fine. But the second on comes from <script> tag. Maybe Astro doesn't apply Vite's define transforms there? I'll keep looking... 👀

[AriPerkkio]

Maybe Astro doesn't apply Vite's define transforms there? I'll keep looking...

Something weird going on there. Tested this in minimal Astro reproduction:

import { defineConfig } from "astro/config";

export default defineConfig({
  vite: {
    define: {
      __MY_DEFINE__: '"Value set in config"',
    },
  },
});

---
const frontmatter = __MY_DEFINE__;
---

<h1>My Component</h1>

<script define:vars={{frontmatter}}>
  console.log({frontmatter, scriptScope: globalThis.__MY_DEFINE__})

  setTimeout(() => {
    console.log({frontmatter, scriptScope: globalThis.__MY_DEFINE__})
  }, 1000)
</script>

And we get:

Looks like Vite's dev-time define is loaded after the Astro component is. Looks like bug to me.

I'll try to find quick solution for us here so that we can release fix as soon as possible. Maybe convert the component into React one. 🤔

[AriPerkkio]

https://github.com/withastro/astro/issues/11874

[Nemikolh]

Oh good find! Thanks for digging in :star_struck: