Running into an import problem with Polymer 3 #231

markcellus · 2018-05-19T23:07:10Z

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

The text was updated successfully, but these errors were encountered:

markcellus · 2018-05-21T14:51:52Z

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

polymer serve --module-resolution=node

aemonge · 2018-06-19T10:48:04Z

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 · 2018-08-01T07:26:22Z

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 · 2018-08-01T11:39:17Z

Sure reopened

robertfoobar · 2018-08-01T14:58:59Z

@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 · 2018-08-03T09:18:55Z

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

Hurray !

govis · 2018-09-26T20:30:28Z

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 · 2018-10-01T09:22:40Z

@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 · 2018-10-01T18:53:47Z

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 · 2018-10-08T16:56:43Z

Closing since solution has been implemented.

Sanjeevs1995 · 2019-02-12T05:19:30Z

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 · 2020-01-03T20:05:09Z

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 · 2020-01-03T20:11:25Z

Reopening at the request of others.

conceptree · 2022-09-06T13:54:42Z

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 · 2023-08-02T06:52:32Z

@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 · 2023-08-03T19:35:34Z

@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 😄

markcellus closed this as completed May 21, 2018

markcellus reopened this Aug 1, 2018

markcellus closed this as completed Oct 8, 2018

markcellus reopened this Jan 3, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Running into an import problem with Polymer 3 #231

Running into an import problem with Polymer 3 #231

markcellus commented May 19, 2018

markcellus commented May 21, 2018

aemonge commented Jun 19, 2018

robertfoobar commented Aug 1, 2018

markcellus commented Aug 1, 2018

robertfoobar commented Aug 1, 2018

aemonge commented Aug 3, 2018

govis commented Sep 26, 2018

robertfoobar commented Oct 1, 2018

govis commented Oct 1, 2018

markcellus commented Oct 8, 2018

Sanjeevs1995 commented Feb 12, 2019 •

edited

Loading

andrisole92 commented Jan 3, 2020

markcellus commented Jan 3, 2020

conceptree commented Sep 6, 2022

VIGNESHWAR-RV commented Aug 2, 2023

conceptree commented Aug 3, 2023

Running into an import problem with Polymer 3 #231

Running into an import problem with Polymer 3 #231

Comments

markcellus commented May 19, 2018

Description

markcellus commented May 21, 2018

aemonge commented Jun 19, 2018

robertfoobar commented Aug 1, 2018

markcellus commented Aug 1, 2018

robertfoobar commented Aug 1, 2018

aemonge commented Aug 3, 2018

govis commented Sep 26, 2018

robertfoobar commented Oct 1, 2018

govis commented Oct 1, 2018

markcellus commented Oct 8, 2018

Sanjeevs1995 commented Feb 12, 2019 • edited Loading

andrisole92 commented Jan 3, 2020

markcellus commented Jan 3, 2020

conceptree commented Sep 6, 2022

VIGNESHWAR-RV commented Aug 2, 2023

conceptree commented Aug 3, 2023

Sanjeevs1995 commented Feb 12, 2019 •

edited

Loading