Unused component imported

[Kevin Dave]

Hey @alan2207 ! Thanks for creating this repository. It's a great starting point for me to build my React App.

I'm currently facing a problem where my unused code is executed in the test. So I'll give an example.

features/order/index.ts

export { useCreateOrderMutation } from './api/useCreateOrderMutation';
export { useGetOrderQuery } from './api/useGetOrderQuery';

pages/MyPage.tsx

import { useGetOrderQuery } from '@/features/order';

...

pages/MyPage.test.tsx

I'm testing MyPage component and mock useGetOrderQuery using jest.spyOn()

But somehow, the code inside useCreateOrderMutation is executed even though I'm not importing it in MyPage.

Is there any missing setup from my side? I didn't clone this repo but I built my repo from scratch, so maybe I might missed something from the webpack or the other setup.

Thanks!

[Alan Alickovic]

Hey @kevindavee ,

Can you provide the repo with the issue?

[Kevin Dave]

Hey @alan2207 , I just invited you to the repo because it's a private repo. I gave you read access so you can read the code. Here's the repo https://github.com/kevindavee/icx-app

[Alan Alickovic]

@kevindavee Can you send me the link to the test file?

[Kevin Dave]

Try to comment on this line https://github.com/kevindavee/icx-app/blob/bf843adfa016248221163831f1380c2ee961e610/src/tests/jestSetup.ts#L60-L64

And run yarn test src/hooks/useHydration.test.tsx

You'll see a warning like this.

As you can see from the stack trace, the hook useHydration is not using the SelfiePicker component, but it seems like the component is imported and executed. Indeed I use something from the ~/features/kyc module, but I don't use the component in that hook.

[Alan Alickovic]

Looks like the tooling won't tree-shake unused imports from the feature, so you will have to specify the exact file. If this happens, avoid using index files from features as the main entry point and just import from files individually.

Updating the imports to this made the test succeed without issues:

[Kevin Dave]

Yeah, I understand it works if I import my component directly. But for me, the beauty of this codebase which inspired by yours, is to have feature modules that act like a stand-alone package. Do you know any way to tree-shake the unused components?

[Kha]

I'm having this issue as well when importing a component from a feature's index.ts file and it importing everything in that index.ts file (even unused one). I guess the only solution right now would be to import directly?

[Patryk Fryda]

Hey @prodbygoss @kevindavee I've just published the package https://github.com/pafry7/babel-plugin-bulletproof-features-import. It seems to solve the issue in our two projects. You can give it a try.

[Kha]

Hey @prodbygoss @kevindavee I've just published the package https://github.com/pafry7/babel-plugin-bulletproof-features-import. It seems to solve the issue in our two projects. You can give it a try.

Ooh, this look interesting. So would this work intelligently with different sub directories too? In your example it shows it changing the imports to /views sub directory.

If I have a bunch of items in sub directories of the features folder (like /types, /screens, /components, /hooks, etc) that get exported from the barrel file, would it be able to import directly to those paths

[Patryk Fryda]

Hey @prodbygoss @kevindavee I've just published the package https://github.com/pafry7/babel-plugin-bulletproof-features-import. It seems to solve the issue in our two projects. You can give it a try.

Ooh, this look interesting. So would this work intelligently with different sub directories too? In your example it shows it changing the imports to /views sub directory.

If I have a bunch of items in sub directories of the features folder (like /types, /screens, /components, /hooks, etc) that get exported from the barrel file, would it be able to import directly to those paths

It should work with subfolders as long as you use relative imports in your index file.

[Kha]

Hey @prodbygoss @kevindavee I've just published the package https://github.com/pafry7/babel-plugin-bulletproof-features-import. It seems to solve the issue in our two projects. You can give it a try.

Ooh, this look interesting. So would this work intelligently with different sub directories too? In your example it shows it changing the imports to /views sub directory.
If I have a bunch of items in sub directories of the features folder (like /types, /screens, /components, /hooks, etc) that get exported from the barrel file, would it be able to import directly to those paths

It should work with subfolders as long as you use relative imports in your index file.

Gotcha, so to confirm:

If my index.ts file has the following:

import { Foo } from './components/Foo'
import { bar } from './utils/bar'
import { useBaz } from './hooks'

It would all work?