SelectField - React Intl - Could not find intlobject

[JonYeb]

On your UI Kit we are running into issues with the Select Field Component .

We used the example code of the story book.
In the browser console we see the error:

Uncaught Error: [React Intl] Could not find required intl object. <IntlProvider> needs to exist in the component ancestry.

as well as:

The above error occurred in the <SelectInput> component

In the story book of said component, nothing is mentioned of needing to have this.
(We also have the same error with a few other input elements)

We tried different approaches but couldn’t get rid of the error.

The only peer dependencies needed according to the page is react, which we obviously have.

Dependencies from the package json:

"dependencies": {
    "@apollo/client": "3.5.7",
    "@commercetools-frontend/actions-global": "21.0.0",
    "@commercetools-frontend/application-components": "21.1.0",
    "@commercetools-frontend/application-shell": "21.1.0",
    "@commercetools-frontend/application-shell-connectors": "21.0.0",
    "@commercetools-frontend/assets": "21.0.0",
    "@commercetools-frontend/constants": "21.0.0",
    "@commercetools-frontend/eslint-config-mc-app": "21.0.0",
    "@commercetools-frontend/i18n": "21.1.0",
    "@commercetools-frontend/jest-preset-mc-app": "21.0.0",
    "@commercetools-frontend/mc-dev-authentication": "21.0.0",
    "@commercetools-frontend/mc-scripts": "21.0.1",
    "@commercetools-frontend/permissions": "21.0.0",
    "@commercetools-frontend/sdk": "21.1.0",
    "@commercetools-test-data/commons": "2.4.1",
    "@commercetools-test-data/core": "2.4.1",
    "@commercetools-uikit/async-select-field": "^14.0.2",
    "@commercetools-uikit/card": "^14.0.1",
    "@commercetools-uikit/collapsible-panel": "^13.0.4",
    "@commercetools-uikit/constraints": "^13.0.2",
    "@commercetools-uikit/data-table": "^13.0.2",
    "@commercetools-uikit/flat-button": "^13.0.2",
    "@commercetools-uikit/grid": "^12.2.9",
    "@commercetools-uikit/hooks": "^13.0.2",
    "@commercetools-uikit/icon-button": "^14.0.2",
    "@commercetools-uikit/icons": "^13.0.2",
    "@commercetools-uikit/link": "^13.0.2",
    "@commercetools-uikit/loading-spinner": "^13.0.2",
    "@commercetools-uikit/notifications": "^13.0.2",
    "@commercetools-uikit/pagination": "^13.0.3",
    "@commercetools-uikit/primary-button": "^13.0.4",
    "@commercetools-uikit/search-select-input": "^14.0.2",
    "@commercetools-uikit/select-field": "^14.0.2",
    "@commercetools-uikit/spacings": "^13.0.2",
    "@commercetools-uikit/text": "^13.0.2",
    "@formatjs/cli": "4.8.0",
    "@manypkg/cli": "0.19.1",
    "@testing-library/react": "12.1.2",
    "eslint": "8.7.0",
    "eslint-formatter-pretty": "4.1.0",
    "jest": "27.4.7",
    "jest-runner-eslint": "1.0.0",
    "jest-watch-typeahead": "1.0.0",
    "msw": "0.36.5",
    "prettier": "2.5.1",
    "prop-types": "15.8.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-intl": "5.24.3",
    "react-redux": "7.2.6",
    "react-router-dom": "5.3.0",
    "redux": "4.1.2"
  }

[CarlosCortizasCT]

Hello @JonYeb

Thanks for letting us know about this problem.

When you are using ui-kit components in a Custom Application, one of the components in the top of the tree is the ApplicationShell one. Among other things, that component configures the IntlProvider which some ui-kit components consume so you don't have to worry about it.

However, we've seen this message also when there are different versions of react-intl in your dependencies (see #2158).
This is something you can check running this yarn command in your root directory:

yarn why react-intl

After reviewing your package.json dependencies, I can see the ui-kit components versions you have defined would use version 5.24.8 version of react-intl, but there is a fixed version for that dependency in your package.json for 5.24.3.

Could you try updating your package.json to also use the 5.24.8 version?
(or use a more flexible version like ^5.24.3)

[JonYeb]

Hi @CarlosCortizasCT
Thanks for the help, but just updating the react-intl dependency did not help.
Instead updating it with all the other commerce tools dependencies.

So for other people having the same issue:
Updated the 21.x versions to 21.3.x and
the 12.x & 13.x versions to 14.x

[jtabone16]

@JonYeb got an example of your package.json? still seeing this issue after updating

[JonYeb]

@jtabone16 sure. Down here are my current dependencies. And like I said, for me it helped updating ui kit dependencies to 14.x and some other commerce tools stuff to 21.3 if you compare the version now to the one I initially posted.

  "dependencies": {
    "@apollo/client": "3.5.7",
    "@commercetools-frontend/actions-global": "21.3.0",
    "@commercetools-frontend/application-components": "21.3.2",
    "@commercetools-frontend/application-shell": "21.3.2",
    "@commercetools-frontend/application-shell-connectors": "21.3.0",
    "@commercetools-frontend/assets": "21.0.0",
    "@commercetools-frontend/constants": "21.3.0",
    "@commercetools-frontend/eslint-config-mc-app": "21.3.1",
    "@commercetools-frontend/i18n": "21.3.0",
    "@commercetools-frontend/jest-preset-mc-app": "21.3.2",
    "@commercetools-frontend/mc-dev-authentication": "21.0.0",
    "@commercetools-frontend/mc-scripts": "21.3.2",
    "@commercetools-frontend/permissions": "21.3.0",
    "@commercetools-frontend/sdk": "21.3.0",
    "@commercetools-test-data/commons": "2.4.1",
    "@commercetools-test-data/core": "2.4.1",
    "@commercetools-uikit/card": "^14.0.1",
    "@commercetools-uikit/collapsible-panel": "^13.0.4",
    "@commercetools-uikit/constraints": "^14.0.1",
    "@commercetools-uikit/data-table": "^14.0.3",
    "@commercetools-uikit/flat-button": "^14.0.2",
    "@commercetools-uikit/grid": "^14.0.0",
    "@commercetools-uikit/hooks": "^13.0.2",
    "@commercetools-uikit/icon-button": "^14.0.2",
    "@commercetools-uikit/icons": "^14.0.1",
    "@commercetools-uikit/link": "^14.0.1",
    "@commercetools-uikit/loading-spinner": "^14.0.1",
    "@commercetools-uikit/notifications": "^14.0.1",
    "@commercetools-uikit/pagination": "^14.0.2",
    "@commercetools-uikit/primary-button": "^13.0.4",
    "@commercetools-uikit/select-field": "^14.0.2",
    "@commercetools-uikit/spacings": "^14.0.1",
    "@commercetools-uikit/text": "^14.0.1",
    "@formatjs/cli": "4.8.0",
    "@manypkg/cli": "0.19.1",
    "@testing-library/react": "12.1.2",
    "eslint": "8.7.0",
    "eslint-formatter-pretty": "4.1.0",
    "jest": "27.4.7",
    "jest-runner-eslint": "1.0.0",
    "jest-watch-typeahead": "1.0.0",
    "msw": "0.36.5",
    "prettier": "2.5.1",
    "prop-types": "15.8.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-intl": "5.24.8",
    "react-redux": "7.2.6",
    "react-router-dom": "5.3.0",
    "redux": "4.1.2"
  }