Contentful.js doesn't work with Nuxt3
See original GitHub issueExpected 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
-
Create an entry with a “title” field in Contentful.
-
Create a project using Nuxt3:
npx nuxi init nuxt-app
cd nuxt-app
-
Install Contentful.js
npm install contentful -D
-
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);
});
- 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>
- Run
npm run dev
and see that the title appears as expected. - Run
npm run build
, thennpm 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.1
Darwin *** 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
Issue Analytics
- State:
- Created a year ago
- Reactions:7
- Comments:11 (2 by maintainers)
Top Results From Across the Web
Integrate Contentful with Nuxt.js
This guide will show you how to integrate Contentful in a Nuxt.js application | Setting up the content model using the Contentful CLI....
Read more >Contentful API throws runtime error in combination with nuxt ...
The problem comes when the response is processed by contentful: ... getEntries (create-contentful-api.js:243) at async Object.
Read more >Tech blog starter-kit with vue3, nuxt3 and Contentful
Set up Contentful Content model setting example in this project. Tag setting example in in this project.
Read more >Contentful and Nuxt - YouTube
Debbie O'Brien (https://twitter.com/debs_obrien) joins our weekly livestreams to showcase Nuxt. js. She teaches Shy about how to take ...
Read more >Static and serverless with Vue.js, Nuxt.js, Vuex, Contentful ...
Our route will now work but won't display anything. Let's configure this page with Vue and flow the data down into this template...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
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.