Polymer 2.0 Starter Kit error

[johnlim]

Hi,

I'm getting the following error when doing gulp build on a Polymer-2-starter-kit project, In bower_components/polymer/lib/legacy/polymer-fn.html: [could-not-load] - Unable to load import: Cannot read property 'forEach' of undefined. Any idea what could be wrong? Thanks.

[johnlim]

Just realised I was on a very old version of polymer-build. Latest release has breaking changes, for example project.splitHtml() & project.rejoinHtml() methods have been pulled off of PolymerProject so that multiple streams can split/rejoin in parallel..
Wondering if there are any plans to update and support Polymer 2.0 custom builds?

[jsilvermist]

You can still use split/rejoin, they are just used slightly differently now, eg:

const gulp = require('gulp');
const polymerBuild = require('polymer-build');
const polymerProject = new polymerBuild.PolymerProject(require('./polymer.json'));
const streamSplitter = new polymerBuild.HtmlSplitter();

polymerProject.sources()
.pipe(streamSplitter.split())
// Do split work here...
.pipe(streamSplitter.rejoin());
.pipe(gulp.dest('build'));

IIRC (last time I checked) each splitter can only be used once, so you have to create a new instance for multiple splitters.

For a larger example, see the updated polymer custom-build script here: custom-build: gulpfile.js

[johnlim]

@jsilvermist Thanks for responding. I just realised that when i install the generator via npm install or run polymer init custom-build, the project that gets generated does not contain the latest gulpfile (i.e release v2.0.1). Any idea why I'm not getting the latest gulpfile?

[jsilvermist]

Not sure why you would be getting an old version, maybe try running:

npm -g uninstall generator-polymer-init-custom-build
npm -g cache clear
npm -g install generator-polymer-init-custom-build

Also, make sure you don't have an old version installed locally anywhere.

[johnlim]

@jsilvermist So this is pretty insane. I've done as you suggested but i keep getting this gulpfile

/**
 * @license
 * Copyright (c) 2016 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
 */

'use strict';

const del = require('del');
const gulp = require('gulp');
const gulpif = require('gulp-if');
const imagemin = require('gulp-imagemin');
const mergeStream = require('merge-stream');
const polymerBuild = require('polymer-build');

const swPrecacheConfig = require('./sw-precache-config.js');
const polymerJson = require('./polymer.json');
const polymerProject = new polymerBuild.PolymerProject(polymerJson);
const buildDirectory = 'build';

/**
 * Waits for the given ReadableStream
 */
function waitFor(stream) {
  return new Promise((resolve, reject) => {
    stream.on('end', resolve);
    stream.on('error', reject);
  });
}

function build() {
  return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
    // Okay, so first thing we do is clear the build directory
    console.log(`Deleting ${buildDirectory} directory...`);
    del([buildDirectory])
      .then(() => {
        // Okay, now let's get your source files
        let sourcesStream = polymerProject.sources()
          // Oh, well do you want to minify stuff? Go for it!
          // Here's how splitHtml & gulpif work
          .pipe(polymerProject.splitHtml())
          // .pipe(gulpif(/\.js$/, uglify()))
          // .pipe(gulpif(/\.css$/, cssSlam()))
          // .pipe(gulpif(/\.html$/, htmlMinifier()))
          .pipe(gulpif(/\.(png|gif|jpg|svg)$/, imagemin()))
          .pipe(polymerProject.rejoinHtml());

        // Okay, now let's do the same to your dependencies
        let dependenciesStream = polymerProject.dependencies()
          .pipe(polymerProject.splitHtml())
          // .pipe(gulpif(/\.js$/, uglify()))
          // .pipe(gulpif(/\.css$/, cssSlam()))
          // .pipe(gulpif(/\.html$/, htmlMinifier()))
          .pipe(polymerProject.rejoinHtml());

        // Okay, now let's merge them into a single build stream
        let buildStream = mergeStream(sourcesStream, dependenciesStream)
          .once('data', () => {
            console.log('Analyzing build dependencies...');
          });

        // If you want bundling, pass the stream to polymerProject.bundler.
        // This will bundle dependencies into your fragments so you can lazy
        // load them.
        buildStream = buildStream.pipe(polymerProject.bundler);

        // Okay, time to pipe to the build directory
        buildStream = buildStream.pipe(gulp.dest(buildDirectory));

        // waitFor the buildStream to complete
        return waitFor(buildStream);
      })
      .then(() => {
        // Okay, now let's generate the Service Worker
        console.log('Generating the Service Worker...');
        return polymerBuild.addServiceWorker({
          project: polymerProject,
          buildRoot: buildDirectory,
          bundled: true,
          swPrecacheConfig: swPrecacheConfig
        });
      })
      .then(() => {
        // You did it!
        console.log('Build complete!');
        resolve();
      });
  });
}

