Polymer: package.json missing shadycss dependency

[pomber]

I was trying using polymer 2.0 from npm, but it seems that some imports are failing because of a missing dependency in the package.json:

ERROR in ./~/@polymer/polymer/lib/legacy/legacy-element-mixin.html
Error: Can't resolve '../../../shadycss/apply-shim.html' 

ERROR in ./~/@polymer/polymer/lib/elements/custom-style.html
Error: Can't resolve '../../../shadycss/custom-style-interface.html' 

shadycss is included as a devDependency, it probably should be a dependency.

Another problem is that npm, unlike bower, installs shadycss under @webcomponents/shadycss, which will make the import fail even if it is added as a dependency.

And yet another problem is that, given that npm installs polymer under @polymer, one more ../ should be added.

I fixed it by installing @webcomponents/shadycss and changing the imports to <link rel="import" href="../../../../@webcomponents/shadycss/apply-shim.html"> and <link rel="import" href="../../../../@webcomponents/shadycss/custom-style-interface.html">. But I guess this will break bower installation.

Is this an issue or am I doing something wrong?

[dfreedm]

Ah yeah, those should be in the dependencies block.
You're also right that as written, the import links will not work from NPM.

This is something we're going to improve on in the future with tooling, but for now npm support is experimental.

[leogr]

About the import links in NPM... the main issue was discussed #326 ...It's been a lot of time since my team is forced to use custom build scripts to workaround that 😢

@azakus
Is there a sort of planning to solve that?
How could the community help you in order to solve the NPM problem?

A definitive solution will be very appreciated! 👍

[madeleineostoja]

@azakus a build tool solution might be okay for polymer apps, but wouldn't really be teneble for distributable components? Unless I'm misunderstanding the proposition.

Specific eg: Yarn support at Simpla is a top priority, because Bower is deprecated and we get a lot of complaints about our reliance on it. To the point that we're starting to look at what would be required to move away from Polymer, since not a lot has happened on the NPM front in the 4 years since the issue was raised. We couldn't force a polymer-specific buildstep on users just to support Yarn.

Would having a sans-shadycss build of Polymer fix this? Which just assumes to be in an environment with CSS var and mixin support?

And reiterating what @leogr said - is there anything the community can do to move this forward?

[moebiusmania]

This is something we're going to improve on in the future with tooling, but for now npm support is experimental.

@azakus I think that 7 days ago the Bower website was not showing the now infamous banner, has this official statament changed the priority regarding @pomber and @seaneking request?

[moebiusmania]

@pomber @seaneking @leogr if you want to give it a try https://github.com/contactlab/polymer , we have made a fork of Polymer repo where we have fixed the shadycss reference path making it work as NPM package and also exports both polymer and polymer-element as .js files, so if you want to use it with a Webpack workflow you can

import '@polymer/polymer' // hybryd/legacy version
import '@polymer/polymer/polymer-element' // Polymer 2

I know there is a lot of "polymer" maybe we will work on it later 😅

[arturparkhisenko]

I hope today we'll get npm version with es6 modules, announced on Polymer Summit 2017 👍

[richturner]

What's the status of this? Still seems to be an issue.

IMHO: If you want web components (and for the time being Polymer) to be embraced by the web community then doing a half baked transition to NPM and ES6 modules is not helpful.

[madeleineostoja]

@richturner Polymer 3 is moving entirely to JS, using ES6 modules, and ditching HTML imports, Bower, and HTML templating. Making this a non-issue.

I doubt this will be solved for Polymer 2 before then, and (I think) the Polymer 3 launch is waiting on wider support of ES modules by vendors.

[ninjachen]

The issue still exist in Polymer3.

Want to use iron-icons in Polymer3, use the following code
<link href="node_modules/@polymer/polymer/bower_components/iron-icons/iron-icons.html" rel="import">

But the chrome say GET http://localhost:8081/node_modules/@polymer/polymer/bower_components/shadycss/apply-shim.html 404 (Not Found)

How to fix it?

[TimvdLippe]

@jiachenning Polymer 3 uses ES modules. You can no longer us HTML imports. Therefore, make sure you are loading the elements with ES modules or script type=module

[ninjachen]

@TimvdLippe Thanks~