2025.06 upgrade - code errors related to a12 and refs

itzhak-broad-chasm · July 31, 2025, 7:23am

I updated all the dependencies, node, npm, typescript, and changed the output to ES2024.
side note: stylus atm is marked as security prone and therefore is no available.
our package.json looks like this now:

 "dependencies": {
    "@com.mgmtp.a12.antlrcodeeditor/antlrcodeeditor-build-tool": "~5.1.0",
    "@com.mgmtp.a12.antlrcodeeditor/antlrcodeeditor-core": "~5.0.0",
    "@com.mgmtp.a12.base/base-model-api": "~29.0.0",
    "@com.mgmtp.a12.client/client-core": "~16.0.0",
    "@com.mgmtp.a12.crud/crud-core": "~2.0.0",
    "@com.mgmtp.a12.dataservices/dataservices-access": "38.0.0",
    "@com.mgmtp.a12.expression/expression-core": "~2.0.1",
    "@com.mgmtp.a12.formengine/formengine-core": "~38.0.0",
    "@com.mgmtp.a12.kernel/kernel-core-runtime-api-ts": "~30.1.0",
    "@com.mgmtp.a12.kernel/kernel-md-facade": "~30.1.0",
    "@com.mgmtp.a12.overviewengine/overviewengine-core": "~38.0.0",
    "@com.mgmtp.a12.uaa/uaa-authentication-client": "~9.0.2",
    "@com.mgmtp.a12.utils/utils-collections": "~6.0.0",
    "@com.mgmtp.a12.utils/utils-connector": "~8.0.1",
    "@com.mgmtp.a12.utils/utils-localization": "~7.0.0",
    "@com.mgmtp.a12.utils/utils-localization-react": "~7.0.0",
    "@com.mgmtp.a12.utils/utils-logging": "~6.0.0",
    "@com.mgmtp.a12.widgets/widgets-core": "~38.0.0",
    "@com.mgmtp.a12.widgets/widgets-styles": "^33.2.2",
    "@monaco-editor/react": "^4.6.0",
    "acorn": "^8.12.1",
    "antlr4": "^4.13.2",
    "fuse.js": "^7.0.0",
    "immer": "^10.1.1",
    "lodash": "^4.17.21",
    "moment": "^2.30.1",
    "moment-timezone": "^0.5.45",
    "monaco-editor": "^0.33.0",
    "react": "^19.1.1",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^19.1.1",
    "react-moment": "^1.1.3",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-saga": "^1.3.0",
    "reselect": "^5.1.1",
    "styled-components": "^6.1.19",
    "typed-redux-saga": "^1.5.0",
    "typescript-fsa": "^3.0.0"
  },
  "overrides": {
    "react": "$react",
    "react-redux": "$react-redux",
    "@com.mgmtp.a12.client/client-core": {
      "react-redux": "$react-redux"
    }
  },
  "devDependencies": {
    "@com.mgmtp.a12.devtools/devtools": "^10.1.1",
    "@com.mgmtp.a12.devtools/eslint-config": "^0.7.0",
    "@cyclonedx/cyclonedx-npm": "^1.19.3",
    "@playwright/test": "1.52.0",
    "@types/chai": "^4.3.17",
    "@types/deep-equal": "^1.0.4",
    "@types/inquirer": "^9.0.7",
    "@types/jsdom": "^21.1.7",
    "@types/lodash": "^4.17.7",
    "@types/mocha": "^10.0.7",
    "@types/node": "^20.12.12",
    "@types/react": "^19.1.9",
    "@types/react-dom": "^19.1.7",
    "@types/react-redux": "^7.1.34",
    "@types/sinon": "^17.0.3",
    "@types/sinon-chai": "^3.2.12",
    "@types/styled-components": "^5.1.34",
    "@types/uuid": "^3.4.10",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/eslint-plugin-tslint": "^7.0.2",
    "@typescript-eslint/parser": "^7.0.0",
    "autoprefixer": "^10.4.20",
    "chai": "^4.5.0",
    "chokidar": "^3.6.0",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^12.0.2",
    "core-js": "^3.38.0",
    "cross-env": "^7.0.3",
    "cross-spawn": "^7.0.3",
    "css-loader": "^7.1.2",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-deprecation": "^3.0.0",
    "eslint-plugin-import": "^2.30.0",
    "eslint-plugin-playwright": "^1.6.2",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.36.1",
    "eslint-plugin-react-hooks": "^4.6.2",
    "fork-ts-checker-webpack-plugin": "^9.0.2",
    "global-jsdom": "^24.0.0",
    "html-webpack-plugin": "^5.6.0",
    "ignore-styles": "^5.0.1",
    "inquirer": "^10.1.8",
    "jsdom": "^24.1.1",
    "jsdom-global": "^3.0.2",
    "mini-css-extract-plugin": "^2.9.1",
    "mocha": "^10.7.3",
    "postcss": "^8.4.41",
    "postcss-loader": "^8.1.1",
    "postcss-styled-syntax": "^0.6.4",
    "prettier": "^3.3.3",
    "redux-saga-test-plan": "^4.0.6",
    "run-script-os": "^1.1.6",
    "semver": "^7.6.3",
    "sinon": "^18.0.0",
    "sinon-chai": "^3.7.0",
    "source-map-support": "^0.5.21",
    "style-loader": "^4.0.0",
    "stylelint": "^16.9.0",
    "stylelint-config-recommended": "^14.0.1",
    "stylus": "github:stylus/stylus#0.64.0",
    "stylus-loader": "^8.1.1",
    "ts-loader": "^9.5.1",
    "ts-node": "^10.9.2",
    "tsconfig-paths": "^4.2.0",
    "tslint": "^6.1.3",
    "typescript": "^5.8.2",
    "typescript-plugin-css-modules": "^5.1.0",
    "uuid": "^10.0.0",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4",
    "webpack-merge": "^6.0.1"
  },

