vue.esm.js build throws exception in browsers supporting ES modules (Safari preview)

[stefanjudis]

Version

2.2.4

Reproduction link

https://github.com/stefanjudis/vue-esm-issue

Steps to reproduce

Try import Vue from 'vue.esm.js' in Safari Technology Preview.

• http://i.imgur.com/dtoEqRi.png
• http://i.imgur.com/KTNOyRy.png
• http://i.imgur.com/nJLhVrU.png

What is expected?

It is expected that I can import the ES module in a Browser environment that supports ES modules already.

What is actually happening?

The module includes references to process which throws a Reference Error then.

---

I'm just playing around with the new support of ES modules and try to figure out what this all means for our development workflows and ecosystem. Modules, rel=preload, HTTP/2, it might be, that best practices will shift again.

I ran into this bug, because I wanted to measure a bundle including vue against ES modules making several requests. Maybe I'm not getting the idea of this build, but as I understand it should support the native environment. :)

[posva]

Yeah, the esm build is meant to be used with a bundler. Use the dist/vue.js or dist/vue.runtime.js instead. Here you can find more information: https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

[tvanier]

Now that more browsers support ES6 modules, it would be great to be able to

<script type="module">
  import Vue from 'https://unpkg.com/vue/dist/vue.esm.js';
</script>

This codepen seems to work in Chrome 61 and Safari 10 (did not test ES6 modules flags in Firefox and Edge) by defining a process global variable before importing vue.esm.js
https://codepen.io/tvanier/pen/OxRNdv

Could it be just something like const process = process || {env:{}} at the beginning of the Vue esm?

[herrernst]

Would also like (and expect) to import Vue from vue.esm.js with browsers that support ES6 modules. Seems that only the references to process.env need to be dealt with.

[yyx990803]

FYI, the presence of process.env.NODE_ENV in the source code is meant for compile-time optimizations when used with a bundler like webpack, so adding a constant into the bundle would completely defeat that purpose.

At this moment, using native ES modules in the browser still comes with significant performance issues, so a build step is still preferred for any type of serious usage, which is why we still prioritize the dist files for bundlers.

[tvanier]

A browser-compatible esm file would be good IMHO so Vue can still be discovered simply (no bundling) and learned progressively using modern ES features. Maybe a new vue.esm-script.js in build/config.js?

  'web-full-esm-script': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.esm-script.js'),
    format: 'es',
    env: 'development', // this replaces process.env.NODE_ENV with 'development'
    alias: { he: './entity-decoder' },
    banner
  },

Or the other way around, rename vue.esm.js into vue.esm-bundle.js (breaking change), and generate vue.esm.js with the above config?

[jonaskuske]

Also supporting this, browser compatible ES Module support would be neat!

Another thing that seems to work without issues is to add an export default to the main vue.js and make the function return factory(), like so:

export default (function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) : typeof global !== 'undefined' ?
  (global.Vue = factory()) : window.Vue = factory();
  return factory();
}(this, (function () { 'use strict';
  // 10000 lines of vue here
})));

(we have to check whether global exists because it is undefined in ES modules, so assigning to global.Vue there throws an exception)

But of course this might break compatibility with some bundlers/build tools, I don't know..

[tvanier]

A new vue.esm.browser.js build is under review in this PR #7110