Next JS - PrismicError: A valid fetch implementation was not provided

Developing with Prismic
,
1

Hello,

I am refactoring my personal website in a cleaner way with Next.js 13.2, and facing an issue when reproducing what I have previously done for the Internationalization of my website.

I am getting an error that I have never had before:

  throw new PrismicError.PrismicError("A valid fetch implementation was not provided. In environments where fetch is not available (including Node.js), a fetch implementation must be provided via a polyfill or the `fetch` option.", void 0, void 0);
            ^

PrismicError: A valid fetch implementation was not provided. In environments where fetch is not available (including Node.js), a fetch implementation must be provided via a polyfill or the `fetch` option.

Current versions used:

"@prismicio/helpers": "^2.3.9",
"@types/node": "20.3.0",

Here is my next.config.js:

const prismic = require('@prismicio/client')
const sm = require('./slicemachine.config.json')

const localeOverrides = {
  'fr-fr': 'fr'
}

/** @type {import('next').NextConfig} */
const nextConfig = async () => {
  const client = prismic.createClient(sm.repositoryName)

  const repository = await client.getRepository()
  // const locales = repository.languages.map((lang) => lang.id)
  const locales = repository.languages.map(
    (lang) => localeOverrides[lang.id] || lang.id
  )
  return {
    reactStrictMode: true,
    i18n: {
      // These are all the locales you want to support in
      // your application
      locales,
      // This is the default locale you want to be used when visiting
      // a non-locale prefixed path e.g. `/hello`
      defaultLocale: locales[0]
    },
    images: {
      domains: ['images.prismic.io', 'images.unsplash.com', 'tailwindui.com']
    }
  }
}

module.exports = nextConfig

Thanks for the help!

3

Hello @Marving,

Thanks for reaching out to us!

The error occurs when the client doesn’t have a global fetch() function available. This primarily happens when @prismicio/client is used in Node.js versions less than 18 (Node.js 18 introduced global fetch()).

We recommend using the node-fetch package in Node.js or Node.js 18 or later. You can see an example on this page just below the table of option descriptions: @prismicio/client Technical Reference - Documentation - Prismic

I hope this helps.

Thanks,
Racheal.

1 Like
4

Hello @racheal.orukele!

Thank you coming back to me :D

I have been able to fix it. No idea how, I have redone my multilang set up from a cleaner branch, and it worked fine.

I must have had indeed a node js version issue somehow.

Thanks!

5

I'm glad to hear that. Let us know if you have any other questions.

Thanks!

1 Like