Contentful API seems to miss some dependencies
tamsler-valtech opened this issue · comments
I'm trying to get this tutorial working with the nuxt-composition-api and vite: https://www.contentful.com/developers/docs/javascript/tutorials/integrate-contentful-with-vue-and-nuxt/
The build, which seems to use webpack and not vite, works, but the dev mode with Vite has runtime errors in the contentful API. I assume Vite does not provide some internal dependency of contentful.
Versions
nuxt-vite: ^0.1.1
nuxt: ^2.15.3
Reproduction
Here the script part of my modified index.vue from the tutorial, the types were generated with contentful-typescript-codegen
and the useContentful is below.
<script lang="ts">
import { defineComponent, useAsync, useContext } from '@nuxtjs/composition-api';
import useContentful from '~/plugins/contentful';
import { IBlogPost, IPerson } from '~/types/generated/contentful';
const CTF_PERSON_ID = '15jwOBqpxqSAOy2eOO4S0m';
const CTF_BLOG_POST_TYPE_ID = 'blogPost';
export default defineComponent({
setup() {
const { env } = useContext();
const { client } = useContentful(env);
const person = useAsync(() => client.getEntry<IPerson>(CTF_PERSON_ID));
const posts = useAsync(() => {
return client.getEntries<IBlogPost>({
content_type: CTF_BLOG_POST_TYPE_ID,
order: '-sys.createdAt',
});
});
return {
person,
posts,
};
},
});
</script>
import {
ContentfulClientApi,
CreateClientParams,
createClient,
} from 'contentful';
export interface UseContentfulType {
client: ContentfulClientApi;
}
export default function useContentful(
env: Record<string, any>
): UseContentfulType {
const config: CreateClientParams = {
space: env.CTF_SPACE_ID || '',
accessToken: env.CTF_CDA_ACCESS_TOKEN || '',
};
const client = createClient(config);
return {
client,
};
}
Description
On runtime I get the following error:
entry.js:118 Uncaught (in promise) TypeError: (0 , _fastCopy.default) is not a function
at wrapEntryCollection (entry.js:118)
at Object.getEntries (create-contentful-api.js:243)
So it seems some internal functions of the contentful client aren't loaded with Vite. I read somewhere that you'll also need to import contentful-management
, but this is not described in the tutorial and when you build it with webpack the API works as it should.