Error in using uploadImages

[Wesley1993]

version: 1.20.2
env: Vue2

[CPunisher]

In bytemd, selectFiles is a function imported from select-files packages.
I tried uploadImages in official vue2 example, but I can't reproduce your error.
Can you provide a reproduction ?

[hhuangxm]

i had the same bug

vue version 2.6.11

[sevilen]

In bytemd, selectFiles is a function imported from select-files packages. I tried uploadImages in official vue2 example, but I can't reproduce your error. Can you provide a reproduction ?

official vue2 example works, the vue-nuxtjs example can reproduce.

[15079698746]

使用vue2 需将 @bytemd/vue 降低到1.17.1 版本，点击上传图片可正常使用

[CPunisher]

It seems that there is something wrong with Webpack 4 when the code mixes commonjs and esm, i.e., webpack 4 transpile select-files to Module { default: function } instead of function, which causes this error.

Some issues related to webpack v4:
vuejs/pinia#675
webpack/webpack#6459
webpack/webpack#9509

I have come up with 3 solutions just for reference.

1. Upgrade your webpack to v5
2. Manually resolve all packages resolved as commonjs to corresponding esm file using aliases.

resolve: {
  alias: {
    bytemd$: path.resolve(__dirname, 'node_modules/bytemd/dist/index.mjs'),
    'tippy.js$': path.resolve(__dirname, 'node_modules/tippy.js/dist/tippy.esm'),
  }
}

3. Force the use of commonjs by adding the following webpack configuration. Webpack v4 prefer to use module field(which points to esm file) in package.json(which points to cjs file) to the main field, thus exchanging their order can give priority to parsing their cjs files.

resolve: {
  mainFields: ['main', 'module']
}

I'm not sure the above solutions work, and welcome better solutions or in-depth discussions.

[github-actions]

This issue is stale because it has been open for 60 days with no activity.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale.