CODEWITHSUNDEEP
htmlpolymerlit-element
Classy-Bear
Classy-Bear

Reputation: 991

'components' folder not showing in lit-element

My project isn't working when I name a folder 'components', if I named any other name('component', 'pasta', 'templates') it works. The route names are fine, this ONLY happens when the folder it's named 'components'.

I'm using lit-element in this project

It works

It works

Doesn't work

Doesn't work

Steps to reproduce

npm i lit-element
touch index.html // Create a HTML file in the root folder
mkdir components // Create a folder where JS components will be
touch main.js // Create a component file
cd ..; polymer serve // Go back one directory and run the project


import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
    render() {
        return html`<p>template content</p>`;
    }
}
customElements.define('my-element', MyElement);
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="module" src="./components/main.js"></script>
    <title>lit-element code sample</title>
</head>

<body>
    <my-element></my-element>
</body>

</html>

NOTE this snippet code doesn't run in StackOverflow, create the project and reproduce it.

Change the name of the 'components' folder to any name you want, then change the route in the index.html file.

Upvotes: 0

Views: 792

Answers (1)

Umbo
Umbo

Reputation: 3142

As you can see from the log, polymer serve reserves a namespace starting with components/ for serving reusable components (a legacy of Polymer's old bower_components dependency management). This prevents your components folder from being served correctly. The namespace should be configurable through the --component-url option, although it doesn't seem to work.

You can either

  • use polyserve directly and change the component url:

    $ npm i -g polyserve
$ polyserve --component-url mycustomcomponenturl

  • use another dev server: open-wc's es-dev-server is a great alternative, also cited by the lit-html docs.

Upvotes: 1

Related Questions