search

sampotts / plyr

A simple HTML5, YouTube and Vimeo player
https://plyr.io
MIT License
26.13k stars 2.91k forks source link

When upgrading from 3.7.3 to 3.7.4 and higher, error in the console: "TypeError: n is not a function." #2748

Open dkam opened 8 months ago

dkam commented 8 months ago

I'm using Plyr in a Rails app, following this example : https://github.com/timnans/episode-18-plyr-in-ruby-on-rails

I'm using importmaps and StimulsJS

My Stimulus controller is:

import { Controller } from "@hotwired/stimulus"
import Plyr from "plyr"
export default class extends Controller {
  connect() {
    const player = new Plyr('#player');
  }
}

HTML is 

<div data-controller="video">
  <p style="color: green"><%= notice %></p>

  <%= render @article %>

  <div>
    <video id="player" playsinline controls data-poster="https://unsplash.com/photos/a-black-background-with-a-red-and-black-object-PRYpUx018P4">
    <% @article.videos.each do |video| %>
      <source src="<%= rails_blob_path(video) %> " size="<%=video.blob.metadata.fetch(:height, nil)%>" >
    <% end %>
    </video>

    <%= link_to "Edit this article", edit_article_path(@article) %> |
    <%= link_to "Back to articles", articles_path %>

    <%= button_to "Destroy this article", @article, method: :delete %>
  </div>
</div>

Expected behaviour

Plyr can play the video, and there are no errors in the console.

Actual behaviour

When I switch from version 3.7.3 to 3.7.4 and higher, I get the following error in the console:

In Safari 17.1

TypeError: n is not a function. (In 'n({},g,{},M)', 'n' is an instance of Object)
e — plyr.min.js:128:269
(anonymous function) — plyr.min.js:204
map
createRange — plyr.min.js:847:109
(anonymous function) — plyr.min.js:1190
forEach
create — plyr.min.js:1184:102
inject — plyr.min.js:1308:387
build — plyr.min.js:1967
st — plyr.min.js:3364:113
connect — video_controller-3eeb732a30ca6b6b46ce1d4f9f72e0eeca32f492e0a172af5d298caf0a5cc29b.js:5
connect — controller.ts:28
connectContextForScope — controller.ts:28
forEach
connectModule — controller.ts:28
loadDefinition — controller.ts:28
(anonymous function) — controller.ts:28
forEach
load — controller.ts:28
register — controller.ts:28
registerController — stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js:81

In Firefox 119

Error connecting controller

 TypeError: n is not a function
    e plyr.min.js:128
    value plyr.min.js:204
    value plyr.min.js:203
    createRange plyr.min.js:847
    create plyr.min.js:1190
    create plyr.min.js:1184
    inject plyr.min.js:1308
    build plyr.min.js:1967
    st plyr.min.js:3364
    connect video_controller-3eeb732a30ca6b6b46ce1d4f9f72e0eeca32f492e0a172af5d298caf0a5cc29b.js:5
    connect stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    connectContextForScope stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    connectModule stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    connectModule stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    loadDefinition stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    load stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    load stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    register stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    registerController stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js:81
    registerControllerFromPath stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js:2

Steps to reproduce

Clone the example repository, upgrade Plyr to 3.7.4 or higher.

The repository has an accompanying video.

Environment

Console errors (if any)

In Safari 17.1

TypeError: n is not a function. (In 'n({},g,{},M)', 'n' is an instance of Object)
e — plyr.min.js:128:269
(anonymous function) — plyr.min.js:204
map
createRange — plyr.min.js:847:109
(anonymous function) — plyr.min.js:1190
forEach
create — plyr.min.js:1184:102
inject — plyr.min.js:1308:387
build — plyr.min.js:1967
st — plyr.min.js:3364:113
connect — video_controller-3eeb732a30ca6b6b46ce1d4f9f72e0eeca32f492e0a172af5d298caf0a5cc29b.js:5
connect — controller.ts:28
connectContextForScope — controller.ts:28
forEach
connectModule — controller.ts:28
loadDefinition — controller.ts:28
(anonymous function) — controller.ts:28
forEach
load — controller.ts:28
register — controller.ts:28
registerController — stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js:81

In Firefox 119

Error connecting controller

 TypeError: n is not a function
    e plyr.min.js:128
    value plyr.min.js:204
    value plyr.min.js:203
    createRange plyr.min.js:847
    create plyr.min.js:1190
    create plyr.min.js:1184
    inject plyr.min.js:1308
    build plyr.min.js:1967
    st plyr.min.js:3364
    connect video_controller-3eeb732a30ca6b6b46ce1d4f9f72e0eeca32f492e0a172af5d298caf0a5cc29b.js:5
    connect stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    connectContextForScope stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    connectModule stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    connectModule stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    loadDefinition stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    load stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    load stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    register stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js:4
    registerController stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js:81
    registerControllerFromPath stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js:2

Link to where the bug is happening

I can deploy an app if required.

afuno commented 2 months ago

The solution that helped me.

The first thing you need to do is get the contents of this file:

node_modules/plyr/dist/plyr.polyfilled.min.mjs

You can also get it from here: https://www.npmjs.com/package/plyr?activeTab=code

Then copy this code into this file:

vendor/javascript/plyr.js

That's all. As a result, everything should work without problems.