after running all the different codemods from react and fixing some code manually, Im left with 2 issues:

react-dnd refs: when using refs from react-dnd, it shows a type error which I still didn’t find how to fix.

ERROR in ./src/components/wysiwyg/iframe/select/toolbar/menu/item/item.tsx:59:4
TS2769: No overload matches this call.
  Overload 1 of 2, '(props: PolymorphicComponentProps<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, { isDisabled: boolean; isActive?: boolean | undefined; isDraggable: boolean; }>, void, void, {}, {}>): Element', gave the following error.
    Type 'DragElementWrapper<DragSourceOptions> | undefined' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
      Type 'DragElementWrapper<DragSourceOptions>' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
        Type 'DragElementWrapper<DragSourceOptions>' is not assignable to type '(instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly)'.
          Type 'ReactElement<unknown, string | JSXElementConstructor<any>> | null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.
            Type 'null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.
  Overload 2 of 2, '(props: Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, { isDisabled: boolean; isActive?: boolean | undefined; isDraggable: boolean; }>): ReactNode', gave the following error.
    Type 'DragElementWrapper<DragSourceOptions> | undefined' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
      Type 'DragElementWrapper<DragSourceOptions>' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
        Type 'DragElementWrapper<DragSourceOptions>' is not assignable to type '(instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly)'.
          Type 'ReactElement<unknown, string | JSXElementConstructor<any>> | null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.
            Type 'null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.
    57 | 			isDraggable={isDraggable}
    58 | 			onClick={localOnClick}
  > 59 | 			ref={dragRef}
       |    ^^^
    60 | 			title={label}
    61 | 		>
    62 | 			<StyledIcon isDisabled={isDisabled}>{icon}</StyledIcon>

this is one example, but the errors are similar, since im not in control of what react-dnd returns, im not sure how to deal with it.
I have found 1 possible solution to convert the dragRef to a ref, I have to check still if it works properly.

const ref = React.useRef<HTMLDivElement>(null);
dragRef?.(ref);

<component ref={ref} />

more related to a12

ERROR in ./src/config/container.config.ts:1:27
TS2307: Cannot find module '@com.mgmtp.a12.client/client-core/lib/core/configuration' or its corresponding type declarations.
  > 1 | import { Container } from "@com.mgmtp.a12.client/client-core/lib/core/configuration";
      |                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 | import { Locale } from "@com.mgmtp.a12.utils/utils-localization/lib/main";
    3 |
    4 | Container.config.bind(Container.identifier.Locales).toConstantValue([Locale.fromString("de_DE")]);

this is the code that causes the issue:

import { Container } from "@com.mgmtp.a12.client/client-core/lib/core/configuration";
import { Locale } from "@com.mgmtp.a12.utils/utils-localization/lib/main";

Container.config.bind(Container.identifier.Locales).toConstantValue([Locale.fromString("de_DE")]);

please advise on how to continue, if not for the react-dnd then at least for the a12 part.

binh-deep-cache · July 31, 2025, 7:30am

@itzhak-broad-chasm , to fix the react-dnd error, you can create a separated ref, dont use the return from react-dnd hook.
For example, don’t do this

const [{ canDrop, isOver, isDragging, item }, dropRef] = useDrop()
return <div ref={dropRef}/>

instead, this:

const ref = React.useRef<HTMLDivElement>(null);
const [{ canDrop, isOver, isDragging, item }, dropConnector] = useDrop()
dropConnector(ref);

return <div ref={ref}/>

itzhak-broad-chasm · July 31, 2025, 7:31am

@binh-deep-cache yes I found that as well, can you help with the container issue?

binh-deep-cache · July 31, 2025, 7:31am

Besides, I wonder why you still have reference to widgets-style package

"@com.mgmtp.a12.widgets/widgets-styles": "^33.2.2"

itzhak-broad-chasm · July 31, 2025, 7:32am

@bphan probably legacy code, I can probably remove it. as well as stylus.

itzhak-broad-chasm · July 31, 2025, 7:38am

@binh-deep-cache do you have anything regarding the 2nd item? with the container?

chris-long-packet · August 4, 2025, 7:59am

Hi, the experimental Container API was removed from Client 16 (see GetA12).

If you only used it to set the locales (based on your code snippet), you now need to add them as a prop directly to the LocaleSelect component (as described in the migration instructions)