vue-meteor icon indicating copy to clipboard operation
vue-meteor copied to clipboard

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

Open wildhart opened this issue 6 years ago • 0 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 <[email protected]>
 * 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:[email protected]
akryum:[email protected]
akryum:[email protected]
akryum:[email protected]
akryum:[email protected]
...
[email protected]
[email protected]
...
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

CC'ing @benjamn.

wildhart avatar Jan 31 '19 17:01 wildhart