Deploying Next.js Landing Page Sample on Netlify - Errors

19 replies
Last updated: Feb 4, 2022
Hi! I'm trying Sanity for the first time but the Next.js Landing page sample site had problems deploying on netlify and I really need some help.
AI Update

I understand you're having trouble deploying the Sanity Next.js Landing Page template on Netlify! This is a common issue, and there are several typical problems that come up with this setup. Let me help you troubleshoot.

Common Deployment Issues with the Next.js Landing Page Template on Netlify

Based on the landing page template guide, here are the most common issues and solutions:

1. Build Settings Configuration

For Next.js on Netlify, you need to ensure your build settings are correct:

  • Base directory: Leave empty (or set to web if your Next.js app is in a subdirectory)
  • Build command: npm run build (or cd web && npm run build if in a subdirectory)
  • Publish directory: For Next.js 13.5+, Netlify uses the Essential Next.js plugin which handles this automatically - you should leave the publish directory empty or use .netlify. For older versions, it was .next

2. Monorepo Structure Issues

The sanity-template-nextjs-landing-pages uses a monorepo structure with both the Studio and the web frontend:

  • The Studio is typically in /studio
  • The Next.js frontend is in /web

You might need to set up two separate Netlify sites - one for the Studio and one for the frontend. When Netlify builds from the repository, it needs to know which part to deploy.

3. Environment Variables

Make sure you've configured these environment variables in Netlify (under Site settings → Environment variables):

  • SANITY_PROJECT_ID - Your Sanity project ID
  • SANITY_DATASET - Usually "production"
  • SANITY_API_TOKEN - If you're using authenticated requests (for preview mode)
  • NEXT_PUBLIC_SANITY_PROJECT_ID - For client-side access
  • NEXT_PUBLIC_SANITY_DATASET - For client-side access

4. Next.js Runtime Plugin

For modern Next.js versions (13.5+), Netlify requires the @netlify/plugin-nextjs plugin. This should be automatically detected, but if not, add a netlify.toml file to your project root:

[[plugins]]
  package = "@netlify/plugin-nextjs"

5. Build Command for Monorepo

If you're deploying the web frontend from the root of a monorepo, your build settings should be:

  • Base directory: web
  • Build command: npm install && npm run build
  • Publish directory: Leave empty (Netlify will auto-detect with the Next.js plugin)

