opened
zhangyuang
username_0
### Describe the bug

when the thirdparty module is esm format, esbuild manage it without add `__esModule` property.

for examle, the source code is

```js
// swier.esm.js
export { default as Swiper, default } from './esm/components/core/core-class';
export { default as Virtual } from './esm/components/virtual/virtual';
//...
```

After the build ,will output

```js
import {default as default2, default as default3} from "./esm/components/core/core-class";
import {default as default4} from "./esm/components/virtual/virtual";
export {
  default14 as A11y,
  default3 as default
};

```

which it not have `__esModule` property.

it will be cause an error. if a module build by webpack, the source code as below

```js
//  react-id-swiper sourceCode
import Swiper from 'swiper';
new Swiper()
```
after webpack build , output code will add helper function `__importDefault`
```js
// react-id-swiper
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var swiper_1 = __importDefault(require("swiper"));
new swiper_1.default(swiperNodeRef.current, object_assign_1.default({}, props))
```

but because of `__esModule` is undefined, `__importDefault` function will add default property once again cause the return value `__importDefault(require("swiper")).default` is not the current object will be error

![image](https://user-images.githubusercontent.com/17424434/118099685-25180000-b408-11eb-9367-ab30c7ce14fb.png)
![image](https://user-images.githubusercontent.com/17424434/118099722-33feb280-b408-11eb-8e38-6ed8b0028b3d.png)
 


### Reproduction

https://github.com/username_0/vite-react-swiper-error

### System Info

vite/2.3.2 darwin-x64 node-v12.18.3

### additional

when i add `__esModule` property in source manually, it can be executed succeed like

```js
export { default as Swiper, default } from './esm/components/core/core-class';
export { default as Virtual } from './esm/components/virtual/virtual';
export const __esModule = true 
```

In this case，maybe vite can add `__esModule` in esbuild plugin . for example

```js
build.onLoad({ filter: /.*/, namespace: 'swiper' }, ({ path: id }) => {
        return {
          loader: 'js',
          resolveDir: root,
          contents: `export * from "filepath"
          export {default} from "filePath"
          export const __esModule = true 
          `
        }
      })
```
without __esModule property when format esm module cause load module error
issue
created
Sociosarbis
username_1
temporary workaround for your case.

add a `resolve.alias` in `vite.cofnig.js` as follows:
```js
{
  resolve: {
    alias: {
     swiper: 'swiper/swiper.cjs'
   }
  }
}
```

BTW，is possible to achieve this specifc functionality you proposed somehow like add a extra file and use `resolve.alias` to redirect the request to that. 🤔
comment
created
zhangyuang
username_0
yeah, but it's a temporary solution。the problem may be appear frequently
comment
created
Sociosarbis
username_1
```js
export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      swiper: join(__dirname, 'src/swiper'),
      '@swiper': join(__dirname, 'node_modules/swiper/swiper.esm')
    }
  }
})
```
```js
// src/swiper.js
export * from '@swiper'
export { default } from '@swiper'
export const __esModule = true
```
clean the vite prebundle cache and rebuild. This would work. I think it's a issue of esbuild rather than vite's.😄
comment
created
zhangyuang
username_0
yeah, i also think that. in the final analysis，the problem is es module and commonjs module are not compatible. `export default` not have corresponding declare in commonjs
comment
created
BasixKOR
username_2
This causes latest `evergreen-ui` to break, caused by `hyphenate-style-name`.
comment
created
frabarz
username_3
I'm also having this issue with [`resize-observer-polyfill`](https://www.npmjs.com/package/resize-observer-polyfill). The package offers a es module, but the content doesn't have the `__esModule = true` export, and the app fails because the function is wrapped in an object under a `default` key:
![image](https://user-images.githubusercontent.com/11713191/118887280-234ab280-b8c8-11eb-8e99-1a8cd7e06ee7.png)
![image](https://user-images.githubusercontent.com/11713191/118887323-32c9fb80-b8c8-11eb-9682-0cb2a97a9396.png)
This is clearly something they need to fix, but the thing is, this was working correctly 2 weeks ago. Does anyone know since which version this changed?
comment
created
zhangyuang
username_0
@username_5 @underfin  @username_4 @patak-js  please see see, the issue occur many times in different project
comment
created
Shinigami92
username_4
Does this also happen with Vite `v2.2.4`? If not, I assume it also has to do with the `esbuild` update.
But if `v2.2.4` works for you, you are at least able to use Vite for now
comment
created
Shinigami92
username_4
Ok so please downgrade and try it out. Then write me feedback.
comment
created
zhangyuang
username_0
@username_4 vite@2.2.4 will not occur the problem. but we want to use the newest vite.maybe you can push esbuild fix the problem
comment
closed
antfu
username_5
issue
created
softboy99
username_6
Hi，
does this has been released?
comment