sideEffects and export * from

[nkroe]

Hi,
I have that simple structure:

package.json

...
"sideEffects": false,
...

src/components/modal/index.tsx

import { ModalBody } from './components';
import { SomeComponent } from './someComponent';

export const Modal = () => <div></div>;

Modal.SomeComponent = SomeComponent;
Modal.Body = ModalBody;

src/components/modal/components/index.ts

export * from './body';

src/components/modal/components/body/index.tsx

import './style.less';

export const ModalBody = () => <div></div>;

src/components/modal/someComponent/index.tsx

import './style.less';

export const SomeComponent = () => <div></div>;

As you can see src/components/modal/components/index.ts has export * from
After build i has that result

Result with export * from

{
  'components/modal/index.js': {
    'src/components/modal/components/body/style.less': {}, 
    'src/components/modal/components/body/index.tsx': {},
    'src/components/modal/someComponent/style.less': {},   
    'src/components/modal/someComponent/index.tsx': {},  
    'src/components/modal/index.tsx': {}
  },
  'components/modal/index.css': {
    'src/components/modal/someComponent/style.less': {}
  }
}

components/modal/index.js has:

1. src/components/modal/components/body/index.tsx
2. src/components/modal/components/body/style.less

But components/modal/index.css have only src/components/modal/someComponent/style.less


If we change src/components/modal/components/index.ts to this

Changed src/components/modal/components/index.ts

export { ModalBody } from './body';

Now we got this result:

Result with export { ModalBody } from

{
  'components/modal/index.js': {
    'src/components/modal/components/body/style.less': {},  
    'src/components/modal/components/body/index.tsx': {}, 
    'src/components/modal/components/index.ts': {},
    'src/components/modal/someComponent/style.less': {},    
    'src/components/modal/someComponent/index.tsx': {},   
    'src/components/modal/index.tsx': {}
  },
  'components/modal/index.css': {
    'src/components/modal/components/body/style.less': {},
    'src/components/modal/someComponent/style.less': {}
  }
}

Now components/modal/index.js has

1. src/components/modal/components/body/index.tsx
2. src/components/modal/components/body/style.less
3. src/components/modal/components/index.ts !!!

And components/modal/index.css now has src/components/modal/components/body/style.less !!!

How i can fix that without change export * from to export {...} from or it is bug?

Thanks.

[nkroe]

@evanw any thoughts here?

[majo44]

We have same issue. Replacing export * from by export {...} from is working workaround.

[nkroe]

@majo44 We temporary solved this by marks of index.ts files as sideEffects , waiting for @evanw response

[PrzemyslawMikos]

Hi!
I also face this issue in my project. We use export {...} from 'x'; as workaround, however it would be really beneficial to have this issue solved as it affects runtime.
In order to help identify the issue I've made a simple example repository (CLICK ME!) which visualises the issue.
I've also checked the output of build files and I've noticed the difference between working and non working version:

I hope above example will help with solving that issue. In case of any question in regard of this please don't hesitate to contact me.

[wsuwt]

We are facing the same issue as well. It would be great to be able to leverage export * from 'module' with esbuild.