Contentful.js doesn't work with Nuxt3

Expected Behavior

Contentful.js SDK works with Nuxt3 when building for production.

Actual Behavior

When creating a plugin to use Contentful:

import * as contentful from "contentful";

It works fine locally when running npm run dev.

However, when building for production, this happens:

[nuxt] [request error] contentful.createClient is not a function

Steps to Reproduce

1. Create an entry with a “title” field in Contentful.

2. Create a project using Nuxt3: npx nuxi init nuxt-app cd nuxt-app

3. Install Contentful.js npm install contentful -D

4. Create the file plugins/contentful.js and add:

import * as contentful from "contentful";

export default defineNuxtPlugin((nuxtApp) => {
  const client = contentful.createClient({
    space: "YOUR_SPACE_ID",
    accessToken: "YOUR_ACCESS_TOKEN",
  });

  nuxtApp.provide("contentfulClient", client);
});

1. Then, in app.vue:

<template>
  <div>
    {{ entry.fields.title }}
  </div>
</template>

<script setup>
  const { $contentfulClient } = useNuxtApp();
  const entry = await $contentfulClient.getEntry("YOUR_ENTRY_ID");
</script>

1. Run npm run dev and see that the title appears as expected.
2. Run npm run build, then npm run preview. An error 500 occurs, in the log you see: [nuxt] [request error] contentful.createClient is not a function

Context

I’m trying to deploy my application on Netlify.

Environment

• Language Version: Node v16.14.0
• Package Manager Version: NPM 8.3.1
• Browser Version: Version 100.0.4896.127 (Official Build) (x86_64)
• Operating System: macOS Monterey v12.2.1Darwin *** 21.3.0 Darwin Kernel Version 21.3.0: Wed Jan 5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_X86_64 x86_64
• Package Version: "contentful": "^9.1.25" and "nuxt": "3.0.0-rc.1"
• Which API are you using?: Trying to use Contentful JavaScript Content Delivery Library

[fmarcheski]

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,
    },
  };
});

[JackEdwardLyons]

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.