meteor-vue / vue-meteor

🌠 Vue first-class integration in Meteor

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vue-component <style> section breaks IE10 legacy build with "const"

wildhart opened this issue · comments

Using akryum:vue-component with <style> sections breaks IE10 because somehow some const keywords are getting past babel and into the legacy browser code.

In development mode and production mode the component is exported and dynamically imported as (whitespace and comments removed):

"Subscription": {
          "Subscription.vue": function(require,exports,module){
          const modules = require('meteor/modules');
          modules.addStyles(
          ...

Notice the const. This breaks the import with a syntax error inside packages/dynamic-import.js ... function makeModuleFunction() and none of the dynamically imported components render. However, every other const keyword in my own code within the component itself is correctly converted to var.

If the <style> section is removed the component is dynamically imported as:

"Subscription": {
          "Subscription.vue": function(require,exports,module){
          var __vue_script__, __vue_template__;
          module.exportDefault = function(value) { __vue_script__ = value; }; (
          ...

without any const keyword. This time the imported component renders correctly (except without css).

Also, only in development mode there is a const within akryum_vue-component-dev-client.js which gives the error:

SCRIPT1002: Syntax error
File: akryum_vue-component-dev-client.js, Line: 8290, Column: 1

which is the const WebSocket... line of the following code:

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                   //
// node_modules/meteor/akryum_vue-component-dev-client/node_modules/ws/index.js                                      //
//                                                                                                                   //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                                                                                                                     //
/*!
 * ws: a node.js websocket client
 * Copyright(c) 2011 Einar Otto Stangvik <einaros@gmail.com>
 * MIT Licensed
 */

'use strict';

const WebSocket = require('./lib/WebSocket');

I'm using Meteor 1.8.0.2, with package.json:

dependencies": {
    "@babel/runtime": "^7.1.2",
    "babel-runtime": "^6.26.0",
    ...

with no other babel plugins or directives. A selection from .meteor/versions is:

...
akryum:vue-component@0.14.3
akryum:vue-component-dev-client@0.4.5
akryum:vue-component-dev-server@0.1.3
akryum:vue-pug@0.1.1
akryum:vue-sass@0.1.1
...
babel-compiler@7.2.4
babel-runtime@1.3.0
...
dynamic-import@0.5.0
ecmascript@0.12.4
ecmascript-runtime@0.7.0
ecmascript-runtime-client@0.8.0
ecmascript-runtime-server@0.7.1

CC'ing @benjamn.