contentful.js icon indicating copy to clipboard operation
contentful.js copied to clipboard

using `createClient` throws a CommonJS warning in Angular

Open romeguarin opened this issue 2 years ago • 5 comments

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

romeguarin avatar Jan 12 '24 04:01 romeguarin

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

nathanlaingzigzag avatar Mar 15 '24 19:03 nathanlaingzigzag

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

Techn1x avatar May 03 '24 03:05 Techn1x

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/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:51736:15

msickpaler avatar Aug 05 '24 11:08 msickpaler