Search code examples
javascriptpolymerweb-componentpolymer-3.x

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>

Solution

  • 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.