Console error createClient undefined in client using nuxt

[larsdouweschuitema]

Expected Behavior

No console error. Ideally, no workaround required to use contentful with nuxt.

Actual Behavior

import * as contentful from 'contentful'
const contentfulClient = contentful.createClient ? contentful.createClient(contentfulConfig) : contentful.default.createClient(contentfulConfig);

The app renders. The entry data is retrieved and rendered, but the browser (client) is throwing the bottom console error.

useContentful.ts?v=97ba44d3:6 Uncaught (in promise) 
TypeError: Cannot read properties of undefined (reading 'createClient')

Context

We created a useContentful composable which is responsible for connecting to the Contentful space, and exposing a method to fetch the entry. Since we wanted to use this composable in multiple nuxt apps, we wanted to move this composable to a nuxt layer. Once we moved this composable, the workaround for the existing createClient issue no longer works. This means that we cannot use this shared composable for now and all have to do our custom implementation.

Using the layer in a "playground" inside of the app, which basically mimics the implementation of using the layer inside of another package, will not throw any error. While using the layer inside of a nuxt app will throw the error no matter what.

I have tried to use various methods to workaround this issue, but none have succeeded.

Environment

• Language Version: v20.11.1
• Package Manager Version: 10.2.4
• Operating System: Darwin 23.4.0
• Contentful Package Version: v10.11.0
• Nuxt Version: 3.11.2
• Which API are you using?: Delivery

[albertpratomo]

+1 for this issue. I can't get this package to work with Nuxt 3 SSR mode.

In server side it works.

But in browser side, the above code doesn't work. In browser side is the contentful added to window?

I just want to call the createClient function but it doesn't work.

[jackwfrench]

+1 getting the same error in svelte kit.

I'm assuming something to do with Vite.

[axe312ger]

@jackwfrench @albertpratomo @larsdouweschuitema

Vite is now supported! Check out v11! Please give feedback if it works for you, and when not, please open a ticket and describe your setup + share the error message. I happily help. V11 is supposed to run everywhere!

[larsdouweschuitema]

@jackwfrench @albertpratomo @larsdouweschuitema

Vite is now supported! Check out v11! Please give feedback if it works for you, and when not, please open a ticket and describe your setup + share the error message. I happily help. V11 is supposed to run everywhere!

I have tested it on a clean environment and it version 11.0.3 throws the following error:

The requested module '/_nuxt/node_modules/lodash.isplainobject/index.js?v=b8a1a03c' does not provide an export named 'default'
SyntaxError: The requested module '/_nuxt/node_modules/lodash.isplainobject/index.js?v=b8a1a03c' does not provide an export named 'default'

Using npm ls:

 contentful@11.0.3
│   └─┬ contentful-sdk-core@8.3.2
│     └── lodash.isplainobject@4.0.6 deduped

Trying out contentful-sdk-core 9.0.0 I receive the same error.

[axe312ger]

Please check: https://github.com/contentful/contentful.js/?tab=readme-ov-file#installation

It is import * as contentful from 'contentful' instead of import contentful from 'contentful' :)

[larsdouweschuitema]

Please check: https://github.com/contentful/contentful.js/?tab=readme-ov-file#installation

It is import * as contentful from 'contentful' instead of import contentful from 'contentful' :)

We we're trying to use import { createClient} from 'contentful' rather than import * as contentful from 'contentful'. Unfortunately that does not work, but we'll use the import statement as mentioned in the document.

Using the import statement you provided, we also ran into an issue using npm run dev:

The requested module '/_nuxt/node_modules/process/browser.js' does not provide an export named 'default'

[axe312ger]

@larsdouweschuitema I checked our test repository, as we did test with nuxt as well!

Its based on the Nuxt 3 Minimal Starter with minimal adjustments:

Our versions:

    "nuxt": "^3.11.2",
    "vite": "^5.2.11",
    "vue": "^3.4.27",
    "vue-router": "^4.3.0"

Our app.vue:

<script setup>
import * as contentful from "contentful";

