v7 has breaking change to /lib/component/* exports

[gary-mycase]

Hi folks, long time no see 👋 ,

MyCase is using react-gears, and looking to upgrade to v7 for Bootstrap 5 support (currently on react-gears v5).
One problem we noticed is there was a breaking change to the /lib/component/ exports, I think due to reorganizing the code and directories. Current code that uses:

import ButtonGroup '@appfolio/react-gears/lib/components/ButtonGroup';

now needs:
import ButtonGroup '@appfolio/react-gears/lib/components/Button/ButtonGroup';

but even after changing throws TypeScript errors, e.g.:
Could not find a declaration file for module '@appfolio/react-gears/lib/components/Button/ButtonGroup'

The original point of /lib/component exports was to allow for selective imports in non-tree shaking environments, using the pattern /lib/component/{Component Name}. MyCase has many hundreds of imports like this, and would be very helpful if lib exports did not change for this upgrade.

If this was accidental, would you be up for looking at changing this or can we help with a PR?

[JeremyRH]

Hi @gary-mycase, thanks for raising this issue. We were aware individual files were being imported but thought it was rare and not an intended feature. Still, it was a breaking change so we included this in the update from 6 to 7. Your issue made us realize we did not provide an alternative for builds that wanted this and don't support tree shaking.

Here's an idea to solve this:
Webpack 5 has support for package exports and we're thinking of using this to allow importing individual files. The import path will change for all files though:
@appfolio/react-gears/lib/components/ButtonGroup to @appfolio/react-gears/ButtonGroup.

Mass find and replace should make this change easier on your side but that's just a guess. Let us know what you think.

[gary-mycase]

Hey @JeremyRH , thanks for the update. Yes understood, it's kind of an old way to import.
I think we'll bite the bullet and move to the normal import { Foo, Bar } from '@appfolio/react-gears'; imports since we'd have to touch the imports in any case, and the app is now on Webpack 5 which supports tree shaking much better.

I can close this issue, or could leave if you want to track that the lib exports don't work with TypeScript.
Might want to consider either removing the lib build (though check with IM team as they used to use afaik)
or fix the TS types for this export.

Thanks again 👍