gulp.task('build', build);

[jsilvermist]

Oh wow you're right, this hasn't been tagged in a while, 2.0.1 is several many commits behind.

I'll open an issue to tag a new release, in the meantime you can either just copy/paste the gulpfile from the link above, or you can install the master branch with npm using:

npm install -g git://github.com/PolymerElements/generator-polymer-init-custom-build.git#master

(Not entirely sure how this would affect updates however, maybe no updates, maybe an update per commit?)

EDIT: Now that I think about it, opening a new issue was probably overkill... oh well haha

[stramel]

Yeah, I noticed it was way out of date the other day too. Forgot to get around to posting an issue.

[johnlim]

@jsilvermist @stramel Thanks for confirming the issue guys! :)

[oneezy]

Any headway on this? The problem brought me here as well.

It seems even when trying your recommended install @jsilvermist,,

npm install -g git://github.com/PolymerElements/generator-polymer-init-custom-build.git#master

and then typing the command

polymer init custom-build

It's not even taking me through the "yo" walk through, it's just installing the Starter Kit.

[stramel]

If you specify the template in the first command it won't take you through the menu so that is expected.

We are still waiting on the PSK submodule to be updated to the latest but @FredKSchott did tag a more updated version of this project.

[oneezy]

Hi @stramel ,
I have both Polymer CLI (v1.2.0) and Polymer Custom Build (v2.1.0) installed but didn't fix it.
I went ahead and npm install -g again just to be sure..

Justin@Oneezy: custom-build$ npm list -g --depth=0 && node --version

/home/Justin/.nvm/versions/node/v8.0.0/lib
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] (github:PolymerElements/generator-polymer-init-custom-build#7fb40d35a52cf24589064a16ab74c748977c36e6)
├── [email protected] -> /mnt/c/Users/Work/Desktop/generators/generator-polymer-init-element-scaffold
├── [email protected] (github:FriendsOfPolymer/polymer-generator-init-fop-element-2#58386a8d6076ce8f98b1f98171c5280a7d265a65)
├── [email protected] (github:gulpjs/gulp#38246c3f8b6dbb8d4ef657183e92d90c8299e22f)
├── [email protected]
├── [email protected]
└── [email protected]

v8.0.0

Justin@Oneezy:/mnt/c/Users/Work/Desktop/examples/custom-build$ npm install -g polymer-cli

npm WARN deprecated [email protected]: ..psst! While Bower is maintained, we recommend Yarn and Webpack for *new* front-end projects! Yarn's advantage is security and reliability, and Webpack's is support for both CommonJS and AMD projects. Currently there's no migration path but we hope you'll help us figure out one.

npm WARN deprecated @types/[email protected]: See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/12826
/home/Justin/.nvm/versions/node/v8.0.0/bin/polymer -> /home/Justin/.nvm/versions/node/v8.0.0/lib/node_modules/polymer-cli/bin/polymer.js

+ [email protected]
added 1 package and updated 18 packages in 50.713s

---

Here's what the polymer init command brings up:

polymer-starter-kit-custom-build - A starting point for Polymer 1.0 custom build apps

---

Is the PSK Submodule holding this back or am I missing something?