Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 226
Max888 Avatar asked May 07 '26 19:05

Max888


1 Answers

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.

like image 117
Max888 Avatar answered May 09 '26 08:05

Max888



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!