Getting react-intl errors when trying to use DateTimeField

[jtabone16]

Even if I hard code the timeZone string (instead of determining current user's timezone) for DateTimeField, I'm seeing this error:

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

Isn't the create-mc-app starter template already wrapped by IntlProvider?

[CarlosCortizasCT]

Hello @jtabone16,

Thanks for your report.

This could happen when you have different versions of react-intl dependency within your project.

IntlProvider is configured from the ApplicationShell component which probably is used in your entry-point component. Maybe the version ApplicationShell component is using is different from the one used by your DateTimeField.

Could you provide which versions of both packages are you using?

• @commercetools-frontend/application-shell
• @commercetools-uikit/date-time-field

You could also try this yarn command (from your project root directory) which displays all react-intl versions used so you can check if there are different ones:

yarn why react-intl

Thanks.

[jtabone16]

@CarlosCortizasCT I saw your response in #2167 and still can't get this working. This time I'm seeing the issue when trying to use MoneyField

Using yarn why react-intl shows only v5.25.0 is being used:

"dependencies": {
    "@apollo/client": "^3.5.6",
    "@commercetools-frontend/actions-global": "21.3.4",
    "@commercetools-frontend/application-components": "21.3.5",
    "@commercetools-frontend/application-shell": "21.3.5",
    "@commercetools-frontend/application-shell-connectors": "21.3.4",
    "@commercetools-frontend/assets": "21.0.0",
    "@commercetools-frontend/constants": "21.3.4",
    "@commercetools-frontend/eslint-config-mc-app": "21.3.4",
    "@commercetools-frontend/i18n": "21.3.4",
    "@commercetools-frontend/jest-preset-mc-app": "21.3.4",
    "@commercetools-frontend/mc-dev-authentication": ">=21",
    "@commercetools-frontend/mc-scripts": "21.3.4",
    "@commercetools-frontend/permissions": "21.3.4",
    "@commercetools-frontend/sdk": "21.3.4",
    "@commercetools-test-data/commons": "2.4.1",
    "@commercetools-test-data/core": "2.4.1",
    "@commercetools-uikit/constraints": "^14.0.1",
    "@commercetools-uikit/data-table": "^14.0.6",
    "@commercetools-uikit/date-field": "^14.0.6",
    "@commercetools-uikit/flat-button": "^14.0.6",
    "@commercetools-uikit/grid": "^14.0.0",
    "@commercetools-uikit/hooks": "^14.0.3",
    "@commercetools-uikit/icons": "^14.0.1",
    "@commercetools-uikit/link": "^14.0.6",
    "@commercetools-uikit/loading-spinner": "^14.0.6",
    "@commercetools-uikit/money-field": "^14.0.6",
    "@commercetools-uikit/multiline-text-field": "^14.0.6",
    "@commercetools-uikit/notifications": "^14.0.1",
    "@commercetools-uikit/number-field": "^14.0.6",
    "@commercetools-uikit/number-input": "^14.0.6",
    "@commercetools-uikit/pagination": "^14.0.6",
    "@commercetools-uikit/primary-button": "^14.0.6",
    "@commercetools-uikit/select-field": "^14.0.6",
    "@commercetools-uikit/spacings": "^14.0.6",
    "@commercetools-uikit/text": "^14.0.1",
    "@commercetools-uikit/text-field": "^14.0.6",
    "@formatjs/cli": "4.8.0",
    "@manypkg/cli": "0.19.1",
    "@testing-library/react": "12.1.2",
    "apollo-codegen": "^0.20.2",
    "eslint": "8.7.0",
    "eslint-formatter-pretty": "4.1.0",
    "graphql": "^16.3.0",
    "jest": "^27.4.3",
    "jest-runner-eslint": "0.11.1",
    "jest-watch-typeahead": "1.0.0",
    "msw": "0.36.1",
    "prettier": "2.5.1",
    "prop-types": "15.7.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-intl": "^5.24.6",
    "react-redux": "7.2.6",
    "react-router-dom": "5.3.0",
    "redux": "4.1.2"
  }

[emmenko]

@jtabone16 Hi, these kind of dependency issues unfortunately occur from time to time.

Usually what helps (from our experience) is checking the installed versions with yarn why (like you did), trying forcing yarn install the dependencies to their latest version range with yarn upgrade react-intl (or yarn up -R react-intl when using yarn v3). Otherwise using yarn resolutions can also help. If still the issue persists, you can try removing node_modules and yarn.lock and re-install everything.

Hope this helps.