CODEWITHSUNDEEP
javascriptpolymerweb-componentpolymer-3.x
Max888
Max888

Reputation: 3760

Importing web component without module bundler

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>

Upvotes: 3

Views: 1587

Answers (2)

Umbo
Umbo

Reputation: 3142

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.

Upvotes: 4

Max888
Max888

Reputation: 3760

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.

Upvotes: 5

Related Questions