Running into an import problem with Polymer 3

markcellus commented 6 years ago

Description

I'm attempting to use the app-location element provided by the version of this package using polymer 3

import {html, PolymerElement}
    from '../../node_modules/@polymer/polymer/polymer-element.js';
import '../../node_modules/@polymer/app-route/app-location.js';

export class MyElement extends PolymerElement {
 //.. my other stuff here
}

but when this file is rendered, it gives me the following error in the console:

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

After inspecting, it is failing on the the import lines in app-location.js.

I suspect this is due to a resolver issue since the import path is not relative? Any help would be appreciated. Thanks

markcellus commented 6 years ago

Nevermind. It appears that node's resolution algorithm solves this issue by setting the module resolution to node.

polymer serve --module-resolution=node

aemonge commented 6 years ago

Still broken if you don't use polymer serve, but just a simple nginx:

index.html


<head>
  <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js" charset="utf-8"></script>
  <script type="module" src="node_modules/@polymer/paper-card/paper-card.js"></script>
</head>

<paper-card image="https://raw.githubusercontent.com/PolymerElements/paper-card/master/demo/donuts.png">
  <div class="card-content">
    <div class="cafe-header">Cafe Basilico
      <div class="cafe-location cafe-light">
        <iron-icon icon="communication:location-on"></iron-icon>
        <span>250ft</span>
      </div>
    </div>
    <div class="cafe-rating">
      <iron-icon class="star" icon="star"></iron-icon>
      <iron-icon class="star" icon="star"></iron-icon>
      <iron-icon class="star" icon="star"></iron-icon>
      <iron-icon class="star" icon="star"></iron-icon>
      <iron-icon class="star" icon="star"></iron-icon>
    </div>
    <p>$・Italian, Cafe</p>
    <p class="cafe-light">Small plates, salads &amp; sandwiches in an intimate setting.</p>
  </div>
  <div class="card-actions">
    <div class="horizontal justified">
      <paper-icon-button icon="icons:event"></paper-icon-button>
      <paper-button>5:30PM</paper-button>
      <paper-button>7:30PM</paper-button>
      <paper-button>9:00PM</paper-button>
      <paper-button class="cafe-reserve">Reserve</paper-button>
    </div>
  </div>
</paper-card>

console output

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

robertfoobar commented 6 years ago

I'm running into this too. I'm using the http-server node package and plan to use nginx for hosting. I vote for re-opening this issue until we've found a solution. @mkay581 could you reopen it, please?

markcellus commented 6 years ago

Sure reopened

robertfoobar commented 6 years ago

@aemonge Did you actually build the app? I had to build it and host it from the build output directory. Before that I was hosting from the project root folder which caused the issue.

My build config section in polymer.json:

"builds": [
    {
      "name": "prod",
      "preset": "es6-unbundled",
      "js": {"minify": true},
      "css": {"minify": true}
    },
    {
      "name": "dev",
      "js": {"minify": false, "compile": false},
      "css": {"minify": false},
      "html": {"minify": false},
      "bundle": false,
      "addPushManifest": false
    }
  ],

When I run

polymer build --name prod

and host it from the output folder

http-server build/prod

everything works as expected, because during the build, the named module "@ polymer" will be replaced by the file path expression "./node_modules/@ polymer".

@aemonge Can you validate that?

aemonge commented 6 years ago

I just validated it and is working after polymer build; http-server build/default :)

Hurray !

govis commented 6 years ago

Similar issue, with Chrome throwing the following error on import statement(s): Failed to resolve module specifier "@polymer/polymer/polymer-legacy.js". Relative references must start with either "/", "./", or "../".

I think import statements should have relative path - do they not?

robertfoobar commented 6 years ago

@govis You need to build your project - as explained above. @mkay581 Mark, I think you can close this issue again. We've found the solution we were looking for.

govis commented 6 years ago

Thanks @robertfoobar for suggestion, but why unnecessary step of having to build to fix incorrect import? A simple hello word example would run just fine without building providing the import statements are pointing to the right place.

markcellus commented 5 years ago

Closing since solution has been implemented.

Sanjeevs1995 commented 5 years ago

How to solve this issue while using these components in web app created using python-django.

Getting this error while importing the paper elements.

@mkay581 could you please reopen so that we can find a solution for this

andrisole92 commented 4 years ago

Getting the same issue when importing in pure HTML using http-server.

I want to use the components I build with the Polymer in plain HTML.

markcellus commented 4 years ago

Reopening at the request of others.

conceptree commented 2 years ago

Any news on this one? We ran into the same problem in the project that I am part of, we just updated our main components and now using polymer 3 versions but still loading polymer 2 components that will take more time to be migrated. Any suggestions?

VIGNESHWAR-RV commented 1 year ago

@conceptree , did you get any solution on this brother?. we are running into this issue when we try to do development with polymer serve

conceptree commented 1 year ago

@kevinpschaaf no! We gave up and moved to stencil JS and for the components that were abstracting other polymer based components we just removed those and implemented our own or changed to Vaadin components. We still maintain older versions of our product so if there is a fix for this it can still be useful for us! Drop it here 😄

PolymerElements / app-route

Running into an import problem with Polymer 3 #231

Description