contentful / contentful.js

JavaScript library for Contentful's Delivery API (node & browser)
https://contentful.github.io/contentful.js
MIT License
1.18k stars 197 forks source link

using `createClient` throws a CommonJS warning in Angular #2122

Open romeguarin opened 8 months ago

romeguarin commented 8 months ago

Expected Behavior

Contentful package should be available as ES modules. Any objects imported from contentful should not throw a warning when building in Angular CLI.

Actual Behavior

When createClient is used, the Angular CLI throws a warning during build / start commands.

import { createClient } from 'contentful';
// or
import * as contentful from 'contentful';

warning from angular cli build (this is when installing contentful on a local angular library, imported by the app being built and started):

Warning: ...\dist\lib1\fesm2022\lib1.mjs depends on 'contentful'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Possible Workaround

Add contentful on angular.json's allowedCommonJsDependencies

Steps to Reproduce

  1. Create a workspace with a library and app using Angular CLI
  2. Install contentful, use it within the library.
  3. Initialize a contentful client using createClient from contentful, regardless of its configuration, inside a component's constructor.
  4. then add the component to the app such that it gets rendered in the starting page.
  5. build and run the app

Context

ESM modules is now the recommended approach instead of CommonJs

Environment

nathanlaingzigzag commented 6 months ago

Bump and relates to https://github.com/contentful/contentful.js/issues/2157

Techn1x commented 4 months ago

I verified the linked issue was resolved as of Contentful.js 10.9.0+ so I assume this one is too - though I cannot verify this angular specific issue myself, but I would assume this ticket could be closed now

msickpaler commented 1 month ago

I am having the same problem with astro.

astro: 4.12.2 node: 20.16.0 pnpm: 9.6.0 contentful: 10.13.1

import { createClient } from "contentful";

export const getStaticPaths = (async ({ paginate }) => {
  const client = createClient({
    space: "***",
    accessToken: "****",
    environment: "***",
  });
  return paginate([], { pageSize: 2 });
})
20:27:15 [ERROR] [vite] Named export 'createClient' not found. The requested module 'contentful' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'contentful';
const {createClient} = pkg;

  Stack trace:
    at /*****/node_modules/.pnpm/vite@5.3.5_@types+node@18.19.43/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:51736:15