CONSOLE ERRORS

[DiLiUA]

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?

[dreysolano]

I'm seeing these errors as well, but supposedly the "user-agent" error was fixed back in 2016: https://github.com/contentful/contentful.js/issues/56

Any plans to resolve this?

[marcolink]

Hi @DmitriyLitvinov @dreysolano, this has been addressed lately. Please update your dependency to >= v8.5.7

[dreysolano]

@marcolink - I just upgraded to [email protected] and I'm still seeing these 2 errors in the console.

[robertsine]

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

[dipsaus9]

Any updates on this?

[dreysolano]

@marcolink - It's been 5 months since I last commented on this, and I'm still seeing these 2 errors even after upgrading to the latest v9.1.10. Any plans to resolve these errors?

I'm a bit confused as to why this hasn't been resolved somewhere in the last 16 releases since v8.5.7. Please advise.

[GilFewster]

Same issue here with v9.1.10

[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.

[dreysolano]

@ankhuve - injecting the browser property on process as you described did the trick for us. Thank you for taking the time to dig into this!

[tplante]

This took some digging to find, but the Contentful JS SDK also distributes a version built for browsers (at least in v9+), otherwise it is assumed to be running in node. Importing createClient from the browser version resolved the header errors for me:

// ❌ 
import { createClient } from 'contentful'

// ✅ 
import { createClient } from 'contentful/dist/contentful.browser.min.js'

I actually found this solution because the docs say you can use the CDN version of the package available at this path, then I checked my node modules and the minified browser version is also available there 🤷

[mayakarabula]

This ticket has been closed due to inactivity. If you still need help resolving your issue, please reach out through our community Slack, or contact Contentful support directly.