v7.x and v8.x throw "TypeError: _kendoReactCommon.withIdHOC is not a function" when using parcel

[shanekunz]

I'm submitting a...

• Regression report

Current behavior

Last v6 works, latest v7.x and v8.x does not.

Expected behavior

most recent versions should work.

Minimal reproduction of the problem with instructions

Set your kendo packages to the latest v6 versions. import { TabStrip, TabStripTab } from "@progress/kendo-react-layout"; use the TabStrip in your React app. Use parcel to serve/bundle your React app parcel serve src/index.html --port 3000 --no-cache Notice it works. Then upgrade the kendo packages to v8. You'll see an error:

What is the motivation or use case for changing the behavior?

Cannot upgrade to latest version, will fall behind on updates.

Environment

Package versions:

├── @analytics/google-tag-manager@0.5.5
├── @fortawesome/fontawesome-pro@5.15.4
├── @fortawesome/fontawesome-svg-core@1.2.36
├── @fortawesome/free-brands-svg-icons@5.15.4
├── @fortawesome/free-regular-svg-icons@5.15.4
├── @fortawesome/free-solid-svg-icons@5.15.4
├── @fortawesome/pro-duotone-svg-icons@5.15.4
├── @fortawesome/pro-light-svg-icons@5.15.4
├── @fortawesome/pro-regular-svg-icons@5.15.4
├── @fortawesome/pro-solid-svg-icons@5.15.4
├── @fortawesome/react-fontawesome@0.2.2
├── @parcel/optimizer-cssnano@2.12.0
├── @parcel/packager-raw-url@2.12.0
├── @parcel/transformer-inline-string@2.12.0
├── @parcel/transformer-sass@2.12.0
├── @parcel/transformer-webmanifest@2.12.0
├── @popperjs/core@2.11.8
├── @progress/kendo-drawing@1.20.1
├── @progress/kendo-licensing@1.3.5
├── @progress/kendo-react-buttons@8.1.1
├── @progress/kendo-react-intl@8.1.1
├── @progress/kendo-react-layout@8.1.1
├── @progress/kendo-react-pdf@8.1.1
├── @progress/kendo-react-progressbars@8.1.1
├── @react-google-maps/api@2.19.3
├── analytics@0.8.13
├── axios@0.28.1
├── bootstrap@5.3.3
├── buffer@6.0.3
├── dotenv@16.4.5
├── html-react-parser@1.4.14
├── npm-overlapping-marker-spiderfier@1.0.3
├── parcel@2.12.0
├── process@0.11.10
├── react-bootstrap@2.10.4
├── react-dom@18.3.1
├── react-geocode@0.2.3
├── react-google-autocomplete@2.7.3
├── react-imask@7.6.1
├── react-portal@4.2.2
├── react-shadow-root@6.2.0
├── react@18.3.1
└── uuid@10.0.0

Browser:

it's a node.js level issue when parcel bundles, browser is probably not relevant

System:

• Node version: v18.20.4
• Platform: Windows

[PaskalevStoyan]

Hello @shanekunz,

Thanks for bringing this to our attention. I managed to reproduce this behaviour with the provided versions for Parcel and KendoReact. We will do our best to fix this as soon as possible

[kspeyanski]

Hello @shanekunz

After further investigation we're observing that the issue is not related to the kendoreact packages' distribution, but it's rather a bug in the parcel's development bundle.

A couple of notes:

• The same code does indeed work when build for production instead of served for development.
• Further exploring the index.js file in the dist folder during development, reveals that only for the buttons package, and only it's dependency to @progress/kendo-react-common are set to false in the specific scenario you listed meaning it can not be resolved:
• In the same bundle however, there are multiple resolutions of this package which are working correctly:
• For some unknown reason, wildcard importing the buttons package resolves the error, e.g. in your App.js:

I'm closing this issue for now until more information is available. In the meantime I can suggest reaching out to the parcel's maintainers for more guidance, but there is nothing we can do on our side related to component's packaging and distribution.