without __esModule property when format esm module cause load module error

[zhangyuang]

Describe the bug

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

for examle, the source code is

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

After esbuild format ,will output

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
};

without __esModule property.

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

//  react-id-swiper sourceCode
import Swiper from 'swiper';
new Swiper()

after webpack build , output code will add helper function __importDefault

// 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

Reproduction

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

System Info

vite/2.3.2 darwin-x64 node-v12.18.3

additional

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

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

build.onLoad({ filter: /.*/, namespace: 'swiper' }, ({ path: id }) => {
        return {
          loader: 'js',
          resolveDir: root,
          contents: `export * from "filepath"
          export {default} from "filePath"
          export const __esModule = true 
          `
        }
      })

[Sociosarbis]

temporary workaround for your case.

add a resolve.alias in vite.cofnig.js as follows:

{
  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. 🤔

[zhangyuang]

temporary workaround for your case.

add a resolve.alias in vite.cofnig.js as follows:

{
  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. 🤔

yeah, but it's a temporary solution。the problem may be appear frequently

[Sociosarbis]

export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      swiper: join(__dirname, 'src/swiper'),
      '@swiper': join(__dirname, 'node_modules/swiper/swiper.esm')
    }
  }
})

// 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.😄

[zhangyuang]

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

[BasixKOR]

This causes latest evergreen-ui to break, caused by hyphenate-style-name and @emotion/hash.

[frabarz]

I'm also having this issue with 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:


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?

[zhangyuang]

@antfu @underfin @Shinigami92 @patak-js please see see, the issue occurs many times in different project. for example, use element-ui with vue2.0 and vite

[Shinigami92]

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

[zhangyuang]

@Shinigami92 it use the newest vite 2.3.4，although i think it's esbuild problem

[Shinigami92]

Ok so please downgrade and try it out. Then write me feedback.

[zhangyuang]

@Shinigami92 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

[softboy99]

Hi，
does this has been released?

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.