🐛 BUG: React integration results in "[vite] Internal server error: Cannot set properties of undefined (setting 'isSelfAccepting')"

[lloydjatkinson]

What version of astro are you using?

1.0.0-beta.36

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

No

What package manager are you using?

npm

What operating system are you using?

Windows and Linux

Describe the Bug

The React integration results in the following error:

00:03:25 [vite] Internal server error: Cannot set properties of undefined (setting 'isSelfAccepting')
  Plugin: vite:import-analysis
  File: /home/projects/gqaiaaarp.github/node_modules/.vite/deps/astro_client_visible_js.js?v=7ac8f471
      at ModuleGraph.updateModuleInfo (/home/projects/gqaiaaarp.github/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:57342:29)
      at TransformContext.transform (/home/projects/gqaiaaarp.github/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:57117:57)
      at async Object.transform (/home/projects/gqaiaaarp.github/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38900:30)
      at async doTransform (/home/projects/gqaiaaarp.github/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:55857:29)

I have confirmed this happens in both an existing Astro site and a brand new one made from https://astro.new/

To reproduce create a new Astro project with React integration.

Link to Minimal Reproducible Example

https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-react?file=package.json&on=stackblitz

Participation

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

[zadeviggers]

I've observed this happening in dev mode with Solid as well. Everything seems to still work fine though, and the error doesn't show up again when changes are made to files.

[lloydjatkinson]

For me locally sometimes it triggers the Astro error dialog in the browser

[retronav]

I'm trying out the reproduction, except this time, the following error is shown:

[vite] Internal server error: can't access property "isSelfAccepting", mod is undefined

Possibly the HMR script is having some issues. Error only in dev, build seems fine.

[patak-dev]

Here are some pointers to the changes in Vite which are related to this issue:

• fix: fix HMR propagation when imports not analyzed vitejs/vite#7561 (that first appeared in 2.9.1)
• fix: HMR propagation of HTML changes (fix #7870) vitejs/vite#7895 (that first appeared in 2.9.6)

For some reason, a module reaches the import analysis plugin transform hook without being in the module graph. See: https://github.com/vitejs/vite/blob/5161ecdc6c43b3fccf11e64dcc99b3d71140dcfc/packages/vite/src/node/plugins/importAnalysis.ts#L171
@natemoo-re maybe this is an issue in Astro related to the one they sent to discord about the module resolved id changing between load and transform?

[natemoo-re]

Thanks for chiming in @patak-dev! Definitely going to look at this one asap.

[bholmesdev]

Reproduce-able on all JSX based starters (React, Preact, Solid)

[bholmesdev]

"it must have been loaded so its entry is guaranteed in the module graph."
Narrator: Its entry was not guaranteed in the module graph.

Will investigate if we're the ones holding this wrong!

[lhermann]

Experiencing the same problem with Vue component imports.

[lloydjatkinson]

Experiencing the same problem with Vue component imports.

Are they JSX/TSX based components? I have a couple of Vue components and they are working find without this error - I've only seen it for React so far.

[stevenle]

Are there any known workarounds to resolve this? I've been having to run astro build && astro preview.

[bholmesdev]

@stevenle The error should not block dev server builds from my experience. You are free to ignore the error and carry on developing across the JSX components I've tested. That said, I'm working on a fix by EOD today!

[stevenle]

In the project I'm working on, the page renders normally with SSR but any component that uses partial hydration fails. I tried with client:load, client:idle and client:only="react". The build and preview workaround I'm doing works for now so I guess I'll keep doing that, but I'll happily test/verify any fixes you push. Thank you for looking into this @bholmesdev!

[patak-dev]

@natemoo-re @bholmesdev, following up here as @matthewp ended up uncovering a race condition in Vite after all. It wasn't that the id was changing, but the optimized dep was invalidated and removed from the module graph while doing the transform. That is why mod.id had a new id for the dep, it was a new entry. This was fixed in vitejs/vite#8534 and released in vite@2.9.12. @bholmesdev if there were workarounds added because of this condition, it may be good to review them. After @matthewp's PR, these conditions will also be a lot more rare (Vite should still work, but cold start should be smoother after this, and it should get even better with Vite v3)

• Preoptimize renderers and hydration directives #3568

[matthewp]

Closed by #3568, thanks a lot for the assist @patak-dev !