I want to use momentjs in a webcomponent for a custom card in home-assistant
When I try to import the library, I get the following error:
Cannot set property 'moment' of undefined
import './lib/moment.min.js';
class ContentCardExample extends HTMLElement {
...
}
Any idea what is going on?
If you installed moment from npm, you should import it as:
import moment from 'moment/src/moment.js';
and include any locales like this (in case you need them:
import 'moment/src/locale/es.js';
Related
import { LitElement, html } from 'lit-element';
class MyPublic extends LitElement {
render(){
return html`
<p>A paragraph</p>
`;
}
}
customElements.define('my-public', MyPublic);
I defined a public web component like that in MyPublic.js. And then when I need to use it in FooComponent.js, I will import MyPublic.js, when I need to use it in BarComponent.js, I will also import MyPublic.js. It will cause re-definition for my-public.
How to avoid it?
Just import all the web components in index.js, and then don't import it anymore?
No, this will not cause a re-definition of your element, the same way your final (live) JavaScript code in the browser doesn't contain a dozen copies of the LitElement or Polymer library.
Imports are de-duped by the browser's runtime. This implies that global variables defined in a module also exist only once in memory, and more generally that free code in modules is only executed once.
You can read more about this in the spec. But essentially:
This [import] operation must be idempotent if it completes normally. Each time it is called with a specific referencingScriptOrModule, specifier pair as arguments it must return the same Module Record instance.
I do my development using modern JS (ES6) which means modules.
Although Three.js is available as an ES6 module. The line library - LineSegmentsGeometry, LineGeometry, LineSegments2, etc. - is not.
What are my options here?
You have a couple options.
First and foremost, edit the code.
You're welcome to modify the code, and so you could manually turn it into an ES6 module. You would want to remove any references of THREE, and export anything that was normally attached to that object. You'll also need to import any required core THREE.js components, like Mesh, Vector3, etc.
The way I prefer to do this is to copy the file I'm updating locally, and change references to it. For example:
// local_three_modules/LineSegments2.js
import { Mesh, Vector3, etc. } from "three"
let LineSegments2 = function ( geometry, material ) {
// ...
}
export default LineSegments2
// app.js
import { Mesh, Vector3, etc. } from "three"
import LineSegments2 from "./local_three_overrides/LineSegments2.js"
// and so on...
Your other option is to use a bundler with an export loader.
Webpack (and other bundlers, I'm just more familiar with Webpack) provides a exports-loader which can be used against specific files that don't export anything. For example, you can tell the exports-loader to export THREE from LineSegments2.js. To get webpack involved in this process, you need to tell it to use the loader on the file. You can do this through the webpack configuration, or inline in the code like this:
import THREE from "exports-loader?THREE!./node_modules/three/examples/js/lines/LineSegments2.js"
This is the app component. It gives an error that it can't find module pages/question/pages/question1/question1
This is the app module where I declared the question1. still the same error.
Your import path is wrong, it should be as,
import {question1} from './pages/questions/pages/question1'
I've previously used the following code
import { clone } from '../../utilities/javascript';
and in the javaccript.ts
export function clone(source: any) {...}
In my module i made the call using the following syntax:
this.x=clone(y);
And all was working.
However, since I am using Angular-cli, the following exception comes up in Chrome:
error_handler.js:47 EXCEPTION: Cannot read property 'clone' of undefined
Is there something in my syntax that is wrong, which surfaced just as I switched to Angular-cli?
I currently copy this function into every module in which i use it, which solves the problem, but that is not something I am comfortable with.
try to import it in the following way:
import * as javascriptUtils from '../../utilities/javascript';
then call it with:
this.x=javascriptUtils.clone(y);
taken from https://github.com/angular/angular-cli#3rd-party-library-installation
If you define a class in actionscript that has the same name as a class in the top level package (e.g. Array) there seems to be no way of explicitly referencing the class in the top level package.
UPDATE: This issue is only appearing in Flash Builder 4.7 with the new ASC 2.0 compiler, using Flash Builder 4.6 with an 'old' Flex SDK it works.
Example:
package
{
import flash.display.Sprite;
import mypackage.Array;
public class AS3Problem extends Sprite
{
public function AS3Problem()
{
var myOwnArray:mypackage.Array = new mypackage.Array();
// The line below will cause a compile error
// 'Ambiguous reference to Array'
var flashArray:Array = new Array();
}
}
}
I know the simple solution to this problem is to not create classes with a name that is the same as an as3 top level package class/function, but I'm intrigued as to how this could be 'fixed' in some way by explicitly referring to this package or some other means.
For those interested, I happened to accidentally import 'Array' from hamcrest-as3 while writing tests which caused a problem like this.
Try removing this line
import mypackage.Array;
so you do not import this custom Array and you always use the fully qualified name, I did not tested it but this should fix it.
EDIT:
I tested this and yes you have to add this import line, it will not work , but I can't reproduce the error, I can use and custom Array and the global Array fine with no issue/error or warrning.
EDIT2:
This also worked for me, can you test this too?
var globalArray:Class=(getDefinitionByName('Array') as Class);
var arr2:*=new globalArray();
arr2.push("test");
trace(arr2);