Lit-element: Meteor + LitElement: import { LitElement, html }

[aadamsx]

I'm starting a new test project with Meteor 1.7+ and am using LitElement for a few components.

I installed Meteor like so:

meteor create meteor-lithtml --release 1.7.1-beta.29 --bare

I installed like so:

meteor npm install --save @polymer/lit-element

My node_modules directory looks like so:

My package.json file:
```package.json
{
"name": "myapp",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"@babel/runtime": "^7.0.0-beta.56",
"@polymer/lit-element": "^0.5.2",
"@vaadin/router": "^1.0.0",
"meteor-node-stubs": "^0.4.1",
"redux": "^4.0.0"
},
"meteor": {
"mainModule": {
"client": "client/index.js",
"server": "server/index.js"
}
}
}

The typical way I see lit-element imported is not working...

Just adding an index.js file and importing the lit-element module generates errors.  If I remove the import from the index.js file, the errors go away.


```javascript
\\ client\index.js
import { LitElement, html } from '@polymer/lit-element';

```javascript
Uncaught SyntaxError: Unexpected token {

modules.js?hash=182125a3fa97eaa24f6d313584ca593c3aed2103:984

tracker.js?hash=7255…82b90fd0455ebc45:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
at tracker.js?hash=7255…82b90fd0455ebc45:17
at tracker.js?hash=7255…2b90fd0455ebc45:672
minimongo.js?hash=8d…6d441ef38db014c1:17 Uncaught TypeError: Cannot read property 'DiffSequence' of undefined
at minimongo.js?hash=8d…6d441ef38db014c1:17
at minimongo.js?hash=8d…441ef38db014c1:4798
check.js?hash=401d16…dd6e014eda8f4123:17 Uncaught TypeError: Cannot read property 'EJSON' of undefined
at check.js?hash=401d16…dd6e014eda8f4123:17
at check.js?hash=401d16…d6e014eda8f4123:637
retry.js?hash=7ed3fc…3c1a05b724a47a0d:17 Uncaught TypeError: Cannot read property 'Random' of undefined
at retry.js?hash=7ed3fc…3c1a05b724a47a0d:17
at retry.js?hash=7ed3fc…c1a05b724a47a0d:106
callback-hook.js?has…9f154062677c5c94:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
at callback-hook.js?has…9f154062677c5c94:17
at callback-hook.js?has…f154062677c5c94:193
ddp-common.js?hash=4…f30ac562322abb24:17 Uncaught TypeError: Cannot read property 'check' of undefined
at ddp-common.js?hash=4…f30ac562322abb24:17
at ddp-common.js?hash=4…30ac562322abb24:518
reload.js?hash=ca0e0…8becb78af6861ca6:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
at reload.js?hash=ca0e0…8becb78af6861ca6:17
at reload.js?hash=ca0e0…becb78af6861ca6:256
socket-stream-client…f6f0548f9279a6f0:17 Uncaught TypeError: Cannot read property 'Retry' of undefined
at socket-stream-client…f6f0548f9279a6f0:17
at socket-stream-client…f0548f9279a6f0:3267
ddp-client.js?hash=8…f25cc5b8318191a3:17 Uncaught TypeError: Cannot read property 'check' of undefined
at ddp-client.js?hash=8…f25cc5b8318191a3:17
at ddp-client.js?hash=8…5cc5b8318191a3:2183
ddp.js?hash=fcd82059…a2e16c1a15e1480b:14 Uncaught TypeError: Cannot read property 'DDP' of undefined
at ddp.js?hash=fcd82059…a2e16c1a15e1480b:14
at ddp.js?hash=fcd82059…a2e16c1a15e1480b:23
allow-deny.js?hash=b…6af70d6446753d30:17 Uncaught TypeError: Cannot read property 'LocalCollection' of undefined
at allow-deny.js?hash=b…6af70d6446753d30:17
at allow-deny.js?hash=b…af70d6446753d30:556
mongo.js?hash=d31c20…2d572967865b2a09:17 Uncaught TypeError: Cannot read property 'AllowDeny' of undefined
at mongo.js?hash=d31c20…2d572967865b2a09:17
at mongo.js?hash=d31c20…d572967865b2a09:879
reactive-var.js?hash…0375579e8f4f84c3:17 Uncaught TypeError: Cannot read property 'Tracker' of undefined
at reactive-var.js?hash…0375579e8f4f84c3:17
at reactive-var.js?hash…375579e8f4f84c3:138
webapp.js?hash=3ff56…cfc31e5f30c8a5bf:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
at webapp.js?hash=3ff56…cfc31e5f30c8a5bf:17
at webapp.js?hash=3ff56…cfc31e5f30c8a5bf:68
livedata.js?hash=642…99913760aa3915cb:14 Uncaught TypeError: Cannot read property 'DDP' of undefined
at livedata.js?hash=642…99913760aa3915cb:14
at livedata.js?hash=642…99913760aa3915cb:27
autoupdate.js?hash=6…cc9742ecdc5a4f50:17 Uncaught TypeError: Cannot read property 'Tracker' of undefined
at autoupdate.js?hash=6…cc9742ecdc5a4f50:17
at autoupdate.js?hash=6…c9742ecdc5a4f50:249
global-imports.js?ha…9ebca19bdc4661d48:3 Uncaught TypeError: Cannot read property 'Mongo' of undefined
at global-imports.js?ha…9ebca19bdc4661d48:3
app.js?hash=7f3d88fa…3881ea0db43a72eca:1 Uncaught ReferenceError: meteorInstall is not defined
at app.js?hash=7f3d88fa…3881ea0db43a72eca:1


​
```

