Unable to connect to visual editing – shallowequal does not provide an export named 'default' (at styled-components.browser.esm.js?v=ca1ca438:4:8)

[MichaelPrecel]

trafficstars

Version

module: 1.13.3 nuxt: 3.15.4

Nuxt configuration

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: false },

  future: {
    compatibilityVersion: 4,
  },

  modules: ["@nuxtjs/sanity"],

  sanity: {
    apiVersion: "2025-02-13",
    projectId: "3jds3t8i",
    dataset: "production",
    visualEditing: {
      studioUrl: "http://localhost:3333",
      token: "",
    },
  },

  compatibilityDate: "2025-02-13",
});

Reproduction

Minimal reproduction: https://github.com/MichaelPrecel/Nuxt-Sanity-Visual-Editing-issue-reproduction/tree/main

What is actually happening?

Visual editing is unable to connect. Receiving error

Uncaught (in promise) SyntaxError: The requested module '/_nuxt/@fs/Users/michaelprecel/Sites/EACH/each-minimal-repro/Nuxt-Sanity-Visual-Editing-issue-reproduction/nuxt-repro/node_modules/.pnpm/[email protected]/node_modules/shallowequal/index.js?v=ef34c05a' does not provide an export named 'default' (at styled-components.browser.esm.js?v=ef34c05a:4:8)

Steps to reproduce

1. Pnpm install both nuxt-repro and sanity-repro
2. Run pnpm dev on both nuxt and sanity folders
3. In Sanity, enter Presentation mode
4. Open browser console to see issue

Additional information

Checklist

• [x] I have tested with the latest Nuxt version and the issue still occurs
• [x] I have tested with the latest module version and the issue still occurs
• [x] I have searched the issue tracker and this issue hasn't been reported yet

Package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxtjs/sanity": "1.13.3",
    "@sanity/client": "^6.28.0",
    "nuxt": "^3.15.4",
    "react": "18",
    "vue": "latest",
    "vue-router": "latest"
  }
}

What is actually happening?

[tlebeitsuk]

I'm getting the same error.

Adding this to nuxt.config.ts fixes it:

vite: {
  optimizeDeps: {
    include: ["shallowequal", "lodash/startCase.js"],
  },
},

[MichaelPrecel]

After manually installing shallowequal and lodash, this fixed it for me too – thank you @tlebeitsuk – LIFESAVER

[3urdparty]

Thanks @MichaelPrecel that fixed the problem for me. Absolute legend!

[kristoferblack]

I was getting this same error and added shallowequal + lodash to try to get around it only to be hit with another error, attached:

Seems its dying on a different dependency.. which is react-is and it not having an export isValidElementType.

Anyone have any insights?

[devzom]

After update to latest nuxt-sanity and nuxt4 I've started seeing another issue in browser console

Uncaught (in promise) SyntaxError: The requested module
 '/_nuxt/@fs/Users/admin/dev/clients/project-xxxx/node_modules/.pnpm/
[email protected][email protected]/node_modules/react-compiler-runtime/dist/index.js?v=73b78302'
does not provide an export named 'c' (at mutations.js?v=73b78302:1:10)

tried with vite.optimizeDeps include or exclude but didn't helped. Also tried to use pnpm resolution, ofc deleting node_modules but unlucky nothing helped yet

[MichaelPrecel]

I'm running

vite: {
  optimizeDeps: {
    include: ["shallowequal", "lodash/startCase.js", "react-compiler-runtime", "react", "react-dom"],
  }
}

And package.json includes

"lodash": "^4.17.21",
"react": "^18",
"react-compiler-runtime": "19.1.0-rc.2",
"react-dom": "^18",
"shallowequal": "^1.1.0",

😵‍💫

[devzom]

thanks @MichaelPrecel, tried that and indeed it did helped with the specific error.

Even smaller deps tree and optimize list

as

// nuxt.config
  optimizeDeps: {
      include: ['react-compiler-runtime', 'react', 'react-dom']
    }

devDependencies:{
    "react": "^19",
    "react-compiler-runtime": "^19.1.0-rc.2",
    "react-dom": "^19"
}

[th-km]

I'm also running into this issue with a fresh "nuxt": "^4.0.3" and "@nuxtjs/sanity": "1.14.1" install. This problem probably deserves a new issue as, in my case, it's not even related to visual editing, and without installing those peer dependencies, my app crashes with a 500.

[hacknug]

Looks like the module should be handling this but doesn't for some kind of reason. Possibly because the chain of dependencies is not the same any more:

https://github.com/nuxt-modules/sanity/blob/a67fc2d5f659ecdd6765a4929830736c8b571aa8/src/module.ts#L377-L388

[hacknug]

I believe the last stable release was using "@sanity/visual-editing": "^2.8.0": https://github.com/nuxt-modules/sanity/commit/c675cc5eadaf5296cf737ec42a57e4a4651d1d11#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R56

The issue is probably related to the changes made for react compiler: https://github.com/sanity-io/visual-editing/blob/main/packages/visual-editing/CHANGELOG.md#280-2024-11-19

~~Setting an override in pnpm-workspace.yaml seems to prove my theory correct:~~

overrides:
  "@sanity/visual-editing": "2.8.0"

This still leaves me with broken icons from @nuxt/icon but I'm not sure if that issue is related to this one or not so I won't open a new issue for now.