javascript - Importing web component without module bundler - Stack Overflow

admin管理员组

文章数量:1416074

I am trying to follow these instructions for using web ponents. 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>

I am trying to follow these instructions for using web ponents. 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>

• javascript
• polymer
• web-ponent
• polymer-3.x

Share Improve this question Follow edited Dec 6, 2019 at 18:23 Max888 asked Dec 6, 2019 at 18:11 Max888Max888 3,85055 gold badges3535 silver badges7676 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

<script type="module" src="https://unpkg./@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.

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 remend 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 mand 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.

本文标签： javascriptImporting web component without module bundlerStack Overflow