Component breaks when upgrading from 6.3.3 to 6.3.4

[jrewing]

Hi!

I am working on a quite big project that had been neglected a bit regarding package upgrades since 2018!!!. I have managed to upgrade to React 17.0.2 and most other packages are fairly new. This hasn´t been easy.

When I try to upgrade react-final-form to comply with React 17 one of my modules break. Specifically it fails to load some dynamic buttons.

There are no errors and I can´t really figure out where exactly it fails. (I still don´t quite understand all the code in this project)

It has something to do with "steps" not being loaded. It renders the component three times, then stops instead of rendering and loading the "steps".

Does anyone have an idea about what the issue could be?

I paste the code for the module below, although I can´t see any direct relation to react-final-form

import PropTypes from 'prop-types'
import React, { useEffect } from 'react'
import { useMutation } from 'react-query'
import { get, isEmpty, map } from 'lodash'
import styled from 'styled-components'

import { api } from '../../../../api'
import { sortBySequence } from '../../../../utils'
import { Truncated } from '../../../Truncated'
import { FormField } from '../../FormField'

const StyledButton = styled.button`
  font-size: ${({ theme }) => theme.styles.workflow.buttons.fontsize};
  line-height: ${({ theme }) => theme.styles.workflow.buttons.lineheight};
  font-weight: ${({ theme }) => theme.styles.workflow.buttons.fontweight};
  letter-spacing: ${({ theme }) => theme.styles.workflow.buttons.letterspacing};
  border-radius: ${({ theme }) =>
    theme.styles.workflow.buttons.style.borderradius};
  padding: ${({ theme }) => theme.styles.workflow.buttons.style.padding};

  background-color: ${({ theme }) => theme.styles.workflow.buttons.bgcolor};
  border: 1px solid ${({ theme }) => theme.styles.workflow.buttons.bgcolor};
  color: ${({ theme }) => theme.styles.workflow.buttons.textcolor};
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover:not(:disabled),
  &:focus {
    color: ${({ theme }) => theme.styles.workflow.buttons.bgcolor};
    background-color: ${({ theme }) => theme.styles.workflow.buttons.textcolor};
  }
`

const Buttons = styled.div`
  position: static;
  justify-content: center;
  align-content: space-between;
  column-gap: 12px;
  margin-top: 24px;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;

  > button {
    flex-grow: 0;
    margin-bottom: 5px;
  }
`

export const WorkflowSteps = (props) => {
  const {
    id,
    setStep,
    disabled,
    path,
    formData,
    parentType,
    templateId,
    articleData,
  } = props
  const { mutate: getSteps, data, loading } = useMutation(api.evaluateMeasure)

  useEffect(() => {
    const article = get(formData, `values.${path}`) || articleData
    if (id && !isEmpty(article) && parentType && templateId) {
      getSteps({ article, parentType, templateId })
    }
  }, [id])

  const steps = (data || []).filter((d) => !isEmpty(d)).sort(sortBySequence)

  if (loading || isEmpty(steps)) return null

  return (
    <FormField as={Buttons} data-testid="workflow-steps">
      {map(steps, (step) => (
        <StyledButton
          key={step.id}
          type="button"
          onClick={() => setStep(step)}
          disabled={disabled}
        >
          <Truncated line={2} title={get(step, 'functionname')}>
            {get(step, 'functionname')}
          </Truncated>
        </StyledButton>
      ))}
    </FormField>
  )
}

WorkflowSteps.propTypes = {
  id: PropTypes.string.isRequired,
  setStep: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
  path: PropTypes.string,
  formData: PropTypes.shape({}),
  parentType: PropTypes.string,
  templateId: PropTypes.string,
  articleData: PropTypes.shape({}),
}

WorkflowSteps.defaultProps = {
  disabled: false,
  path: undefined,
  formData: {},
  parentType: undefined,
  templateId: undefined,
  articleData: {},
}

[jrewing]

Here is my package.json

