Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getting react-intl errors when trying to use DateTimeField #2158

Open
jtabone16 opened this issue Mar 28, 2022 · 3 comments
Open

Getting react-intl errors when trying to use DateTimeField #2158

jtabone16 opened this issue Mar 28, 2022 · 3 comments
Labels

Comments

@jtabone16
Copy link

jtabone16 commented Mar 28, 2022

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
Copy link
Contributor

CarlosCortizasCT commented Mar 29, 2022

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
Copy link
Author

jtabone16 commented Apr 21, 2022

@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:

Screen Shot 2022-04-20 at 6 33 58 PM

"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
Copy link
Member

emmenko commented Apr 21, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants