contentful.js: Contentful.js doesn't work with Nuxt3

I had this same issue. Worked in Dev, but not in Production. The below code solved my problem. Basically, in Production you must use contentful.createClient. In Dev you can use createClient.

Hope this helps someone else.

import { createClient } from "contentful";
import contentful from 'contentful'

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();

  const createClientFunc = process.env.NODE_ENV === 'development' ? createClient : contentful.createClient

  const client = createClientFunc({
    space: config.CTF_SPACE_ID,
    accessToken: config.CTF_CDA_ACCESS_TOKEN,
  });

  return {
    provide: {
      contentfulClient: client,
    },
  };
});

You don’t need to switch to the beta version of contentful to fix this. The beta version seems to have some issues (it didn’t respect the include setting on my calls when I tried it for example). In the built server, the createClient function ends up on the contentful.default object instead of the contentful object. I’m sure there’s an explanation, probably something to do with interoperability between CommonJS and ES Modules.

Anyway, I solved it like this:

import * as contentful from 'contentful'

const client = contentful.createClient
    ? contentful.createClient({...})
    : contentful.default.createClient({...})

I’m using nuxt 3.2.3 and contentful 9.3.3.

Cannot find contentful.default…

I had to ignore this with /* eslint-disable import/namespace */. The solution from @eriklindgren is working for me.

• Operating System: Darwin
• Node Version: v18.14.1
• Nuxt Version: 3.3.1
• Nitro Version: 2.3.1
• Builder: vite
• User Config: target, ssr, experimental, runtimeConfig, build, tailwindcss, vite, css, image, modules, i18n

Cannot find contentful.default…

The solution still works for me on nuxt 3.3.1 and contentful 9.3.5. I build the app with nuxi build and then run it with node .output/server/index.mjs. In the server/shell, the contentful.default object has the createClient function and in the client/browser the createClient function is on the contentful object itself.

If I run the app with nuxi dev, the createClient function is on the contentful object in both server and client 🤷

Hey @marcolink just want to say thanks for the help and that it’s likely a Nuxt/Vite issue or something else on my side. I don’t think you need to look into this any more.

Thanks @fmarcheski! I had to do the same thing, ended up forgetting to post it here. That solution works for me too.

I’ve run into the same issue in an Astro project. Interestingly in my case I only have this issue when building the site, not whilst Vite is running in watch mode.

I’ve played around with the stable and beta version of this package, along with named vs default imports and found this combination to work for me in both dev and production mode:

Install the beta version with

yarn add contentful@beta-v10

Then switch your usage like this

- import { createClient } from 'contentful';
+ import contentful from 'contentful';

- export const client = createClient({...});
+ export const client = contentful.createClient({...});