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'