CONSOLE ERRORS

I’m using contentful with the latest Angular version 10.0.5 and I have errors in the dev console.

environment.ts

...
 contentful: {
    space: 'MY_SPACE',
    accessToken: 'MY_TOKEN',
  }

contentful.service.ts

@Injectable({
  providedIn: 'root'
})
export class ContentfulService {
  private cdaClient = createClient(environment.contentful);

  constructor(private localStorageService: LocalStorageService) {
  }

  private getNewsList(query?: ContentfulQuery): Promise<Entry<ContNewsFieldItem>[]> {
    return this.cdaClient.getEntries<ContNewsFieldItem>(Object.assign({
      content_type: 'SOME_CONTENT_TYPE'
    }, query))
      .then((res: EntryCollection<ContNewsFieldItem>) => res.items);
  }
...

Each time when I call contentfulService.getNewsList({limit: 6}) I get a list of news but in the dev console I see 2 errors:

xhr.js:126 Refused to set unsafe header "user-agent"
xhr.js:126 Refused to set unsafe header "Accept-Encoding"

How can I fix it or it’s your bug?

[ankhuve]

Experiencing the same issue with v9.1.12. I dug into the stack trace and found out that the reason I’m getting this message is because of Contentful’s isNode function:

function isNode() {
  /**
   * Polyfills of 'process' might set process.browser === true
   *
   * See:
   * https://github.com/webpack/node-libs-browser/blob/master/mock/process.js#L8
   * https://github.com/defunctzombie/node-process/blob/master/browser.js#L156
   **/
  return typeof process !== 'undefined' && !process.browser;
}

When this function evaluates to true, the user-agent and Accept-Enconding headers are set.

Normally, this shouldn’t be a problem, however in edge cases you might have your client side JS polyfilled to use node-only packages. For my case, it’s because we’re using aws-amplify which unfortunately requires node packages. If using a bundler like Vite which doesn’t automatically polyfill these things, you have to add the process global variable into your code, for instance with something like:

<script>
    // Need this for aws-amplify to not throw errors
    // https://github.com/aws-amplify/amplify-js/issues/7499#issuecomment-804386820
    const isBrowser = () => typeof window !== 'undefined';
    const isGlobal = () => typeof global !== 'undefined';
    var exports = {};
    if (!isGlobal() && isBrowser()) {
        var global = window;
        var process = process || {
            env: { DEBUG: undefined },
            version: [],
            // browser property added because Contentful thinks it's running in a node environment otherwise
            browser: true,
        };
    }
</script>

The issue was solved on my end by adding the browser: true line, since the isNode function looks for it in order to decide if it’s running in a browser or node.

Hopefully this helps someone, and perhaps it’s a good thing to put into the docs for cases where you’re using polyfilled client side code.

[robertsine]

Updating contentful to latest version didn’t help. Also seeing these errors.