Mismatch between guide contents and repo

[victor-bts]

Hello!

I'm having some challenges trying to hook up Visual Editing to an existing project so I've turned to the Sanity guide here. (I'm using Next.js 14.2.x app router)

I am currently trying to diagnose why I'm seeing errors about configuring visual editing incorrectly, and I would like to understand the omission of the SanityLive and DisableDraftMode components that are in the guide but not in the repo.

Thanks kindly!

[SimeonGriggs]

Yes unfortunately the repo is presently out of sync. I'll get it updated soon.

What errors are you getting from following the guide?

[victor-bts]

Thanks for the reply, @SimeonGriggs. I've got a version of your repo running locally and it works correctly. However, I'm trying to integrate its approach into an existing project. I have the presentation/preview loading and seems to be in draft mode because the url incorporates a hash, i.e. http://localhost:3000/studio/presentation/homepage/d73b5c0b-1730-426e-8da2-7612f04296fc. However, browser console throws the error message:

and I'm not sure what aspect of code PresentationToolGrantsCheck.js is failing on. Meanwhile, as the page was loading the server console threw several of the following errors complaining about unable to connect to source maps, leading me to think the browser and server errors are related.

Failed to get source map: Error: Failed to read file contents of /Users/victor/myproject/.next/static/chunks/app/%5Blocale%5D/page.js.
    at getSourceMapFromFile (file:///Users/victor/myproject/node_modules/next/src/client/components/react-dev-overlay/internal/helpers/get-source-map-from-file.ts:20:10)
    at async getSource (file:///Users/victor/myproject/node_modules/next/src/client/components/react-dev-overlay/server/middleware.ts:217:22)
    at async (file:///Users/victor/myproject/node_modules/next/src/client/components/react-dev-overlay/server/middleware.ts:435:15)
    at async HotReloaderWebpack.run (file:///Users/victor/myproject/node_modules/next/src/server/dev/hot-reloader-webpack.ts:392:6)
    at async handleRequest (file:///Users/victor/myproject/node_modules/next/src/server/lib/router-server.ts:319:34)
    at async requestHandlerImpl (file:///Users/victor/myproject/node_modules/next/src/server/lib/router-server.ts:576:6)
    at async Server.requestListener (file:///Users/victor/myproject/node_modules/next/src/server/lib/start-server.ts:146:6) {
  [cause]: Error: ENOENT: no such file or directory, open '/Users/victor/myproject/.next/static/chunks/app/%5Blocale%5D/page.js'
      at async getSourceMapFromFile (file:///Users/victor/myproject/node_modules/next/src/client/components/react-dev-overlay/internal/helpers/get-source-map-from-file.ts:18:19)
      at async getSource (file:///Users/victor/myproject/node_modules/next/src/client/components/react-dev-overlay/server/middleware.ts:217:22)
      at async (file:///Users/victor/myproject/node_modules/next/src/client/components/react-dev-overlay/server/middleware.ts:435:15)
      at async HotReloaderWebpack.run (file:///Users/victor/myproject/node_modules/next/src/server/dev/hot-reloader-webpack.ts:392:6)
      at async handleRequest (file:///Users/victor/myproject/node_modules/next/src/server/lib/router-server.ts:319:34)
      at async requestHandlerImpl (file:///Users/victor/myproject/node_modules/next/src/server/lib/router-server.ts:576:6)
      at async Server.requestListener (file:///Users/victor/myproject/node_modules/next/src/server/lib/start-server.ts:146:6) {
    errno: -2,
    code: 'ENOENT',
    syscall: 'open',
    path: '/Users/victor/myproject/.next/static/chunks/app/%5Blocale%5D/page.js'
  }
}

There are also some oddities with trying to get the resolver working with a multi-locale site in the preview but that's a separate question.

[sergeycode]

Hello @SimeonGriggs. I followed your guide, and it worked flawlessly.

For anyone interested, I’ve created a starter based on this guide with added features like Tailwind, shadcn/ui, and a few components to enhance the modular page-building experience. You can check it out here.