Search code examples
polymerpolymer-3.xlit-element

lit-element.js not found after polymer build

I am currently encountering a problem which is probably simple, but I don't manage to nail it.

I have a polymer application using the latest version of lit-element (2.0.1).

Unfortunately after running the npm run build:static (behind it is polymer build) and serve it using: npm run serve:static (behind it is executing: polymer serve --port 5000 build/es5-bundled).

The lit-element.js is not available.

If I list the files in the project node_module I have:

pxke@station:ls -1 node_modules/lit-element/
CHANGELOG.md
lib
LICENSE
lit-element.d.ts
lit-element.d.ts.map
lit-element.js
lit-element.js.map
package.json
README.md
src

The lit-element.js seems to be there, after the build if I look in the node_module of the build it is not copied. 

g@station: ls -1 build/es5-bundled/node_modules/lit-element/
CHANGELOG.md
lib
LICENSE
lit-element.d.ts
lit-element.d.ts.map
lit-element.js.map
package.json
README.md
src

Do you know why this would happen? Thank you in advance. Have a great day!

Here are some extra information: Dependency section of package.json

"dependencies": {
"@material/base": ">=0.3.6",
"@material/mwc-base": ">=0.3.6",
"@material/mwc-button": ">=0.4.0",
"@material/mwc-icon": ">=0.3.6",
"@material/mwc-ripple": ">=0.3.6",
"@material/ripple": ">=0.3.6",
"@polymer/app-layout": ">=3.0.0",
"@polymer/paper-button": ">=3.0.1",
"@polymer/polymer": ">=3.1.0",
"@webcomponents/webcomponentsjs": ">=2.2.4",
"browser-sync": "2.26.3",
"lit-element": ">=2.0.1",
"lit-html": ">=1.0.0",
"npm": "^6.9.0",
"pwa-helpers": "^0.9.0",
"redux": ">=4.0.0",
"redux-thunk": ">=2.3.0",
"reselect": "^4.0.0",
"sinon": "^4.5.0"
},

polymer.json

{
  "entrypoint": "index.html",
  "shell": "src/components/test-app.js",
  "sources": [
    "images/**/*"
  ],
  "extraDependencies": [
    "manifest.json",
    "node_modules/@webcomponents/webcomponentsjs/**",
    "node_modules/lit-element/**",
    "node_modules/lit-html/**",
    "node_modules/@material/mwc-button/**",
    "node_modules/@material/mwc-base/**",
    "node_modules/@material/base/**",
    "node_modules/@material/mwc-ripple/**",
    "node_modules/@material/ripple/**",
    "node_modules/@material/mwc-icon/**",
    "push-manifest.json"
  ],
  "builds": [
    {
      "name": "esm-bundled",
      "browserCapabilities": [
        "es2015",
        "modules"
      ],
      "js": {
        "minify": true
      },
      "css": {
        "minify": true
      },
      "html": {
        "minify": true
      },
      "bundle": true,
      "addServiceWorker": true
    },
    {
      "name": "es6-bundled",
      "browserCapabilities": [
        "es2015"
      ],
      "js": {
        "compile": "es2015",
        "minify": true,
        "transformModulesToAmd": true
      },
      "css": {
        "minify": true
      },
      "html": {
        "minify": true
      },
      "bundle": true,
      "addServiceWorker": true
    },
    {
      "name": "es5-bundled",
      "js": {
        "compile": "es5",
        "minify": true,
        "transformModulesToAmd": true
      },
      "css": {
        "minify": true
      },
      "html": {
        "minify": true
      },
      "bundle": true,
      "addServiceWorker": true
    }
  ],
  "moduleResolution": "node",
  "npm": true
}
Solution

  • Normally, when you import lit-element, Polymer build may bundle the lit-element codes into built codes. You may not see at the path. But if you want to force to add the path then you may define in polymer.json file under fragments. example:

    polymer.json: 

    {
  "entrypoint": "index.html",
  "shell": "src/components/test-app.js",
  "sources": [
    "images/**/*"
  ],
  "fragments": [
     "node_modules/lit-element/**/*",
  ],
  "sources": [
    "images/**/*"
  ],
  "extraDependencies": [
  ...