Polymer 3 preview does not load properly with polymer serve --npm

TimvdLippe commented 6 years ago

From @StepFischer on January 10, 2018 14:24

Description

When I am trying to go through the steps to experiment with polymer 3 preview (branch: 3.0-preview) and serve the example provided with polymer serve --npm, I get the error

GET http://127.0.0.1:8081/@polymer/polymer/polymer-element.js net::ERR_ABORTED

in a chromium based browser.

I also tried to use polymer serve --npm -v and saw it is still trying to use bower_components folder in extraDependencies

> polymer serve --npm -v
debug:   got args:
{ args: [ 'serve', '--npm', '-v' ] }
debug:   no polymer.json file found, no config loaded
debug:   adding command analyze
debug:   adding command build
debug:   adding command help
debug:   adding command init
debug:   adding command install
debug:   adding alias i
debug:   adding command lint
debug:   adding command serve
debug:   adding command test
debug:   running...
debug:   command 'serve' found, parsing command args:
{ args: [ '--npm', '-v' ] }
debug:   command options parsed from args:
{ compile: 'auto',
  'compile-cache': 52428800,
  protocol: 'http/1.1',
  key: 'key.pem',
  cert: 'cert.pem',
  npm: true,
  verbose: true }
debug:   final project configuration generated:
{ lint: undefined,
  root: '/Users/s.fischer/polymer3',
  entrypoint: '/Users/s.fischer/polymer3/index.html',
  fragments: [],
  extraDependencies:
   [ '/Users/s.fischer/polymer3/bower_components/webcomponentsjs/*.js' ],
  sources:
   [ '/Users/s.fischer/polymer3/src/**/*',
     '/Users/s.fischer/polymer3/index.html' ],
  allFragments: [ '/Users/s.fischer/polymer3/index.html' ] }
debug:   Running command...
debug:   serving with options
{ root: undefined,
  entrypoint: '/Users/s.fischer/polymer3/index.html',
  compile: 'auto',
  port: undefined,
  hostname: undefined,
  open: undefined,
  browser: undefined,
  openPath: undefined,
  npm: true,
  componentDir: undefined,
  packageName: undefined,
  protocol: 'http/1.1',
  keyPath: 'key.pem',
  certPath: 'cert.pem',
  pushManifestPath: undefined,
  proxy: undefined }
debug:   serving via polyserve.startServers()...
info:    Files in this directory are available under the following URLs
      applications: http://127.0.0.1:8081
      reusable components: http://127.0.0.1:8081/components/polymer3/

The file structure created from the provided example is:

polymer3
  |-node_modules
  |-src
    |-my-app.js
  |-index.html
  |-package.json
  |-yarn.lock

The content of the files are: my-app.js

import { Element as PolymerElement } from '../@polymer/polymer/polymer-element.js';
export class MyElement extends PolymerElement {
    static get template() {
      return `
      <h1>Hello World!</h1>
    `;
  }
}
customElements.define('my-element', MyElement);

index.html

<!doctype html>
<html>
  <head>
    <!-- Load polyfills. Same as 2.x, except for the path -->
    <script
        src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js">
    </script>

    <!-- Import the my-app element's module. -->
    <script type="module" src="src/my-app.js"></script>
  </head>
  <body>
    <my-element></my-element>
  </body>
</html>

package.json Not flat property in here because I used --flat to add dependencies with yarn

{
  "name": "polymer3",
  "version": "1.0.0",
  "main": "index.html",
  "license": "MIT",
  "dependencies": {
    "@polymer/polymer": "^3.0.0-pre.1",
    "@webcomponents/webcomponentsjs": "^1.0.22"
  },
  "resolutions": {
    "@webcomponents/webcomponentsjs": "1.0.22"
  }
}

Live Demo

http://jsbin.com/luhaxab/1/edit

Steps to Reproduce

mkdir polymer3
yarn init
yarn add @polymer/polymer@next --flat
polymer serve --npm

Expected Results

The example prints the "Hello World!" text.

Actual Results

Error:

GET http://127.0.0.1:8081/@polymer/polymer/polymer-element.js net::ERR_ABORTED

Browsers Affected

[x] Chrome
[ ] Firefox
[ ] Edge
[x] Safari 11
[ ] Safari 10
[ ] Safari 9
[ ] Safari 8
[ ] IE 11

Versions

Polymer3: v1.0.0
webcomponents: v1.0.22

Copied from original issue: Polymer/polymer#5033

mahendrabharath commented 6 years ago

import { Element as PolymerElement } from '../@polymer/polymer/polymer-element.js'; this path is not proper.

it should be like this. import { Element as PolymerElement } from '@polymer/polymer/polymer-element.js';

or

import { Element as PolymerElement } from '../node_modules/@polymer/polymer/polymer-element.js';

justinfagnani commented 6 years ago

@StepFischer, I think the problem is the import of Polymer Because your source is one level down in the src/ folder, you need two ../s to reach out of the project folder.

import { Element as PolymerElement } from '../../@polymer/polymer/polymer-element.js';

Can you try that and report back?

StepFischer commented 5 years ago

I guess you can close this ticket, because it is obsolete now.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Polymer / tools