I have an aframe project that has been part of a React app and working fine.
Because of various issues I'm trying to seperate the layers
I've added the aframe scene directly into the HTML document
<body>
<div id="root" style="height: 100%; width: 100%">
</div>
<a-scene>
</a-scene>
</body>
The React part is rendering fine, but AFRAME is crashing with
TypeError: systems[name] is not a constructor
from
this.systems[name] = new systems[name](this);
this.systemNames.push(name);
The aframe library is imported via Webpack.
Any ideas what could cause this?
I've had the same issue when using Aframe trough npm or when adding it with a script tagg when it has a type="module" or defer attribute.
Working script:
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
This is probably because you are using custom html taggs with a-frame. So the script should be loaded before it is parsing the html.
Not working (currently on my environment):
<script src="https://aframe.io/releases/1.3.0/aframe.min.js" defer></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js" type="module"></script>
>> npm i aframe
import aframe from "aframe";
Would be nice to see some comment/solutions on the not working variants.
Setup:
system: windows 10
bundler: vite
node: v16.13.0
aframe: v1.3.0
I had the same problem today. I was using Cloudflare with Rocket Loader. That’s why it wasn’t working. Once I disabled it, it worked fine.
Related
Is the only way to use an external stylesheet with Elm to use Browser.element and do something like the following?
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="spectre.min.css">
<script src="elm.js"></script>
</head>
<body>
<div id="elm-app-is-loaded-here"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById("elm-app-is-loaded-here")
});
</script>
</body>
</html>
What if I want to use a Browser.Document instead, or even a Browser.Application ?
When searching the internet for Elm and CSS, I only find libraries that write CSS using Elm, or that replace CSS with Elm code. But what if I already have a CSS stylesheet that I want to use. I'd like to use Spectre CSS. It's just a single CSS file "spectre.min.css". Can I use that with Elm in a simple way?
If you want to control the HTML document (i.e. the head section) where your app is running in then you have to switch from using elm-reactor to embedding the compiled Elm app like described in the Elm guide.
I have created a little boilerplate setup that allows me to control the "index.html" and have hot code reloading via a little script (no other dependencies).
I have installed mudblazor through NuGet and followed the "tutorial" on how to set up mudblazor, I did everything step by step but for some reason the component appears without any css or js. I had to link a css and js file in _host.cshtml:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
but the problem is that it still doesn't seem to work.
Try to clone a MudBlazor template from github, https://github.com/Garderoben/MudBlazor.Templates, it should work out of the box, with all pre-requisites installed. If not, there is something wrong in your environment
Create a razor component named _Imports in the folder of your pages and add the following: #layout MainLayout
In your MainLayout you should have:
<MudThemeProvider/> <MudDialogProvider/> <MudSnackbarProvider/>
In program.cs there is a missing instruction.
add the following line before builder.build() is called.
StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment, builder.Configuration);
I spotted the discrepancy here: https://github.com/MudBlazor/Templates/blob/dev/src/.template.base/server/Program.cs#L9
Empty your browser cache and do a hard reload (press F12 in Chrome, then right-click on the reload icon and select "Empty cache and hard reload"). This will get the new client-side css and js content loaded in your Blazor WASM client.
Make sure you set your base href like below:
<base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
Incase anybody encouncer this issue in production environment, the above solutions did not work for me.
This is what works for me, first publish your app to folder then open the published wwwroot folder to copy the _content folder to production.
if MudBlazor works on development then the _content folder contains the MudBlazor files.
Hello guys I am new to node.
I have installed animate.css via npm and tested it on a HTML <div> element it created like usual the JSON package file. The code e.g.:
<h1 class="animate__animated animate__pulse">Animate box</h1>
<div class="animate-box animate__animated animate__pulse"></div>
Nothing is moving? Do I have to link it in head anyways?
Thank you for the noob question :D
For usage with the npm package, you'll need a full asset build stack which compiles animate.css into whatever CSS bundle your page already uses.
Because you said you are new to code, I highly suggest you stay away from this topic for a while. Instead, simply make use of the other suggested way, including animate.css via a content delivery network (CDN):
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
I spent the last 5-6 days to migrate a relatively big, legacy Polymer 0.5 application to Polymer 2, and that was not a piece of cake.
Everything was successful in local. When deploying it online with the new version, I get a new surprise, the application's UI is broken and the console is filled with this type of messages:
Uncaught TypeError: Polymer is not a function
at iron-meta.html:125
at iron-meta.html:215
iron-icon.html:146 Uncaught TypeError: Cannot read property 'create' of undefined
at iron-icon.html:146
iron-iconset-svg.html:50 Uncaught TypeError: Polymer is not a function
at iron-iconset-svg.html:50
iron-pages.html:56 Uncaught TypeError: Polymer is not a function
at iron-pages.html:56
iron-image.html:145 Uncaught TypeError: Polymer is not a function
at iron-image.html:145
paper-card.html:167 Uncaught TypeError: Polymer is not a function
at paper-card.html:167
paper-toolbar.html:292 Uncaught TypeError: Polymer is not a function
at paper-toolbar.html:292
paper-ripple.html:440 Uncaught TypeError: Polymer is not a function
at paper-ripple.html:440
at paper-ripple.html:764
paper-button.html:170 Uncaught TypeError: Polymer is not a function
at paper-button.html:170
paper-checkbox.html:239 Uncaught TypeError: Polymer is not a function
at paper-checkbox.html:239
iron-overlay-backdrop.html:62 Uncaught TypeError: Polymer is not a function
at iron-overlay-backdrop.html:62
at iron-overlay-backdrop.html:166
iron-overlay-manager.html:48 Uncaught TypeError: Cannot read property 'add' of undefined
at new Polymer.IronOverlayManagerClass (iron-overlay-manager.html:48)
at iron-overlay-manager.html:382
And the list goes on. Errors of the type "Polymer is not a function" happen on this type of code:
<script>
(function() {
'use strict';
Polymer({ <=======
is: 'paper-toast',
What I can't understand first is from where the difference between the dev and production environments comes from.
In the Network tab, I can see that all vendor webcomponents are loaded in the same order and no requests are failing. It just doesn't work in prod, and that makes debugging complicated.
It is a Meteor app, with Blaze and Polymer (that's a bad cocktail, I know).
The code roughly looks like this:
imports.html (simplified)
<head>
<script>
window.Polymer = {
lazyRegister: true
};
</script>
<!-- Webcomponents Polyfill -->
<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- Polymer elements -->
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/app-layout/app-layout.html">
<link rel="import" href="/bower_components/iron-collapse/iron-collapse.html">
<!-- etc -->
</head>
app.html (application root view, simplified)
<template name="applicationLayout">
<app-drawer-layout>
<!-- Left title and menu -->
<app-drawer slot="drawer">
<app-toolbar></app-toolbar>
{{>menu}}
</app-drawer>
<!-- Main content, page, router yielder -->
<app-header-layout>
<app-header slot="header">
<app-toolbar>
<div>{{>topBarMenus}}</div>
</app-toolbar>
</app-header>
<div>{{>yield}}</div>
</app-header-layout>
</app-drawer-layout>
</template>
<template> and the mustache tags are Blaze things.
You can notice that I have no <body>, <html> or other includes (for Meteor, etc), this is really the only bootstrapping code of my app. I have no control on this. Meteor detects <head> and injects it, but creates the rest itself, inserts its stylesheets, etc. I can't create it myself. I know it's stupid. I don't like Meteor or Blaze either.
I know that Polymer recommends to put the application root in a <dom-module>, in another HTML file, loaded with an HTML import, etc, but I can't even do that (thanks to Meteor), nor I can rewrite the whole app (although I'd like to).
Is there a workaround? I mean, it's working in development. What could cause this? It happens in all browsers.
Well it seems that I was very tired that day, and after coming back to this problem two days later, I've found and fixed the problem in like, 20 minutes.
In my case, there was a missing webcomponent bower package in my bower.json. It was installed on my machine but forgot to save it (bower i -S) to the manifest. In production, it was therefore not installed.
In my particular case, my setup of Meteor sends 200 status codes with the index file when the requested file isn't found. That silenced the error I would normally have with a missing package. But it was making the Polymer initialization crash in a non-explicit manner.
The moral is:
Double check your packages!! Versions, peer dependencies, missing ones, etc.
When possible, use another package manager than Bower (too bad Polymer still depends on it) or npm, that are quite bad, and just use yarn.
I'm trying to start using Polymer with Meteor, but have seen the following behaviour that I can't explain.
To reproduce git clone https://github.com/JeremyKells/meteor-polymer-testing.git and run meteor.
This is just the app created with:
meteor create testpoly
and then adding the polymer components with bower:
bower install --save Polymer/polymer
bower install --save PolymerElements/iron-elements
bower install --save PolymerElements/paper-elements
and adding the section to the code .
As is this runs ok, but if you remove the comments around either of these two lines:
<!-- <link rel="import" href="/bower_components/paper-dropdown/paper-dropdown.html"> -->
<!-- <link rel="import" href="/bower_components/paper-dialog/paper-action-dialog.html"> -->
The app shows the normal meteor counter app twice like this:
http://i.stack.imgur.com/KAv7Z.png
Why is this happening? How do I stop this?
Further info following Guissouma's response. I'm running this on Ubuntu 15.04, and mainly testing with chrome. When the UI elements are duplicated, clicking either button only updates the second 'counter', the first count remains at zero.
And on Firefox in this same environment, there is just the one set of UI elements, but the button does not work.
i.stack.imgur.com/bqumz.png
Trying with both Safari and Chrome on iphone connecting to this server give same results as firefox: It looks ok, but the button doesn't update the count value.
I tested the project with meteor on windows, it works as expected! I remove the comments from headers.html The app shows the normal meteor counter app.
On ubuntu 15.0.4 with firefox the button seem not working, this is due to the js file webcomponents.js imported on headers.html file.
Try to comment this line on headers.html and test again.
<!-- <script src="/bower_components/webcomponentsjs/webcomponents.min.js"></script> -->
This was a case of getting the import links wrong, when changing from Polymer 0.5 to Polymer 1.0.
It should be:
<link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
While I'm still confused as to why this caused html tags to be duplicated, and why this doesn't throw an error in the browser, it all works when I get the code correct!
tl;dr
Make sure your bower dependencies for Polymer and PaperElements are up to date. (i.e. use #^1.0.0 instead of #1.0.0.)
Details
The root cause of this issue is two fold:
Meteor responds with the content of the main page even when there is no resource at the path request, but it does not use a 404 (Not Found) status code.
HTML imports will include a referenced document into the page unless the response is an error.
It doesn't even matter if you're using Polymer. The following Meteor app will exhibit the duplication behavior:
<head>
<link rel="import" href="bad-link.html">
</head>
<body>
I'm Duplicated!<br>
</body>
The solution is to make sure your HTML imports are valid.
In my case, paper-icon-button.html had an import for paper-behaviors/paper-radio-button-behavior.html which doesn't exist in the latest version of paper-behaviors.
The reason for the inconsistency is because paper-icon-button was locked at version #1.0.0 but its own bower dependencies referenced paper-behaviors#^1.0.0 which means the latest version >= 1.0.0 and < 2.0.0.
The solution was to change my bower dependencies versions to use the semver caret syntax as well.
{
"dependecies": {
"polymer": "Polymer/polymer#^1.2.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
}
}