2.7.0 breaks Astro visual editing support

[DavithkbY]

The visual editor is broken in Astro with 2.7.0 and also 2.6.0:

[maazuddindenovers]

Facing the similar kind of issue.

After doing some research i found some solution related lodash package, so in vite config i added this in astro.config file

This solved my issue my visual-editing-component (overlays) worked fine but in studio i faced different issue which is
when i updated any field inside presentation tool and do some changes, it worked fine but after some seconds in console i saw these warnings

Then in presentation tool, it shows this

[DavithkbY]

@maazuddindenovers I have the exact same problem with the visual editor where the first edit just works and shows. When making a second edit, it just crashes. This is not only on 2.7.0 version but also on older versions like 2.4.1 etc...

[maazuddindenovers]

@DavithkbY , Yeah, i have also tried multiple older version, but there are still some kind of errors, Not sure I think these issues are causing with some dependents/dependencies and someone also look into this package also is this related to this package @sanity/astro or not.

[rdunk]

I think this issue is likely related to @sanity/visual-editing. If you're able to bump that dependency to its latest version and let me know if things improve that would be much appreciated!

[DavithkbY]

Hi @rdunk do you mean 2.7.1? With version 2.7.1 it's still broken:

My package.json:

"overrides": { "vite": { "rollup": "npm:@rollup/wasm-node" } }, "dependencies": { "@astro-community/astro-embed-youtube": "^0.5.6", "@astrojs/check": "^0.9.4", "@astrojs/netlify": "^5.5.4", "@astrojs/react": "^3.6.2", "@astrojs/rss": "^4.0.9", "@astrojs/sitemap": "^3.2.1", "@astrojs/tailwind": "^5.1.2", "@inlang/paraglide-astro": "^0.2.2", "@portabletext/react": "^3.1.0", "@portabletext/to-html": "^2.0.13", "@sanity/astro": "^3.1.6", "@sanity/cli": "^3.64.1", "@sanity/client": "^6.22.2", "@sanity/image-url": "^1.1.0", "@sanity/visual-editing": "^2.7.1", "@types/node": "^22.7.5", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "astro": "^4.16.13", "astro-embed": "^0.9.0", "astro-portabletext": "^0.10.1", "build": "^0.1.4", "dotenv": "^16.4.5", "feed": "^4.2.2", "fs-extra": "^11.2.0", "groq": "^3.64.1", "npm": "^10.9.0", "react": "^18.3.1", "react-dom": "^18.3.1", "rss": "^1.2.2", "run": "^1.5.0", "sanity": "^3.64.1", "shelljs": "^0.8.5", "tailwindcss": "^3.4.13", "tailwindcss-animated": "^1.1.2", "typescript": "^5.6.3", "uuid": "^10.0.0", "xml2js": "^0.6.2" }, "devDependencies": { "@inlang/paraglide-js": "1.11.3", "@sanity/export": "^3.41.0", "@tailwindcss/typography": "^0.5.15", "@types/fs-extra": "^11.0.4", "@types/rss": "^0.0.32", "@types/xml2js": "^0.4.14", "prettier": "^3.3.3", "prettier-plugin-astro": "^0.14.1", "prettier-plugin-tailwindcss": "^0.6.8", "tsx": "^4.19.1", "vite": "^5.4.11" }, "optionalDependencies": { "@rollup/rollup-linux-x64-gnu": "4.9.5" }

[DavithkbY]

@rdunk I tried it again and it does seem fixed now with 2.7.1 amazing!

[rdunk]

@DavithkbY Awesome! Glad to hear it and thanks for reporting.

[DavithkbY]

@rdunk it randomly stopped working locally again. Nothing changes in the codebase literally 0 lines of code very weird.
It does work on the deployed live version but not local.
This error again:

en:4942 [astro-island] Error hydrating /node_modules/@sanity/astro/dist/visual-editing/visual-editing-component.tsx SyntaxError: The requested module '/node_modules/lodash/groupBy.js?v=ad36607e' does not provide an export named 'default'

[narration-sd]

Just possibly another clue turns up.

• I updated the 2.7.1 version on a test project, my blog addition to the base sanity-astro
• it seems to work fine in dev
• I got it going on Vercel, after much faffing as I'd forgotten best ways to get a monorepo set up there
• but in addition the the monorepo config, in the end I had to align versions of sanity between portions of it, and then got errors for mismatched versions on other packages. So I cut the test repo down just to packages/sanity-astro, and apps/blog, ran ncu -u on each folder including the root, then remove all node_modules and pnpm-lock.yaml, then installed. I also had to update to tasks in the turbo.json since I use that to get the monorepo to build at this point. After all this, then a git commit-push let Vercel build with it, which succeeded.

Now. I tried this out. App -- fine. Studio on /admin -- looked fine at first. But, it failed to Live Edit actually, and after a while gave the prompt you've seen that it couldn't connect, which is studio to app.

In the console.log, this is logged, along eventually with the usual heartbeat no response.

But: there is something else, seemingly taking a while to show up: an Uncaught Error: path is required....and this having to do with ResolveEditInfo, which I seem to find inside the visual-editing package code.

This looks like a bit of a hot clue, and you can see it all on the screenshot I'm attaching. Hope it helps. Once again, this occurs on Vercel, but not on dev, and with the environmental config look like it is correct. The console indication is something missing, not mis-set....

The repo for this, if useful, is https://github.com/narration-sd/sanity-astro/tree/narration-sd/added-blog-example-vercel

[maazuddindenovers]

@DavithkbY I was facing this issue, so i looked into it

en:4942 [astro-island] Error hydrating /node_modules/@sanity/astro/dist/visual-editing/visual-editing-component.tsx SyntaxError: The requested module '/node_modules/lodash/groupBy.js?v=ad36607e' does not provide an export named 'default'

I found that in nodemoules at this path node_modules\@sanity\mutate\dist\_unstable_machine.browser.js groupby is being used as ES module

but in lodash package node_modules\lodash\groupBy.js, it is using the CommonJS

So i found out that i can use the "lodash-es" for ES module so i installed and then configured vite in astro config

  vite: {   
    resolve: {
      alias: {
        lodash : 'lodash-es'
      }
    },
  },

but not sure, it is the right solution or not but @rdunk can tell more on this.

[narration-sd]

@maazuddindenovers Maaz, I'm suspecting your lodash situation has been something to do with your app, rather than this sanity-astro issue. I see no such errors, but put in your alias to lodash-es, which seems accepted (as long as I add it to pnpm), but makes no changes I can see to the no-visual-editing problem -- but was a good thought :)

I pushed further on what appears here, by creating a Netlify-compatible config, and deploying on Netlify.

This fails to visual edit also, just as we've been seeing, and has the same logging of 'uncaught Error: path is required'. The image is this time is from Chrome latest, instead of Firefox latest, but the result is the same, as you can see below.

• the errors don't appear right away on shift-loading, but when you hover the mouse over the web page frame
• this fits that they are coming from visual-editing's helper running in the page, via the visual-edit import in sanity/astro package's visual-editing-component.tsx, as the stack traces suggest.
• It's somehow a little difficult to unwind how that calls 'resolveEditInfo' to fail, but presumably you have a dev setup where you can run all with observation.
• I looked through source, where the error seems to arise, and 'path' appears to be about missing a 'baseUrl' in the internal naming, which looks that it's spread from config. But the only configuration for baseUrl seems to be in multi-workspace studios, and it has never been needed before.
• in case it might be something else, I even tried enriching the fetch-time config, but no help from that.

Ok. I have to leave it, hopefully with more clues. The Netlify version including trial steps today is here.