Polymer doesn't work when installed with Bower - polymer

Edit: it's working now, I just reinstalled Polymer from scratch. Can't find out what I was doing wrong before.
-.-
I'm testing with one of the layouts.
When Polymer in installed with Bower layout does not work, console log is given at the end of this msg.(In this case components are placed in /bower_components folder)
But when I just copy-paste /components folder from given polymer-tutorial (and point the links in the layout to there) everything works fine.
What am I missing so installation with Bower wont work?
Here is the console log:
XHR finished loading: GET "chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content.min.css". content.min.js:1
XHR finished loading: GET "http://somehost/sites/test/polymer-tutorial-layout/bower_components/core-toolbar/core-toolbar.css". loader.js:87
XHR finished loading: GET "http://somehost/sites/test/polymer-tutorial-layout/bower_components/core-header-panel/core-header-panel.css". loader.js:87
XHR finished loading: GET "http://somehost/sites/test/polymer-tutorial-layout/bower_components/core-drawer-panel/core-drawer-panel.css". loader.js:87
XHR finished loading: GET "http://somehost/sites/test/polymer-tutorial-layout/bower_components/core-icon-button/core-icon-button.css". loader.js:87
Exception caught during observer callback: TypeError: undefined is not a function
at core-menu.Polymer.addListener (http://somehost/sites/test/polymer-tutorial-layout/bower_components/core-selector/core-selector.html:273:17)
at core-menu.Polymer.targetChanged (http://somehost/sites/test/polymer-tutorial-layout/bower_components/core-selector/core-selector.html:266:16)
at core-menu.g.invokeMethod (http://somehost/sites/test/polymer-tutorial-layout/bower_components/polymer/polymer.js:12:12916)
at core-menu.g.notifyPropertyChanges (http://somehost/sites/test/polymer-tutorial-layout/bower_components/polymer/polymer.js:12:11202)
at Object.Observer.report_ (http://somehost/sites/test/polymer-tutorial-layout/bower_components/platform/platform.js:12:12814)
at Object.createObject.check_ (http://somehost/sites/test/polymer-tutorial-layout/bower_components/platform/platform.js:12:18305)
at c (http://somehost/sites/test/polymer-tutorial-layout/bower_components/platform/platform.js:12:5610) observe.js:769
Exception caught during observer callback: TypeError: undefined is not a function
at core-selector.Polymer.addListener (http://somehost/sites/test/polymer-tutorial-layout/bower_components/core-selector/core-selector.html:273:17)
at core-selector.Polymer.targetChanged (http://somehost/sites/test/polymer-tutorial-layout/bower_components/core-selector/core-selector.html:266:16)
at core-selector.g.invokeMethod (http://somehost/sites/test/polymer-tutorial-layout/bower_components/polymer/polymer.js:12:12916)
at core-selector.g.notifyPropertyChanges (http://somehost/sites/test/polymer-tutorial-layout/bower_components/polymer/polymer.js:12:11202)
at Object.Observer.report_ (http://somehost/sites/test/polymer-tutorial-layout/bower_components/platform/platform.js:12:12814)
at Object.createObject.check_ (http://somehost/sites/test/polymer-tutorial-layout/bower_components/platform/platform.js:12:18305)
at c (http://somehost/sites/test/polymer-tutorial-layout/bower_components/platform/platform.js:12:5610)

Related

Polymer 3 error - how to configure Rollup --inlineDynamicImport option

I am getting the following error after adding dynamic imports (required for the use case) when trying to build using polymer tools:
info: Clearing build/ directory...
error: Promise rejection: Error: Failed to bundle. Rollup generated 2 chunks or assets. Expected 1.
error: Error: Failed to bundle. Rollup generated 2 chunks or assets. Expected 1.
at Es6Rewriter.<anonymous> (/home/suared/localdev/nodespace/ui/node_modules/polymer-cli/node_modules/polymer-bundler/lib/es6-rewriter.js:138:23)
at Generator.next (<anonymous>)
at fulfilled (/home/suared/localdev/nodespace/ui/node_modules/polymer-cli/node_modules/polymer-bundler/lib/es6-rewriter.js:4:58)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
I found a potential solution in the Rollup docs and the web that referenced this problem being fixed when passing --inlineDynamicImports to the Rollup command. I have not found away to pass this as part of the build process, however. I tried this:
polymer build --auto-base-path --inlineDynamicImport
It reported the error that it is an unknown option. I also tried placing this in the polymer.json as part of the bundle config, unsuccessfully; it doesn't look like it is actually passed to Rollup:
"bundle": {
"inlineCss": true,
"inlineScripts": true,
"rewriteUrlsInTemplates": true,
"sourcemaps": true,
"stripComments": true,
"--inlineDynamicImport": true
}
What is the correct way to pass to the Polymer build tools the --inlineDynamicImport option so that I only get one file and therefore will avoid the "2 chunks" error?
If it helps others till I get a real answer, this workaround worked for me:
Local monkey patch/ update of the following file:
node_modules/polymer-cli/node_modules/polymer-bundler/lib/es6-rewriter.js:74
In the call that reads like the first line, manually add the configuration, leave the rest of the config as-is:
const rollupBundle = yield rollup_1.rollup({
input,
external,
onwarn: (warning) => { },
treeshake: this.bundler.treeshake,
inlineDynamicImports: true, ....(rest of existing command
Any assistance on the right way using the build tools is welcome/ appreciated.
Thanks!
David

Semantic UI gulp rtl watch error

I installed semantic ui, created a custom theme, but when I use gulp watch, the RTL watch.js loads and on every change I get the following error:
Watching source files for changes
Change detected in packaged theme
/home/vagrant/Code/angular/semantic/tasks/rtl/watch.js:109
lessPath = lessPath.replace(tasks.regExp.theme, source.definitions);
^
TypeError: Cannot read property 'replace' of undefined
at /home/vagrant/Code/angular/semantic/tasks/rtl/watch.js:109:28
which has to do with these lines:
else if(isPackagedTheme) {
console.log('Change detected in packaged theme');
lessPath = lessPath.replace(tasks.regExp.theme, source.definitions);
lessPath = util.replaceExtension(file.path, '.less');
}
I didn't change any line in the gulp files. What am I doing wrong?
There's a bug in the gulpfiles afaik. I've created a Pull Request on Github:
https://github.com/Semantic-Org/Semantic-UI/pull/3586

rendr-handlebars with gulp

I'm trying to use gulp as the compiler for my rendr app, but I'm running into the issue of
500 TypeError: template is not a function
at module.exports.Backbone.View.extend.getInnerHtml (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/shared/base/view.js:191:12)
at module.exports.Backbone.View.extend.getHtml (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/shared/base/view.js:198:21)
at ViewEngine.getViewHtml (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/server/viewEngine.js:75:15)
at ViewEngine.render (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/server/viewEngine.js:22:16)
at View.render (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/view.js:126:8)
at tryRender (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/application.js:639:10)
at EventEmitter.render (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/application.js:591:3)
at ServerResponse.render (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/response.js:961:7)
at /home/longjeongs/thinksquareio.github.io/node_modules/rendr/server/router.js:87:11
at Object.module.exports.create (/home/longjeongs/thinksquareio.github.io/app/controllers/users_controller.js:5:5)
I couldn't find any examples of compiling rendr-handlebars and handlebars with gulp anywhere and thought I will try getting some help here.
I have read elsewhere that this is caused by different compiler handlebars and client handlebars version, but I believe that I have the correct ones installed. I have these dependencies installed
│ ├─┬ handlebars#2.0.0
├─┬ gulp-handlebars#3.0.1
├─┬ handlebars#2.0.0
├── rendr-handlebars#2.0.1
and my compiledTempaltes.js file shows "compiler":[6,">= 2.0.0-beta.1"]. My gulp task for handlebars does the following;
gulp.task('handlebars:compile', function () {
return gulp.src('./app/templates/**/[!__]*.hbs')
.pipe(plumber())
.pipe(handlebars({ wrapped : true, handlebars: require('handlebars') }))
.pipe(wrap('templates["<%= file.relative.replace(/\\\\/g, "/").replace(/.js$/, "") %>"] = <%= file.contents %>;\n'))
.pipe(concat('compiledTemplates.js'))
.pipe(wrap('module.exports = function(Handlebars){\ntemplates = {};\n<%= contents %>\nreturn templates \n};'))
.pipe(gulp.dest('app/templates/'));
});
I've tried installing different versions of handlebars, rendr-handlebars, and gulp-handlebars without much luck, any help will be much appreciated.
I'm using gulp with my rendr project... I made a sample app that you can check out... https://github.com/jaredrada/rendrjs-demo
There are a few problems with the browser sync which I've fixed locally- so if you copy the entire gulp setup that portion will not work. I will push my edits to the github repo.

Code breaks after using gulp-uglify : Ionic Framework

I'm just new to Ionicframework and new to using gulp. I am currently setting up my workflow and I use gulp-uglify to minify my app files. After using it the code breaks so I checked on the console and got this error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module ebhealth due to: Error: [$injector:unpr] Unknown provider: t
I am using this gulp function to basically gather all js file from a specified location, concatenate them to all.js then uglify/minify.
gulp.task('app-scripts', function(){
return gulp.src(paths.scripts)
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('www/app-dist/'));
});
After executing this command, I checked the all.js and indeed it looks minified and uglified but when I refresh the browser it throws an error. What am I doing wrong?
add ng-annotate or format properly your injection with, for example ["$scope",function($scope){ }] instead of just function($scope)
its a common mistake / reuirement for angularJS minification / uglification

Polymer website tutorial not running | undefined is not a function

I'm new to polymer and I started to follow this easy first tutorial on the official website
http://www.polymer-project.org/docs/start/tutorial/step-1.html
all was very easy but nothing was working. Or better, I have only one problem. When I tap on the top menu ("All or favourite") nothing changes and I get this error on console
Uncaught TypeError: undefined is not a function Element.js:104
Selected: favorites (index):65
Uncaught TypeError: undefined is not a function Element.js:104
Exception caught during observer callback: TypeError: undefined is not a function
at b.classList (http://127.0.0.1/polymer/components/platform/platform.js:13:20941)
at Polymer.selectedIndexChanged (data:text/javascript;base64,CgogIFBvbHltZXIoJ3BhcGVyLXRhYnMnLCB7CiAgICAKICA…cG9uZW50cy9wYXBlci10YWJzL3BhcGVyLXRhYnMuaHRtbC9wYXBlci10YWJzLmpzCg==:45:26)
at e.invokeMethod (http://127.0.0.1/polymer/components/polymer/polymer.js:12:10242)
at e.notifyPropertyChanges (http://127.0.0.1/polymer/components/polymer/polymer.js:12:9459)
at Object.Observer.report_ (http://127.0.0.1/polymer/components/platform/platform.js:12:12892)
at Object.createObject.check_ (http://127.0.0.1/polymer/components/platform/platform.js:12:18346)
at Object.global.Platform.performMicrotaskCheckpoint (http://127.0.0.1/polymer/components/platform/platform.js:12:13792)
at http://127.0.0.1/polymer/components/platform/platform.js:16:24471
at Object.c [as callback_] (http://127.0.0.1/polymer/components/platform/platform.js:15:9571)
at Array.c (http://127.0.0.1/polymer/components/platform/platform.js:12:27047)
I thought I did something wrong so I downloaded the example file but I have downloaded the source of the example and I still get the same errors.
Any help? =)
Thx everyone!
Some components in the tutorial repo were out of sync. If you pull the updated repo, these errors should go away.
Updating chrome to version 35 or use Chrome Beta
It errors on my linux box which has Chrome Version 34.0.1847.137.
It works on windows7 with Chrome 35.0.1916.153m
I had the same problem.This is the error report https://github.com/Polymer/polymer-tutorial/issues/3
And this is where you can find the answer
https://github.com/Polymer/polymer-tutorial
It worked for me :)