3

I am trying to follow these instructions for using web components. I installed the polymer paper-button with npm install --save @polymer/paper-button, addded the below to my index.html and opened it with vscode's live-server. But I get a console error saying: Uncaught TypeError: Failed to resolve module specifier "@polymer/iron-flex-layout/iron-flex-layout.js". Relative references must start with either "/", "./", or "../".. I would like to solve this without using a module bundler like webpack.

<script type="module" src="node_modules/@polymer/paper-button/paper-button.js"></script>
...
<paper-button raised class="indigo">raised</paper-button>
Max888
  • 3,089
  • 24
  • 55

2 Answers2

6

A workaround I have found is to instead use https://unpkg.com/ as per below:

<script type="module" src="https://unpkg.com/@material/mwc-button@latest/mwc-button.js?module"></script>

Note: you need to add the ?module parameter to the end of the URL in order for unpkg to fix the bare module syntax within the file requested otherwise it just returns the original file with bare module imports.

azariah
  • 439
  • 4
  • 15
Max888
  • 3,089
  • 24
  • 55
  • Woah... someone give this person a medal. I had missed the `?module` parameter in my other research. Fixes all of the crappy bare module syntax before it sends you the code bundle. Legendary. @Max888 please consider marking this as the accepted answer as this is an actual solution to the problem, not just some theoretical conversation around why it doesn't work out of the box. I've actually been putting off using Polymer 3 / LitElements because of this issue, no longer. – azariah Jan 20 '20 at 04:56
3

The error you're getting refers to the inability of browsers - even those that support ES modules - to resolve bare module imports (import foo from 'bar';).

Yes, here:

                           ↓
<script type="module" src="node_modules/@polymer/paper-button/paper-button.js"></script>

you're importing by relative path but paper-button in turn is importing other modules by bare specifier:

paper-button.js:11:1
import '@polymer/iron-flex-layout/iron-flex-layout.js';

To know more about modules in the browser and the reasons behind the lack of support for bare specifiers I would recommend this article by Damien Seguin.

You don't necessarily need a module bundler to be able to launch the application: polymer serve, Polymer's dev server, resolves module specifiers automatically. Also, Polymer CLI's build command may be of help if you don't want to manually configure a build system or alternatively tools like Babel can help you transform imports without bundling.

Umbo
  • 3,042
  • 18
  • 23