Please bundle module/browser version (like vuex.min.js format)

[viT-1]

Can't use in browser, cause of error:

Uncaught ReferenceError: exports is not defined
    at direct-vuex.js:5

I am using SystemJs for production (with ie11 support) bundle with type="systemjs-importmap" like this:

{
    "imports": {
        "direct-vuex": "https://cdn.jsdelivr.net/npm/direct-vuex@0.8.6/dist/direct-vuex.min.js",
        "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js",
        "vuex": "https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js",
        "wretch": "https://cdn.jsdelivr.net/npm/wretch@1.6.0/dist/bundle/wretch.min.js"
    }
}

and all ok except direct-vuex =(

[paleo]

Please update to the version 0.9 and let me know if it is complete.

[viT-1]

I have experience with vue-property-decorator umd package under SystemJS, but forced to bundle it (can't use cdn). With umd of direct-vuex I have same problem. When I use umd in systemjs-importmap I have Error: direct_vuex_1.createDirectStore is not a function =( Can you publish not only umd module, but standard as vuex.min.js also?

[viT-1]

AMD for SystemJs is Ok, but UMD is not.

[paleo]

In vuex.js there is the following code:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.Vuex = factory());
}(this, function () { 'use strict';

I thought this code was the UMD format.

The solution becomes unclear for me. I thought UMD was simultaneously AMD and CommonJS. And I thought SystemJS could load any format. I don't know how to solve the issue for the moment.

[paleo]

TypeScript generates this code for UMD:

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "vuex"], factory);
    }
})(function (require, exports) {
    "use strict";

And for AMD:

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
define(["require", "exports", "vuex"], function (require, exports, vuex_1) {
    "use strict";

There is a compiler option System that generates this code:

System.register(["vuex"], function (exports_1, context_1) {
    "use strict";

I could publish a bundle for the system module format if you want. But I'm really surprised that dist/direct-vuex.esm.js or the UMD format can't be loaded.

[viT-1]

But I'm really surprised that dist/direct-vuex.esm.js

Ticket about esm.js is ok.

[viT-1]

I know about compiler option & use it. I want to link to your module in importmap (and don't to bundle it as SystemJS module like I do with vue-property-decorator from its src), but systemjs-importmap is not working with umd format.

[paleo]

I just published a new version using Rollup. Maybe the Rollup version of UMD is better. And I added a System version from Rollup too. Can you update and test again?

[viT-1]

It is unconfortable: to add script with src to systemjs bundle, in comparison with systemjs-importmap where I have cdn links to all assets.

[viT-1]

Just tested in IE11. Syntax error on direct-vuex.system.min.js (1,384) cause of ES6 => instead of ES5

[paleo]

Try to update to 0.9.3. The versions for UMD and SystemJS are now in ES5 syntax. I use a WeakMap, but it should be OK with IE 11.

It is unconfortable: to add script with src to systemjs bundle, in comparison with systemjs-importmap where I have cdn links to all assets.

I'm not sure to understand. This CDN is not enough?

[viT-1]

I'm not sure to understand. This CDN is not enough?

Yes:

• esm only for <script type="module">, not IE (only for dev mode in modern browsers)
• system (v0.9.3) is working but compare to other packages with native bundle it needs to make personal configuration: additional link to cdn. It will be better to use direct-vuex through systemjs-importmap (for example) with link to native (supported IE11) browser format
• umd is not supported on systemjs-importmap

[viT-1]

Strange, but wretch is working also, despite of umd format.

[viT-1]

SystemJs bundle of direct-vuex is not necessary. I have single bundle by systemjs only for project files & two packages/assets: vue-class-component (cause of additional replacing process.env.NODE_ENV code) & vue-property-decorator (cause of umd format). Other assets for production with supporting IE11 are linking through systemjs-importmap.

No Babel, no webpack, no rollup, only tsc/ttsc transpiling with typescript-transform-paths for alias imports resolving, esm & systemjs bundling.

[paleo]

I'm not sure of what is needed now. I can remove the useless system bundle. But after that, if you need something else, you'll have to be explicit. I don't use SystemJS personally, nor IE11. I use Webpack, which automatically uses the ESM module version when it exists and it is just fine.

[viT-1]

@paleo To have SystemJS bundle is better (I tested, is working) than have only unsupported (by SystemJS) umd module. But for browser it will be better to have working standard version ;)

If I use import { createDirectStore } from 'direct-vuex'; & importmap with

• umd and typescript code I have error: Uncaught TypeError: Cannot read property 'createDirectStore' of undefined
• direct-vuex.min.js v0.8.7 I have error: direct-vuex.js (stackoverflow explained):

  
  Uncaught (in promise) ReferenceError: exports is not defined
  at direct-vuex.js:5

on `Object.defineProperty(exports, "__esModule", { value: true });`

And this is script that I want to, but similar transpiled syntax as I have in [vuex.min.js](https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.js) (for example).

It will be better to have dist with three versions:
- esm for modern browsers
- umd for NodeJs or RequireJs
- standard for IE11 and so on (case of esm unsupported), which can be running on browser
straight from the `<script src=".../direct-vuex.min.js">` with ES5
& without forcing developer to any bundling or having special loaders
(like 0.8.7 version transpiled but needs to be fixed)

[paleo]

direct-vuex.min.js v0.8.7 I have error: direct-vuex.js (stackoverflow explained):

In Direct-vuex 0.8, the main bundle was exported with CommonJS.

And this is script that I want to, but similar transpiled syntax as I have in vuex.min.js (for example).

The last direct-vuex.umd.js and vuex.js have the same module system. It is a UMD format, produced by Rollup. Maybe I can define better settings for global variables.

* standard for IE11 and so on (case of esm unsupported), which can be running on browser
  straight from the `<script src=".../direct-vuex.min.js">` with ES5
  & without forcing developer to any bundling or having special loaders

Which Vuex bundles do you use for this case?

[viT-1]

This Vuex bundle is working for me (through systemjs-importmap), about this was initial message.

[paleo]

This Vuex bundle is working for me (through systemjs-importmap), about this was initial message.

So, this one for Direct-vuex should work. It is a UMD from Rollup, with legacy JS (var etc.). Except the usage of a WeakMap but IE11 has an implementation of WeakMap.

[viT-1]

I am testing on Chrome 79.0.3945.79 first, and then on IE11. And I have no success even with Chrome on umd format because of Uncaught TypeError: Cannot read property 'createDirectStore' of undefined

[paleo]

With version 0.8 or 0.9?

[viT-1]

0.9.3

[paleo]

Can I have a minimal but complete example of your code?

[viT-1]

I have not published any minimal project with vuex yet =( It will take a time.

[paleo]

I actually just need a minimal code that reproduces the error:

Uncaught TypeError: Cannot read property 'createDirectStore' of undefined

[viT-1]

Ok, I'm working on it

[viT-1]

Done! You can compare initial commit without direct-vuex is working, but 2nd commit with direct-vuex is not working. And it's all about umd format, vuex through systemjs-importmap is ok =(

• npm run deploy
• run browser with http://localhost:3000/

[viT-1]

It's may be everything is ok with straight umd to index.html (like fetch.umd for IE11), but SystemJS can't use umd format in systemjs-importmap, it is my issue - I need simple ES5 (not commonJs) bundle for that mapping.

[paleo]

Thanks. I see the problem:

import { createDirectStore } from 'direct-vuex';
import defaultDv from 'direct-vuex';
import * as allDv from 'direct-vuex';

console.log("createDirectStore", createDirectStore);
console.log("defaultDv", defaultDv);
console.log("allDv", allDv);

All the Direct-vuex functions are erroneously imported as sub-properties of the default export. I don't know if it is a wrong configuration of Rollup or something else. I will search tomorrow.

[paleo]

There is nothing to do. It seems SystemJS always imports a module as default. Here is how to tell TS to deal with it:

In tsconfig.system.json, add a compiler option:

  "esModuleInterop": true

In VueApp.ts, import DirectVuex as default, then use it:

import DirectVuex from 'direct-vuex';
// …
  const store = DirectVuex.createDirectStore(storeConf).store.original;

[viT-1]

Yes, it's working (only defaults but it is acceptable). Thank you very much!