Tools: Polymer build: no output except for polymer.json

[Myrmex]

Description

I'm trying to build a Polymer element project built with Polymer CLI, but nothing gets built in the build directory. The only file I can find there is a polymer.json file with this content:

{
  "entrypoint": "index.html",
  "fragments": [],
  "sources": [
    "src\\**\\*",
    "index.html"
  ],
  "extraDependencies": [
    "bower_components\\webcomponentsjs\\*.js"
  ],
  "builds": [
    {
      "bundle": true,
      "js": {
        "minify": true
      },
      "css": {
        "minify": true
      },
      "html": {
        "minify": true
      }
    }
  ],
  "lint": {
    "rules": [
      "polymer-2"
    ]
  }
}

Versions & Environment

• Polymer CLI: 1.5.7
• node: 8.9.1
• Operating System: Windows 10 Pro

Steps to Reproduce

1. Create an application project: polymer init:

2. `polymer init`:
'uname' is not recognized as an internal or external command,
operable program or batch file.
? Which starter template would you like to use? polymer-2-element
info:    Running template polymer-2-element...
? Element name repro-element
? Brief description of the element Repro
   create bower.json
   create demo\index.html
   create index.html
   create polymer.json
   create README.md
   create test\index.html
   create repro-element.html
   create test\repro-element_test.html

Project generated!

3.polymer build:

info:    Clearing build\ directory...
info:    (default) Building...`

Expected Results

Bundled file.

Actual Results

No file except for a JSON file with some configuration.

[merlinnot]

https://github.com/isaacs/node-glob/#windows

Despite working in Windows environment you should use forward slashes the way God wants you to :smiling_imp: :wink:

[Myrmex]

Thank you, but I'm not sure about where should I check for backslashes: AFAIK, my JSON files only use forward slashes. Here is the relevant part of bower.json:

{
  "dependencies": {
    "polymer": "Polymer/polymer#^2.0.0"
  },
  "devDependencies": {
    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
  },
  "resolutions": {
    "polymer": "^2.0.0"
  }
}

and polymer.json:

{
  "lint": {
    "rules": [
      "polymer-2"
    ]
  },
  "builds": [{
    "bundle": true,
    "js": {"minify": true},
    "css": {"minify": true},
    "html": {"minify": true}
  }]
}

[merlinnot]

There are backslashes in your first post (extraDependencies and sources). I’ll take a look on Windows machine tomorrow. I’m wondering why does it call uname...

[Myrmex]

Thanks again, BTW the first JSON snippet quoted in my post is not part of my source: it's the only output of the build process. Don't know why it outputs what seems a config file and then stops.

[jsilvermist]

The output seems similar to #904 where it fails silently when any import or lazy-import's file path is invalid.

Edit:

Just realized this is an element you're trying to build.

Elements aren't meant to be built alone, and are set up to be tested using polymer serve and consumed by an application, where the application is later built as a whole.

Since it's using paths like ../path which are not able to be resolved properly, you end up with a silently failing build until #904 is resolved.

[Myrmex]

Thanks, I thought I had to use the element template when just creating a single Polymer element to be consumed elsewhere. If I change the template it builds the HTML page and its dependencies. One further question though: what would be the suggested path if I just wanted to include a single Polymer element of mine in some webpage, e.g. a Wordpress page? Is there any packaging procedure or the only way for distributing elements is through a public or private registry on the web? In my case, this would be an overkill because such elements are just built for demo purposes and I'd like them to live inside a page. Thanks anyway!

[jsilvermist]

@Myrmex That's a good question, maybe someone like @justinfagnani or @FredKSchott could shed some light on the recommended build configuration for that type of use case.

I've experimented with transpiling to es5 and creating a simple bundled element set using the following configuration to create a bundled elements.html document, but the downside to this method is that you need to manually paste the output from entrypoint.html for polyfills and helpers where you want to load the elements. (Though that would be simplified if not compiling to es5)

---

entrypoint.html

<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="elements.html">

elements.html

<!-- Element Imports -->
<link rel="import" href="bower_components/element-path/element-one.html">
<link rel="import" href="bower_components/another-element/element-two.html">

polymer.json

{
  "entrypoint": "entrypoint.html",
  "shell": "elements.html",
  "builds": [
    {
      "name": "./",
      "preset": "es5-bundled",
      "addServiceWorker": false,
      "addPushManifest": false
    }
  ]
}

[FredKSchott]

@jsilvermist thanks for taking a look at this! Right now you shouldn't need to build elements, and our tools are set up for building applications only. Errors are expected if you try to build an element.

The approach we've taken is that elements are published using modern JS/Browser features, and consumers can then choose whether to compile them or not.

For help adding an element to a page, this is a great walkthrough: https://www.polymer-project.org/2.0/start/quick-tour

[Myrmex]

Thanks to all, that's not optimal but I found that just adding this script:

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>

and then pasting into the head of an empty HTML page the code of the HTML file built by the CLI, from the 1st script tag to the closing body tag, it seems to work. Of course in environments like Wordpress I would have to use some plugins to include the script code, but at least for very simple elements like mine this seems to work. Yet, an out of the box "official" solution would be of great use!

[robertfoobar]

I ran into the same problem. I'm new to Polymer, so maybe I'm not getting this to the full extend. I'm currently working for a bigger corporation and we would like to use Polymer as a technology basis for different micro-service teams to develop and share their reusable elements (at runtime). It is crucial for us to have an official build and bundling process for single elements.

@FredKSchott What kind of technologies do you mean, when you say

elements are published using modern JS/Browser features

In my imagination web component clients can simply load bundled JS from a provided endpoint. They then will retrieve all the JS code, Templates and Styles and do not need to bother about compilation or the like. I would like to decouple them as much as possible from my component - not only in the DOM but also in the development process.

Is something like that possible with Polymer?
Thanks for your help and the good work!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.