Polymer 3 paper-dropdown-menu TypeError in Chrome 69

kpgarrod commented 6 years ago

There is an issue described at the end of this StackOverflow post in which an error is thrown: Uncaught TypeError: Cannot set property 'true' of undefined at scope.js:20

This error occurs in Chrome 69 Linux but not in Firefox 62 Linux.

See this Glitch

pic16f887 commented 6 years ago

I have the same issue. paper-dropdown-menu works normally on Firefox 62 but doesn't work on Chrome 69.

Uncaught TypeError: Cannot set property 'true' of undefined at scope.js:20 at scope.js:20 (anonymous) @ scope.js:20 (anonymous) @ scope.js:20 3scope.js:20 Uncaught TypeError: Cannot assign to read only property 'target' of object '#' at b.Animation. (scope.js:20)

Code that used to reproduce the issue

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
    <link rel="manifest" href="/manifest.json">
    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script type="module" src="/src/webstoreUI2-0-app/webstoreUI2-0-app.js" crossorigin></script>
    <script type="module" src="/node_modules/@polymer/neon-animation/neon-animation.js"></script>
    <script type="module" src="/node_modules/web-animations-js/web-animations-next-lite.min.js"></script>
    <script type="module" src="/node_modules/@polymer/paper-dropdown-menu/paper-dropdown-menu.js"></script>
    <script type="module" src="/node_modules/@polymer/paper-listbox/paper-listbox.js"></script>
    <script type="module" src="/node_modules/@polymer/paper-item/paper-item.js"></script>
  </head>
  <body>
    <paper-dropdown-menu label="Dinosaurs">
        <paper-listbox slot="dropdown-content">
          <paper-item>allosaurus</paper-item>
          <paper-item>brontosaurus</paper-item>
          <paper-item>carcharodontosaurus</paper-item>
          <paper-item>diplodocus</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
  </body>
</html>

joshcartme commented 6 years ago

I'm getting the same thing, and it seems that the source maps are wrong. The error doesn't actually happen in scope.js, if you turn off source maps the error is happening in on line 2057 of web-animations.min.js, here's the line in context:

    if (!d) {
      var g = window.Element.prototype.animate;

      window.Element.prototype.animate = function (b, c) {
        return window.Symbol && Symbol.iterator && Array.prototype.from && b[Symbol.iterator] && (b = Array.from(b)), Array.isArray(b) || null === b || (b = a.convertToArrayForm(b)), g.call(this, b, c);
      };
    }
  }(c), b.true = a; // THE ERROR HAPPENS ON THIS LINE, 2057
}({}, function () {
  return this;
}()); //# sourceMappingURL=web-animations.min.js.map

erestor commented 5 years ago

Having the same problem in Chrome 71

milesje commented 5 years ago

Same issue here! In Safari I get this error "Unhandled Promise Rejection: TypeError: Attempted to assign to readonly property."

alooosh commented 5 years ago

is there any help this 2019 and i am sill having this issue . Any help please . I try all solution her and other post including this : @ericbaltha I got it to work with Polymer 3. Here's what I had to do.

add "web-animations-js": "^2.3.1" to "dependencies" in package.json add "node_modules/web-animations-js/*.js" to "extraDependencies" in polymer.json include webanimations JavaScript in index.html by adding

after this

import web-animations-next-lite.min.js in my module: import 'web-animations-js/web-animations-next-lite.min.js'; after all polymer imports.

web-animations / web-animations-js

Polymer 3 paper-dropdown-menu TypeError in Chrome 69 #199