{ "dependencies": { "@azure/msal-browser": "2.12.0", "@babel/runtime": "^7.17.9", "@chakra-ui/react": "^1.8.8", "@ctrl/tinycolor": "^3.4.1", "@emotion/styled": "^11.10.0", "@juggle/resize-observer": "^3.3.1", "@loadable/component": "^5.15.2", "@microsoft/applicationinsights-react-js": "2.3.1", "@microsoft/applicationinsights-web": "2.3.1", "@testing-library/cypress": "7.0.3", "auth0-js": "9.19.0", "axios": "^0.21.4", "axios-cache-adapter": "^2.7.3", "axios-extensions": "^3.1.3", "axios-retry": "^3.2.5", "bootstrap": "^4.6.0", "classnames": "^2.3.1", "date-fns": "^2.28.0", "deep-object-diff": "^1.1.7", "file-saver": "^2.0.5", "final-form": "4.18.2", "final-form-focus": "1.1.2", "framer-motion": "6.5.1", "history": "4.7.2", "jest": "26.4.2", "jest-cli": "26.4.2", "jest-junit": "11.1.0", "localforage": "^1.10.0", "lodash": "^4.17.21", "moment": "^2.29.3", "moment-timezone": "^0.5.34", "npm-run-all": "^4.1.5", "path-to-regexp": "3.0.0", "prop-types": "^15.8.1", "puppeteer": "3.0.2", "query-string": "5.1.1", "rc-menu": "^9.5.5", "react": "^17.0.2", "react-animate-height": "^2.1.2", "react-bootstrap": "^1.6.4", "react-custom-scrollbars-2": "4.5.0", "react-datepicker": "3.8.0", "react-dom": "^17.0.2", "react-dropzone": "^12.0.5", "react-error-boundary": "^3.1.4", "react-final-form": "6.3.4", "react-final-form-listeners": "^1.0.3", "react-fontawesome": "^1.7.1", "react-helmet": "^6.1.0", "react-icons": "^4.3.1", "react-infinite-scroller": "^1.2.6", "react-intl": "^5.25.1", "react-number-format": "^4.9.3", "react-query": "^3.39.0", "react-router-dom": "^5.1.2", "react-select": "^5.3.1", "react-spring": "^9.4.5", "react-teleporter": "^2.2.1", "react-textarea-autosize": "8.3.3", "react-use-measure": "^2.1.1", "reselect": "^4.1.5", "source-map-loader": "0.2.3", "styled-components": "^5.3.5", "webfontloader": "^1.6.28" }, "devDependencies": { "@babel/cli": "7.17.6", "@babel/core": "^7.17.9", "@babel/eslint-parser": "^7.17.0", "@babel/plugin-proposal-class-properties": "7.16.7", "@babel/plugin-proposal-decorators": "^7.17.9", "@babel/plugin-proposal-object-rest-spread": "7.17.3", "@babel/plugin-proposal-optional-chaining": "7.16.7", "@babel/plugin-transform-runtime": "7.17.0", "@babel/preset-env": "7.16.11", "@babel/preset-react": "7.16.7", "@babel/register": "7.17.7", "@cypress/code-coverage": "^3.9.12", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "11.2.5", "@testing-library/react-hooks": "5.0.3", "@testing-library/user-event": "12.6.3", "@types/react": "^17.0.39", "@types/styled-components": "^5.1.1", "babel-jest": "^28.0.0", "babel-loader": "^8.2.5", "babel-plugin-lodash": "3.3.4", "babel-plugin-module-resolver": "^4.1.0", "babel-plugin-react-intl": "^3.0.1", "babel-plugin-styled-components": "^2.0.7", "babel-plugin-syntax-dynamic-import": "6.18.0", "compression-webpack-plugin": "^9.2.0", "copy-webpack-plugin": "^10.2", "cross-env": "6.0.3", "css-loader": "^6.7.1", "cypress": "5.0.0", "cypress-file-upload": "4.1.1", "dotenv": "8.0.0", "eslint": "^8.15.0", "eslint-config-airbnb": "19.0.4", "eslint-config-prettier": "8.5.0", "eslint-import-resolver-babel-module": "5.3.1", "eslint-plugin-import": "2.26.0", "eslint-plugin-json": "3.1.0", "eslint-plugin-jsx-a11y": "6.5.1", "eslint-plugin-prettier": "4.0.0", "eslint-plugin-react": "7.29.4", "file-loader": "5.1.0", "glob": "7.1.6", "html-webpack-plugin": "^5.5.0", "husky": "4.2.3", "jest-styled-components": "^7.0.8", "lint-staged": "^12.4.0", "mkdirp": "1.0.4", "moment-timezone-data-webpack-plugin": "^1.5.0", "mutationobserver-shim": "0.3.7", "nyc": "^15.1.0", "prettier": "2.6.2", "react-select-event": "4.1.4", "react-test-renderer": "^17.0.2", "style-loader": "0.23.1", "to-string-loader": "1.1.5", "ts-jest": "^26.4.2", "ts-loader": "^8.3.0", "typescript": "^4.5.5", "webpack": "^5.1.0", "webpack-bundle-analyzer": "4.5.0", "webpack-cli": "4.9.2", "webpack-dev-server": "4.8.1", "webpack-merge": "5.8.0" }, "browserslist": [ "last 3 versions" ], "lint-staged": { "*.{js,jsx,css,json,md}": [ "prettier --write" ] }, "engines": { "node": ">=16.14" }, "jest-junit": { "suiteName": "jest tests", "output": "test/junit.xml", "classNameTemplate": "{classname} - {title}", "titleTemplate": "{classname} - {title}", "ancestorSeparator": " > ", "usePathForSuiteName": "true" }, "husky": { "hooks": { "pre-commit": "lint-staged", "pre-push": "npm run lint && npm run test" } }, "nyc": { "all": true, "exclude": [ "**/IntegrationTestsArtifacts/**" ] }

[jrewing]

I believe it might have to do with the new 'data' attribute and that somehow overwrites our 'data' attribute in Field.

[gertdreyer]

@jrewing Please provide a CodeSandbox demonstrating the issue.

[jrewing]

Thank you for replying. Some time has passed though and I am not sure how releveant this is anymore, I will look into it.

[jrewing]

Creating a code sandbox would be very hard. Like I described, this is complicated and brittle legacy code.