using `createClient` throws a CommonJS warning in Angular

[romeguarin]

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

• Language Version: node v16.19.0
• Package Manager Version: npm 8.19.3
• Package Version: contentful 10.6.16

[nathanlaingzigzag]

Bump and relates to #2157

[Techn1x]

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]

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

[axe312ger]

Issues like this should be resolved with our latest SDK version (v11).

Can you please test if this new version works for your setup? Kenya Hayashi (@msickpaler) nathanlaingzigzag Jerome Guarin (@romeguarin)

[romeguarin]

hi Benedikt Rötsch (@axe312ger)

I've tried to use version 11.5.20, the building warning I've initially reported disappeared.

However, more warnings were added:

---

▲ [WARNING] Module 'json-stringify-safe' used by 'node_modules/contentful/dist/esm/index.js' is not ESM

CommonJS or AMD dependencies can cause optimization bailouts.
For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'lodash/isPlainObject.js' used by 'node_modules/contentful-sdk-core/dist/error-handler.js' is not ESM

CommonJS or AMD dependencies can cause optimization bailouts.
For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'qs' used by 'node_modules/contentful-sdk-core/dist/create-default-options.js' is not ESM

CommonJS or AMD dependencies can cause optimization bailouts.
For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'lodash/isString.js' used by 'node_modules/contentful-sdk-core/dist/rate-limit-throttle.js' is not ESM

CommonJS or AMD dependencies can cause optimization bailouts.
For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'form-data' used by 'node_modules/axios/lib/platform/node/classes/FormData.js' is not ESM

CommonJS or AMD dependencies can cause optimization bailouts.
For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'proxy-from-env' used by 'node_modules/axios/lib/adapters/http.js' is not ESM

CommonJS or AMD dependencies can cause optimization bailouts.
For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'follow-redirects' used by 'node_modules/axios/lib/adapters/http.js' is not ESM

CommonJS or AMD dependencies can cause optimization bailouts.
For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

the warning came from contentful's dependencies.