Quick Fix Steps

  1. In your Netlify dashboard, go to Site settings → Build & deploy → Build settings
  2. Set Base directory to web
  3. Set Build command to npm install && npm run build
  4. Leave Publish directory empty (let Netlify's Next.js plugin handle it)
  5. Add all required environment variables under Site settings → Environment variables
  6. Trigger a new deploy

Specific Error Messages to Watch For

Without knowing your exact error, here are the most common ones:

  • "Directory not found" - Check your base directory and publish directory settings
  • "Module not found" - Make sure npm install runs in the correct directory
  • Build timeout - Check for missing dependencies or infinite loops
  • Environment variable errors - Verify all Sanity variables are set correctly

Additional Resources

If you're still having issues after trying these steps, it would be helpful to know:

  • The specific error message from your Netlify build log
  • Which version of Next.js you're using
  • Whether you're trying to deploy the Studio, the frontend, or both

Feel free to share those details and I can provide more targeted help!

Show original thread
19 replies
The prompt said to contact the slack community so I came here straight.
Is there any errors outputted into the deploy log from Netlify?
Can I paste the logs here?
there's a bunch of errors
Yeah, should be fine to paste here, you may want to go through it before though incase there is anything private that you don’t want to show etc
11:37:13 AM: ────────────────────────────────────────────────────────────────11
:37:13 AM: 1. Build command from Netlify app 11
:37:13 AM: ────────────────────────────────────────────────────────────────
11:37:13 AM:
11:37:13 AM: $ npm run build-web
11:37:14 AM: > sanity-nextjs-landing-pages@1.0.12 build-web
11:37:14 AM: > lerna bootstrap && (cd web && npm run build)
11:37:14 AM: lerna notice cli v4.0.0
11:37:14 AM: lerna info ci enabled
11:37:15 AM: lerna info Bootstrapping 2 packages
11:37:15 AM: lerna info Symlinking packages and binaries
11:37:15 AM: lerna success Bootstrapped 2 packages
11:37:15 AM: > sanity-nextjs-landing-pages-web@1.0.12 build
11:37:15 AM: > next build && next export && node exportSitemap.js
11:37:16 AM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: <https://nextjs.org/docs/messages/no-cache>
11:37:16 AM: info  - Checking validity of types...
11:37:17 AM: warn  - The Next.js plugin was not detected in your ESLint configuration. See <https://nextjs.org/docs/basic-features/eslint#migrating-existing-config>
11:37:18 AM:
11:37:18 AM: Failed to compile.
11:37:18 AM: ./pages/CustomPage.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./pages/LandingPage.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./pages/_app.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./pages/_document.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./pages/index.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/Cta.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/EmbedHTML.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/Figure.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/Footer.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/Header.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/Layout.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/RenderSections.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/SimpleBlockContent.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/icons/Hamburger.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/sections/Hero.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/sections/ImageSection.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/sections/Mailchimp.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/sections/TextSection.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: ./components/sections/index.js
11:37:18 AM: Error: Parsing error: require() of ES Module /opt/build/repo/web/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
11:37:18 AM: Instead change the require of definition.js in /opt/build/repo/web/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules.
11:37:18 AM: info  - Need to disable some ESLint rules? Learn more here: <https://nextjs.org/docs/basic-features/eslint#disabling-rules>
11:37:18 AM:

1118 AM: ────────────────────────────────────────────────────────────────
1118 AM: "build.command" failed
1118 AM: ────────────────────────────────────────────────────────────────
1118 AM:
1118 AM: Error message
1118 AM: Command failed with exit code 1: npm run build-web
1118 AM:
1118 AM: Error location
1118 AM: In Build command from Netlify app:
1118 AM: npm run build-web
1118 AM:
1118 AM: Resolved config
1118 AM: build:
1118 AM: base: /opt/build/repo
1118 AM: command: npm run build-web
1118 AM: commandOrigin: ui
1118 AM: environment:
1118 AM: - SANITY_DEPLOY_STUDIO_TOKEN
1118 AM: publish: /opt/build/repo/web/out
1118 AM: publishOrigin: ui
Hmm, could you show some examples of how you are importing your components in the relevant templates please?
Also, have you tested this locally?
I haven' tested it locally. I used the template thingy on the site and when it returned the errors i went to check the netlify logs
Hmm, in that case I wonder if there are some problems with this particular starter that need to be resolved, might be an idea to report an issue here: https://github.com/sanity-io/sanity-template-nextjs-landing-pages/issues
Hi User! I just got the same failure while trying to build one from scratch myself. I’m going to dig into this some and get back with you. This looks like a problem in the frontend configuration. In the meantime, if you just want to get some quick hands on, the nextjs blog with comments starter is working well for me.

https://www.sanity.io/create?template=sanity-io%2Fsanity-template-nextjs-blog-comments
so netlify (or perhaps cors) isn’t happy about something. I was able to get mine to run locally.
npm run dev

> sanity-nextjs-landing-pages@1.0.12 dev
> lerna run dev --parallel

lerna notice cli v4.0.0
lerna info Executing command in 2 packages: "npm run dev"
sanity-nextjs-landing-pages-studio: > sanity-nextjs-landing-pages-studio@1.0.11 dev
sanity-nextjs-landing-pages-studio: > sanity start
sanity-nextjs-landing-pages-web: > sanity-nextjs-landing-pages-web@1.0.12 dev
sanity-nextjs-landing-pages-web: > next
sanity-nextjs-landing-pages-web: ready - started server on 0.0.0.0:3000, url: <http://localhost:3000>
sanity-nextjs-landing-pages-web: Defining routes from exportPathMap
sanity-nextjs-landing-pages-studio: ✔ Checking configuration files...
sanity-nextjs-landing-pages-studio: - Compiling...
sanity-nextjs-landing-pages-web: Browserslist: caniuse-lite is outdated. Please run next command `npm update`
sanity-nextjs-landing-pages-web: event - compiled client and server successfully in 1507 ms (222 modules)
sanity-nextjs-landing-pages-studio: webpack built dad45f21359b4c8ec361 in 6555ms
sanity-nextjs-landing-pages-studio: ✔ Compiling...
sanity-nextjs-landing-pages-studio: Content Studio successfully compiled! Go to <http://localhost:3333>
sanity-nextjs-landing-pages-web: wait  - compiling /LandingPage (client and server)...
sanity-nextjs-landing-pages-web: event - compiled client and server successfully in 675 ms (336 modules)
sanity-nextjs-landing-pages-web: Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: <https://nextjs.org/docs/messages/prefetch-true-deprecated>
sanity-nextjs-landing-pages-web: Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: <https://nextjs.org/docs/messages/prefetch-true-deprecated>
sanity-nextjs-landing-pages-web: Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: <https://nextjs.org/docs/messages/prefetch-true-deprecated>
sanity-nextjs-landing-pages-web: Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: <https://nextjs.org/docs/messages/prefetch-true-deprecated>
sanity-nextjs-landing-pages-web: Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: <https://nextjs.org/docs/messages/prefetch-true-deprecated>
sanity-nextjs-landing-pages-web: wait  - compiling /_error (client and server)...
so netlify (or perhaps cors) isn’t happy about something. I was able to get mine to run locally.```
oh I found A problem for sure - nexjs eslint rules perhaps not defined correctly in the web: https://nextjs.org/docs/basic-features/eslint
this would only affect the build environment, I’m going to try to patch it in my local build now
okay it isn’t as simple as a linting issue - some next get*props methods need tlc in this example perhaps. I will forward this to the team. Still in the meantime, if you just want to test things - the studio in this example build appears to work well, and the next blog with comments along with other starters also work well. Here is the get serverside error I am getting at present. There may be a simple way to resolve this that I don’t know yet. https://nextjs.org/docs/messages/gssp-export
okay it isn’t as simple as a linting issue - some next get*props methods need tlc in this example perhaps. I will forward this to the team. Still in the meantime, if you just want to test things - the studio in this example build appears to work well, and the next blog with comments along with other starters also work well. Here is the get serverside error I am getting at present. There may be a simple way to resolve this that I don’t know yet. https://nextjs.org/docs/messages/gssp-export
Hi User - Circling back on this. The lovely and talented User was able to make a pass on this and get everything working again. I just deployed it myself to test and the install was very smooth. You are welcome to deploy again from scratch or if you have entered data into your previous build, you can redeploy and swap projectIds and settings to the new fixed deployment. Here is my successful starter: https://example-nextjslandingpage-netlify-fixed.netlify.app/
Thank you so much for the help with this I'll try it out again.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?