[aadamsx]

The very first error:

Uncaught SyntaxError: Unexpected token {

modules.js?hash=182125a3fa97eaa24f6d313584ca593c3aed2103:984 

Points to this location:

Expanding node_modules to look into this file:

This is the mixin file:

/**
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
import '../utils/boot.js';

import { dedupingMixin } from '../utils/mixin.js';
import { PropertiesChanged } from './properties-changed.js';

/**
 * Creates a copy of `props` with each property normalized such that
 * upgraded it is an object with at least a type property { type: Type}.
 *
 * @param {Object} props Properties to normalize
 * @return {Object} Copy of input `props` with normalized properties that
 * are in the form {type: Type}
 * @private
 */
function normalizeProperties(props) {
  const output = {};
  for (let p in props) {
    const o = props[p];
    output[p] = (typeof o === 'function') ? {type: o} : o;
  }
  return output;
}

/**
 * Mixin that provides a minimal starting point to using the PropertiesChanged
 * mixin by providing a mechanism to declare properties in a static
 * getter (e.g. static get properties() { return { foo: String } }). Changes
 * are reported via the `_propertiesChanged` method.
 *
 * This mixin provides no specific support for rendering. Users are expected
 * to create a ShadowRoot and put content into it and update it in whatever
 * way makes sense. This can be done in reaction to properties changing by
 * implementing `_propertiesChanged`.
 *
 * @mixinFunction
 * @polymer
 * @appliesMixin PropertiesChanged
 * @summary Mixin that provides a minimal starting point for using
 * the PropertiesChanged mixin by providing a declarative `properties` object.
 */
export const PropertiesMixin = dedupingMixin(superClass => {

 /**
  * @constructor
  * @implements {Polymer_PropertiesChanged}
  * @private
  */
 const base = PropertiesChanged(superClass);

 /**
  * Returns the super class constructor for the given class, if it is an
  * instance of the PropertiesMixin.
  *
  * @param {!PropertiesMixinConstructor} constructor PropertiesMixin constructor
  * @return {?PropertiesMixinConstructor} Super class constructor
  */
 function superPropertiesClass(constructor) {
   const superCtor = Object.getPrototypeOf(constructor);

   // Note, the `PropertiesMixin` class below only refers to the class
   // generated by this call to the mixin; the instanceof test only works
   // because the mixin is deduped and guaranteed only to apply once, hence
   // all constructors in a proto chain will see the same `PropertiesMixin`
   return (superCtor.prototype instanceof PropertiesMixin) ?
     /** @type {!PropertiesMixinConstructor} */ (superCtor) : null;
 }

 /**
  * Returns a memoized version of the `properties` object for the
  * given class. Properties not in object format are converted to at
  * least {type}.
  *
  * @param {PropertiesMixinConstructor} constructor PropertiesMixin constructor
  * @return {Object} Memoized properties object
  */
 function ownProperties(constructor) {
   if (!constructor.hasOwnProperty(JSCompiler_renameProperty('__ownProperties', constructor))) {
     let props = null;

     if (constructor.hasOwnProperty(JSCompiler_renameProperty('properties', constructor)) && constructor.properties) {
       props = normalizeProperties(constructor.properties);
     }

     constructor.__ownProperties = props;
   }
   return constructor.__ownProperties;
 }

 /**
  * @polymer
  * @mixinClass
  * @extends {base}
  * @implements {Polymer_PropertiesMixin}
  * @unrestricted
  */
 class PropertiesMixin extends base {

   /**
    * Implements standard custom elements getter to observes the attributes
    * listed in `properties`.
    * @suppress {missingProperties} Interfaces in closure do not inherit statics, but classes do
    */
   static get observedAttributes() {
     const props = this._properties;
     return props ? Object.keys(props).map(p => this.attributeNameForProperty(p)) : [];
   }

   /**
    * Finalizes an element definition, including ensuring any super classes
    * are also finalized. This includes ensuring property
    * accessors exist on the element prototype. This method calls
    * `_finalizeClass` to finalize each constructor in the prototype chain.
    * @return {void}
    */
   static finalize() {
     if (!this.hasOwnProperty(JSCompiler_renameProperty('__finalized', this))) {
       const superCtor = superPropertiesClass(/** @type {!PropertiesMixinConstructor} */(this));
       if (superCtor) {
         superCtor.finalize();
       }
       this.__finalized = true;
       this._finalizeClass();
     }
   }

   /**
    * Finalize an element class. This includes ensuring property
    * accessors exist on the element prototype. This method is called by
    * `finalize` and finalizes the class constructor.
    *
    * @protected
    */
   static _finalizeClass() {
     const props = ownProperties(/** @type {!PropertiesMixinConstructor} */(this));
     if (props) {
       this.createProperties(props);
     }
   }

   /**
    * Returns a memoized version of all properties, including those inherited
    * from super classes. Properties not in object format are converted to
    * at least {type}.
    *
    * @return {Object} Object containing properties for this class
    * @protected
    */
   static get _properties() {
     if (!this.hasOwnProperty(
       JSCompiler_renameProperty('__properties', this))) {
       const superCtor = superPropertiesClass(/** @type {!PropertiesMixinConstructor} */(this));
       this.__properties = Object.assign({},
         superCtor && superCtor._properties,
         ownProperties(/** @type {PropertiesMixinConstructor} */(this)));
     }
     return this.__properties;
   }

   /**
    * Overrides `PropertiesChanged` method to return type specified in the
    * static `properties` object for the given property.
    * @param {string} name Name of property
    * @return {*} Type to which to deserialize attribute
    *
    * @protected
    */
   static typeForProperty(name) {
     const info = this._properties[name];
     return info && info.type;
   }

   /**
    * Overrides `PropertiesChanged` method and adds a call to
    * `finalize` which lazily configures the element's property accessors.
    * @override
    * @return {void}
    */
   _initializeProperties() {
     this.constructor.finalize();
     super._initializeProperties();
   }

   /**
    * Called when the element is added to a document.
    * Calls `_enableProperties` to turn on property system from
    * `PropertiesChanged`.
    * @suppress {missingProperties} Super may or may not implement the callback
    * @return {void}
    * @override
    */
   connectedCallback() {
     if (super.connectedCallback) {
       super.connectedCallback();
     }
     this._enableProperties();
   }

   /**
    * Called when the element is removed from a document
    * @suppress {missingProperties} Super may or may not implement the callback
    * @return {void}
    * @override
    */
   disconnectedCallback() {
     if (super.disconnectedCallback) {
       super.disconnectedCallback();
     }
   }

 }

 return PropertiesMixin;

});

Where is the unexpected { token? Will someone help me track this down? :)

[arianics]

Hey @aadamsx, I'm not familiar with meteor but are you transpiling your code in any way?

[aadamsx]

Thanks for the quick feedback!

I'm using ES6, no TypeScript.

Meteor (kinda a build tool) uses the babel runtime 7.0.0.-beta.56 as you can see from my package.json.

[Westbrook]

In one of the screenshots above notated as "Points to this location:" the code is being delivered as:

function() {
  import {...

import statements have to be at the root. If meteor is building the code that way, it needs to transpile imports into something else for that to work.

[arianics]

In addition to @Westbrook's comment if you're not transpiling you have to add type="module" to any script tag that loads a module.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

[aadamsx]

In addition to @Westbrook's comment if you're not transpiling you have to add type="module" to any script tag that loads a module.

Right, I'm not even importing the LitElement base class component into the app yet using the script statement, I'm getting an error simply adding a file and doing a import of LitElement. In other words, as soon as Meteor tries to resolve the import, it throws the error above.

[aadamsx]

I've provided a reference repo here: https://github.com/aadamsx/meteor-lithtml

[Westbrook]

Have you tried the meteor API modules documentation? https://docs.meteor.com/packages/modules.html Seems like it’s needed in some way to make sure your compilation is clean. And in this case absolutely the ecmascript version. To be clear, this is absolutely an issue with how meteor is building your code.

[aadamsx]

Thanks for the feedback @Westbrook

[aadamsx]

Just in case we have any more Meteor users stop by with an issue like this, here are the references to the explanation & solution:

explanation: https://forums.meteor.com/t/litelement-import-litelement-html/45042/8?u=aadams

solution: https://github.com/aadamsx/meteor-lithtml/pull/1