tree shaking not work because of vuex.mjs

[fangbinwei]

Version

4.0.0-rc.2

Reproduction link

https://github.com/fangbinwei/vuex-next-issue

Steps to reproduce

1. yarn build
2. search prev state in dist/main.js to validate if bundle contains createLogger

vuex/src/plugins/logger.js

Line 33 in bb78857

logger.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState))

main.js

// tree shaking not work because of vuex.mjs
import {Store} from 'vuex'

console.log(Store)

output(external vue)

[webpack-cli] Compilation finished
asset main.js 12.1 KiB [emitted] [minimized] (name: main) 2 related assets
orphan modules 400 bytes [orphan] 1 module
runtime modules 221 bytes 1 module
built modules 35.6 KiB [built]
  ./src/index.js   1 modules 567 bytes [built] [code generated]
  ./node_modules/vuex/dist/vuex.cjs.js 35 KiB [built] [code generated]
  external "Vue" 42 bytes [built] [code generated]
webpack 5.11.0 compiled successfully in 713 ms
✨  Done in 3.59s.

main.js

// tree shaking work
import {Store} from 'vuex/dist/vuex.esm-bundler.js'

console.log(Store)

output(external vue)

[webpack-cli] Compilation finished
asset main.js 9.8 KiB [emitted] [minimized] (name: main) 2 related assets
orphan modules 35.1 KiB [orphan] 2 modules
runtime modules 221 bytes 1 module
./src/index.js   2 modules 35.3 KiB [not cacheable] [built] [code generated]
webpack 5.11.0 compiled successfully in 797 ms
✨  Done in 2.47s.

What is expected?

drop createLogger from the bundle

What is actually happening?

bundle contains createLogger

---

I think tree shaking not work because of two reasons, (I know vuex.mjs wrap vuex.cjs.js because of some rules in node)

1. vuex.mjs use default import
2. vuex.mjs import CommonJS(vuex.cjs.js)

Maybe we can do like below

  "exports": {
    ".": {
+      "module": "./dist/vuex.esm-bundler.js",
      "require": "./dist/vuex.cjs.js",
      "import": "./dist/vuex.mjs"
    },
    "./": "./"
  },

nodejs don't support module in exports, so it can execute dist/vuex.mjs

webpack support module in exports, it will use dist/vuex.esm-bundler.js first if it is valid, since the order of "module" is in front of the "import"

Moreover

since vuex.mjs wrap CommonJS which contains require('vue') and it let vuex doesn't compatiable with webpack externals script, check this issue. Reproduction link

[kiaking]

The fixed is merged. This should be fixed in new release!