Tools: [poylmer-cli] "polymer serve" doesn't transform dependency references

[ErikHellman]

I'm trying out the Material Web Components as described at https://github.com/material-components/material-components-web-components

The problem is that polymer serve doesn't seem to transform the paths correctly in my index.html. When I add the following to my index.html;

<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="@material/mwc-icon/mwc-icon.js"></script>

I get an error when I run polymer lint and a 404 for the two scripts when I load the page after serving it through polymer serve.

My polymer.json looks like this;

{
  "npm": true,
  "moduleResolution": "node",
  "lint": {
    "rules": [
      "polymer-3"
    ]
  }
}

Amy I missing some vital step or is this not yet supported?

[aomarks]

polymer serve/build doesn't transform script src attributes, only import statements, so you'll need something like this:

<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module">
  import '@material/mwc-icon/mwc-icon.js';
</script>

[morbidick]

I just ran into the same issue, is there any specific reasoning for this behaviour? I think supporting script type="module" would help on pages that just assemble prebuilt components like for example demos.

[usergenic]

@morbidick its an interesting and potentially really nice feature to be able to resolve the node package specifiers across URL element attributes, but it has some non-trivial demands on the way that the polymer-analyzer functions and resolves URLs. We'd need to really flesh out the behaviors and expectations of this as a feature before adding this.

[morbidick]

@coreyfarrell just mentioned an issue with rewriting script sources on the slack channel

A script src attribute's value is not required to start with a dot or slash (even for type="module"). If someone has <script type="module" src="somewhere/something.js"> - this means import './somewhere/something.js'. would be ambiguous for a build tool to rewrite those src attributes.

Maybe only sources starting with an @ could be rewritten? With the drawback of requiring npm namespaces...

[jsilvermist]

@morbidick That would break things such as: pwa-helpers, prism, etc.