let result = "Loading...";
try {
  const client = contentful.createClient({
    space: `k8iqpp6u0ior`,
    accessToken: `hO_7N0bLaCJFbu5nL3QVekwNeB_TNtg6tOCB_9qzKUw`,
  });

  // Fetching data directly in the server component function.
  await client.getEntries();

  // Directly return the rendered component with the results.
  result = "✅ Success!";
} catch (err) {
  // Handling errors by returning a different UI or logging the error.
  console.error(`Error fetching entries: ${err.message}`);
  result = `🚫 Error: {err.message}`;
}
</script>

<template>
  <div id="loading-entries">{{result}}</div>
</template>

For me, thats the same as you tried. Same version number as well.

So, lets try:

When you import like this: import * as contentful from "contentful"; can you please give me the output of console.dir(contentful, {depth: null})?

Thanks!

[axe312ger]

Ohh and @larsdouweschuitema, this error:

The requested module '/_nuxt/node_modules/process/browser.js' does not provide an export named 'default'

This is from your bundler. I dont know if you use Nuxt with webpack or vite. In case of webpack, you need to adjust your webpack config as mentioned here: #2318 (comment)

[larsdouweschuitema]

@larsdouweschuitema I checked our test repository, as we did test with nuxt as well!

Its based on the Nuxt 3 Minimal Starter with minimal adjustments:

Our versions:

    "nuxt": "^3.11.2",
    "vite": "^5.2.11",
    "vue": "^3.4.27",
    "vue-router": "^4.3.0"

Our app.vue:

<script setup>
import * as contentful from "contentful";

let result = "Loading...";
try {
  const client = contentful.createClient({
    space: `k8iqpp6u0ior`,
    accessToken: `hO_7N0bLaCJFbu5nL3QVekwNeB_TNtg6tOCB_9qzKUw`,
  });

  // Fetching data directly in the server component function.
  await client.getEntries();

  // Directly return the rendered component with the results.
  result = "✅ Success!";
} catch (err) {
  // Handling errors by returning a different UI or logging the error.
  console.error(`Error fetching entries: ${err.message}`);
  result = `🚫 Error: {err.message}`;
}
</script>

<template>
  <div id="loading-entries">{{result}}</div>
</template>

For me, thats the same as you tried. Same version number as well.

So, lets try:

When you import like this: import * as contentful from "contentful"; can you please give me the output of console.dir(contentful, {depth: null})?

Thanks!

@larsdouweschuitema I checked our test repository, as we did test with nuxt as well!

Its based on the Nuxt 3 Minimal Starter with minimal adjustments:

Our versions:

    "nuxt": "^3.11.2",
    "vite": "^5.2.11",
    "vue": "^3.4.27",
    "vue-router": "^4.3.0"

Our app.vue:

<script setup>
import * as contentful from "contentful";

let result = "Loading...";
try {
  const client = contentful.createClient({
    space: `k8iqpp6u0ior`,
    accessToken: `hO_7N0bLaCJFbu5nL3QVekwNeB_TNtg6tOCB_9qzKUw`,
  });

  // Fetching data directly in the server component function.
  await client.getEntries();

  // Directly return the rendered component with the results.
  result = "✅ Success!";
} catch (err) {
  // Handling errors by returning a different UI or logging the error.
  console.error(`Error fetching entries: ${err.message}`);
  result = `🚫 Error: {err.message}`;
}
</script>

<template>
  <div id="loading-entries">{{result}}</div>
</template>

For me, thats the same as you tried. Same version number as well.

So, lets try:

When you import like this: import * as contentful from "contentful"; can you please give me the output of console.dir(contentful, {depth: null})?

Thanks!

Hi thanks for getting back to us. Here is the output of the console.dir call using the import you requested.

Output:

[Module: null prototype] {
  createClient: [Function: createClient],
  createGlobalOptions: [Function: createGlobalOptions]
}

[larsdouweschuitema]

Ohh and @larsdouweschuitema, this error:

The requested module '/_nuxt/node_modules/process/browser.js' does not provide an export named 'default'

This is from your bundler. I dont know if you use Nuxt with webpack or vite. In case of webpack, you need to adjust your webpack config as mentioned here: #2318 (comment)

We use the default which is vite.