Change imports to relative paths

[tirithen]

Hi, we are starting a new Polymer 3 project and want to use lit-element if possible. We prefer to just use the source files as is when developing to exclude any extra build steps and it works perfectly in previous projects (using Polymer 2 and 3.0.0-pre). With ES6 imports this is super handy, how come that you don't write your imports as relative paths?

When trying the same approach with lit-element we get the following error because of this:

Uncaught TypeError: Failed to resolve module specifier "@polymer/lit-element/lit-element.js". Relative references must start with either "/", "./", or "../".

Also polymer serve will not work since it gets the URL's wrong. With polymer build it works fine but having to build before each page load is inconvenient.

Would you consider changing all the import statements so that they are relative to the file that is importing? This would remove the need to build entirely for development (and possibly even for pages that targets recent browsers), it does not make much sense to me to have a build step just to change import paths.

[eskan]

hi,
import should be absolute to node_modules :
import { LitElement , html} from '@polymer/lit-element';

https://github.com/Polymer/pwa-starter-kit/blob/6a3e1099c3c26c052fcc7305fb05f64413561d65/src/components/my-app.js#L11

Is the module exist in node_modules ?

[TimvdLippe]

Please read about our reasoning and response in Polymer/polymer#5238 (comment) This was a hard call to make, but we can provide an experimental solution (empathy) to transform to relative paths. I am actually using empathy and lit-element already in my side-project and it works great for me :)

[tirithen]

Thanks for explaining and the links, I guess this is the way it needs to be for now. Lots of npm packages are written like this anyway.

[jyounce]

Hi guys, sorry to comment on a closed issue but I just want to make sure of something.

Myself and others are creating individual components available for anyone to use via Polymer 3. So far, so good, super easy to consume and use. Recently, I tried to convert to lit-element and ran into the issue above.

So let's say the conversion was successful. Are you guys saying that anyone who wants to use the converted component now has to use a JS Module Bundler?

[simonh1000]

I get the same error after following https://lit-element.polymer-project.org/guide/start

[dss010101]

getting this same error...have this in my main:
<script type="module" src="https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js" ></script>

and this line in my component js cause the same error:
import {LitElement, html} from 'lit'

what is the recommended way of doing this? as the tutorial do not seem to cover this

[bicknellr]

getting this same error...have this in my main: <script type="module" src="https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js" ></script>

and this line in my component js cause the same error: import {LitElement, html} from 'lit'

what is the recommended way of doing this? as the tutorial do not seem to cover this

I left a reply here.