nuxt / vite

⚡ Vite Experience with Nuxt 2

Home Page:https://vite.nuxtjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.