Contrib.social

Getting JS errors during page load when trying to use in a views block

Open on Drupal.org →
Created on 9 March 2023, almost 2 years ago

Problem/Motivation

What I did:

composer require 'drupal/clipboardjs:^2.0'
composer require npm-asset/clipboard.js
drush en clipboardjs

The docroot/libraries/clipboard.js/dist/clipboard.js is installed with composer.

And I have a view where I set a text field's formatter to Clipboard.

The copy button is there but doesn't do anything on page load. Dev console shows these:

drupal.js?v=9.3.0:16 Uncaught TypeError: ClipboardJS is not a constructor
    at Object.attach (clipboard.js?v=1.0.1:20:26)
    at drupal.js?v=9.3.0:27:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=9.3.0:24:34)
    at HTMLUListElement.<anonymous> (ajax.js?v=9.3.0:569:20)
    at Function.each (jquery.min.js?v=3.6.0:2:3003)
    at S.fn.init.each (jquery.min.js?v=3.6.0:2:1481)
    at Drupal.AjaxCommands.insert (ajax.js?v=9.3.0:567:21)
    at ajax.js?v=9.3.0:446:44
    at Array.forEach (<anonymous>)
attach @ clipboard.js?v=1.0.1:20
(anonymous) @ drupal.js?v=9.3.0:27
Drupal.attachBehaviors @ drupal.js?v=9.3.0:24
(anonymous) @ ajax.js?v=9.3.0:569
each @ jquery.min.js?v=3.6.0:2
each @ jquery.min.js?v=3.6.0:2
insert @ ajax.js?v=9.3.0:567
(anonymous) @ ajax.js?v=9.3.0:446
Drupal.Ajax.success @ ajax.js?v=9.3.0:444
bigPipeProcessPlaceholderReplacement @ big_pipe.js?v=9.3.0:37
bigPipeProcessDocument @ big_pipe.js?v=9.3.0:50
(anonymous) @ big_pipe.js?v=9.3.0:65
setTimeout (async)
Drupal.throwError @ drupal.js?v=9.3.0:15
(anonymous) @ drupal.js?v=9.3.0:29
Drupal.attachBehaviors @ drupal.js?v=9.3.0:24
(anonymous) @ ajax.js?v=9.3.0:569
each @ jquery.min.js?v=3.6.0:2
each @ jquery.min.js?v=3.6.0:2
insert @ ajax.js?v=9.3.0:567
(anonymous) @ ajax.js?v=9.3.0:446
Drupal.Ajax.success @ ajax.js?v=9.3.0:444
bigPipeProcessPlaceholderReplacement @ big_pipe.js?v=9.3.0:37
bigPipeProcessDocument @ big_pipe.js?v=9.3.0:50
(anonymous) @ big_pipe.js?v=9.3.0:65
setTimeout (async)
bigPipeProcess @ big_pipe.js?v=9.3.0:64
(anonymous) @ big_pipe.js?v=9.3.0:71
(anonymous) @ big_pipe.js?v=9.3.0:79

drupal.js?v=9.3.0:16 Uncaught TypeError: ClipboardJS is not a constructor
    at Object.attach (clipboard.js?v=1.0.1:20:26)
    at drupal.js?v=9.3.0:27:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=9.3.0:24:34)
    at HTMLAnchorElement.<anonymous> (ajax.js?v=9.3.0:569:20)
    at Function.each (jquery.min.js?v=3.6.0:2:3003)
    at S.fn.init.each (jquery.min.js?v=3.6.0:2:1481)
    at Drupal.AjaxCommands.insert (ajax.js?v=9.3.0:567:21)
    at ajax.js?v=9.3.0:446:44
    at Array.forEach (<anonymous>)
attach @ clipboard.js?v=1.0.1:20
(anonymous) @ drupal.js?v=9.3.0:27
Drupal.attachBehaviors @ drupal.js?v=9.3.0:24
(anonymous) @ ajax.js?v=9.3.0:569
each @ jquery.min.js?v=3.6.0:2
each @ jquery.min.js?v=3.6.0:2
insert @ ajax.js?v=9.3.0:567
(anonymous) @ ajax.js?v=9.3.0:446
Drupal.Ajax.success @ ajax.js?v=9.3.0:444
bigPipeProcessPlaceholderReplacement @ big_pipe.js?v=9.3.0:37
bigPipeProcessDocument @ big_pipe.js?v=9.3.0:50
(anonymous) @ big_pipe.js?v=9.3.0:65
setTimeout (async)
Drupal.throwError @ drupal.js?v=9.3.0:15
(anonymous) @ drupal.js?v=9.3.0:29
Drupal.attachBehaviors @ drupal.js?v=9.3.0:24
(anonymous) @ ajax.js?v=9.3.0:569
each @ jquery.min.js?v=3.6.0:2
each @ jquery.min.js?v=3.6.0:2
insert @ ajax.js?v=9.3.0:567
(anonymous) @ ajax.js?v=9.3.0:446
Drupal.Ajax.success @ ajax.js?v=9.3.0:444
bigPipeProcessPlaceholderReplacement @ big_pipe.js?v=9.3.0:37
bigPipeProcessDocument @ big_pipe.js?v=9.3.0:50
(anonymous) @ big_pipe.js?v=9.3.0:65
setTimeout (async)
bigPipeProcess @ big_pipe.js?v=9.3.0:64
(anonymous) @ big_pipe.js?v=9.3.0:71
(anonymous) @ big_pipe.js?v=9.3.0:79

drupal.js?v=9.3.0:16 Uncaught TypeError: ClipboardJS is not a constructor
    at Object.attach (clipboard.js?v=1.0.1:20:26)
    at drupal.js?v=9.3.0:27:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=9.3.0:24:34)
    at HTMLUListElement.<anonymous> (ajax.js?v=9.3.0:569:20)
    at Function.each (jquery.min.js?v=3.6.0:2:3003)
    at S.fn.init.each (jquery.min.js?v=3.6.0:2:1481)
    at Drupal.AjaxCommands.insert (ajax.js?v=9.3.0:567:21)
    at ajax.js?v=9.3.0:446:44
    at Array.forEach (<anonymous>)
attach @ clipboard.js?v=1.0.1:20
(anonymous) @ drupal.js?v=9.3.0:27
Drupal.attachBehaviors @ drupal.js?v=9.3.0:24
(anonymous) @ ajax.js?v=9.3.0:569
each @ jquery.min.js?v=3.6.0:2
each @ jquery.min.js?v=3.6.0:2
insert @ ajax.js?v=9.3.0:567
(anonymous) @ ajax.js?v=9.3.0:446
Drupal.Ajax.success @ ajax.js?v=9.3.0:444
bigPipeProcessPlaceholderReplacement @ big_pipe.js?v=9.3.0:37
bigPipeProcessDocument @ big_pipe.js?v=9.3.0:50
(anonymous) @ big_pipe.js?v=9.3.0:65
setTimeout (async)
Drupal.throwError @ drupal.js?v=9.3.0:15
(anonymous) @ drupal.js?v=9.3.0:29
Drupal.attachBehaviors @ drupal.js?v=9.3.0:24
(anonymous) @ ajax.js?v=9.3.0:569
each @ jquery.min.js?v=3.6.0:2
each @ jquery.min.js?v=3.6.0:2
insert @ ajax.js?v=9.3.0:567
(anonymous) @ ajax.js?v=9.3.0:446
Drupal.Ajax.success @ ajax.js?v=9.3.0:444
bigPipeProcessPlaceholderReplacement @ big_pipe.js?v=9.3.0:37
bigPipeProcessDocument @ big_pipe.js?v=9.3.0:50
(anonymous) @ big_pipe.js?v=9.3.0:65
setTimeout (async)
bigPipeProcess @ big_pipe.js?v=9.3.0:64
(anonymous) @ big_pipe.js?v=9.3.0:71
(anonymous) @ big_pipe.js?v=9.3.0:79

drupal.js?v=9.3.0:16 Uncaught TypeError: ClipboardJS is not a constructor
    at Object.attach (clipboard.js?v=1.0.1:20:26)
    at drupal.js?v=9.3.0:27:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=9.3.0:24:34)
    at HTMLElement.<anonymous> (ajax.js?v=9.3.0:569:20)
    at Function.each (jquery.min.js?v=3.6.0:2:3003)
    at S.fn.init.each (jquery.min.js?v=3.6.0:2:1481)
    at Drupal.AjaxCommands.insert (ajax.js?v=9.3.0:567:21)
    at ajax.js?v=9.3.0:446:44
    at Array.forEach (<anonymous>)
attach @ clipboard.js?v=1.0.1:20
(anonymous) @ drupal.js?v=9.3.0:27
Drupal.attachBehaviors @ drupal.js?v=9.3.0:24
(anonymous) @ ajax.js?v=9.3.0:569
each @ jquery.min.js?v=3.6.0:2
each @ jquery.min.js?v=3.6.0:2
insert @ ajax.js?v=9.3.0:567
(anonymous) @ ajax.js?v=9.3.0:446
Drupal.Ajax.success @ ajax.js?v=9.3.0:444
bigPipeProcessPlaceholderReplacement @ big_pipe.js?v=9.3.0:37
bigPipeProcessDocument @ big_pipe.js?v=9.3.0:50
(anonymous) @ big_pipe.js?v=9.3.0:65
setTimeout (async)
Drupal.throwError @ drupal.js?v=9.3.0:15
(anonymous) @ drupal.js?v=9.3.0:29
Drupal.attachBehaviors @ drupal.js?v=9.3.0:24
(anonymous) @ ajax.js?v=9.3.0:569
each @ jquery.min.js?v=3.6.0:2
each @ jquery.min.js?v=3.6.0:2
insert @ ajax.js?v=9.3.0:567
(anonymous) @ ajax.js?v=9.3.0:446
Drupal.Ajax.success @ ajax.js?v=9.3.0:444
bigPipeProcessPlaceholderReplacement @ big_pipe.js?v=9.3.0:37
bigPipeProcessDocument @ big_pipe.js?v=9.3.0:50
(anonymous) @ big_pipe.js?v=9.3.0:65
setTimeout (async)
bigPipeProcess @ big_pipe.js?v=9.3.0:64
(anonymous) @ big_pipe.js?v=9.3.0:71
(anonymous) @ big_pipe.js?v=9.3.0:79

drupal.js?v=9.3.0:16 Uncaught TypeError: ClipboardJS is not a constructor
    at Object.attach (clipboard.js?v=1.0.1:20:26)
    at drupal.js?v=9.3.0:27:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=9.3.0:24:34)
    at HTMLDivElement.<anonymous> (ajax.js?v=9.3.0:569:20)
    at Function.each (jquery.min.js?v=3.6.0:2:3003)
    at S.fn.init.each (jquery.min.js?v=3.6.0:2:1481)
    at Drupal.AjaxCommands.insert (ajax.js?v=9.3.0:567:21)
    at ajax.js?v=9.3.0:446:44
    at Array.forEach (<anonymous>)
attach @ clipboard.js?v=1.0.1:20
(anonymous) @ drupal.js?v=9.3.0:27
Drupal.attachBehaviors @ drupal.js?v=9.3.0:24
(anonymous) @ ajax.js?v=9.3.0:569
each @ jquery.min.js?v=3.6.0:2
each @ jquery.min.js?v=3.6.0:2
insert @ ajax.js?v=9.3.0:567
(anonymous) @ ajax.js?v=9.3.0:446
Drupal.Ajax.success @ ajax.js?v=9.3.0:444
bigPipeProcessPlaceholderReplacement @ big_pipe.js?v=9.3.0:37
bigPipeProcessDocument @ big_pipe.js?v=9.3.0:50
(anonymous) @ big_pipe.js?v=9.3.0:65
setTimeout (async)
Drupal.throwError @ drupal.js?v=9.3.0:15
(anonymous) @ drupal.js?v=9.3.0:29
Drupal.attachBehaviors @ drupal.js?v=9.3.0:24
(anonymous) @ ajax.js?v=9.3.0:569
each @ jquery.min.js?v=3.6.0:2
each @ jquery.min.js?v=3.6.0:2
insert @ ajax.js?v=9.3.0:567
(anonymous) @ ajax.js?v=9.3.0:446
Drupal.Ajax.success @ ajax.js?v=9.3.0:444
bigPipeProcessPlaceholderReplacement @ big_pipe.js?v=9.3.0:37
bigPipeProcessDocument @ big_pipe.js?v=9.3.0:50
(anonymous) @ big_pipe.js?v=9.3.0:65
setTimeout (async)
bigPipeProcess @ big_pipe.js?v=9.3.0:64
(anonymous) @ big_pipe.js?v=9.3.0:71
(anonymous) @ big_pipe.js?v=9.3.0:79

drupal.js?v=9.3.0:16 Uncaught TypeError: ClipboardJS is not a constructor
    at Object.attach (clipboard.js?v=1.0.1:20:26)
    at drupal.js?v=9.3.0:27:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=9.3.0:24:34)
    at HTMLScriptElement.<anonymous> (ajax.js?v=9.3.0:569:20)
    at Function.each (jquery.min.js?v=3.6.0:2:3003)
    at S.fn.init.each (jquery.min.js?v=3.6.0:2:1481)
    at Drupal.AjaxCommands.insert (ajax.js?v=9.3.0:567:21)
    at ajax.js?v=9.3.0:446:44
    at Array.forEach (<anonymous>)
attach @ clipboard.js?v=1.0.1:20
(anonymous) @ drupal.js?v=9.3.0:27
Drupal.attachBehaviors @ drupal.js?v=9.3.0:24
(anonymous) @ ajax.js?v=9.3.0:569
each @ jquery.min.js?v=3.6.0:2
each @ jquery.min.js?v=3.6.0:2
insert @ ajax.js?v=9.3.0:567
(anonymous) @ ajax.js?v=9.3.0:446
Drupal.Ajax.success @ ajax.js?v=9.3.0:444
bigPipeProcessPlaceholderReplacement @ big_pipe.js?v=9.3.0:37
bigPipeProcessDocument @ big_pipe.js?v=9.3.0:50
(anonymous) @ big_pipe.js?v=9.3.0:65
setTimeout (async)
Drupal.throwError @ drupal.js?v=9.3.0:15
(anonymous) @ drupal.js?v=9.3.0:29
Drupal.attachBehaviors @ drupal.js?v=9.3.0:24
(anonymous) @ ajax.js?v=9.3.0:569
each @ jquery.min.js?v=3.6.0:2
each @ jquery.min.js?v=3.6.0:2
insert @ ajax.js?v=9.3.0:567
(anonymous) @ ajax.js?v=9.3.0:446
Drupal.Ajax.success @ ajax.js?v=9.3.0:444
bigPipeProcessPlaceholderReplacement @ big_pipe.js?v=9.3.0:37
bigPipeProcessDocument @ big_pipe.js?v=9.3.0:50
(anonymous) @ big_pipe.js?v=9.3.0:65
setTimeout (async)
bigPipeProcess @ big_pipe.js?v=9.3.0:64
(anonymous) @ big_pipe.js?v=9.3.0:71
(anonymous) @ big_pipe.js?v=9.3.0:79

drupal.js?v=9.3.0:16 Uncaught TypeError: ClipboardJS is not a constructor
    at Object.attach (clipboard.js?v=1.0.1:20:26)
    at drupal.js?v=9.3.0:27:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=9.3.0:24:34)
    at HTMLFormElement.<anonymous> (ajax.js?v=9.3.0:569:20)
    at Function.each (jquery.min.js?v=3.6.0:2:3003)
    at S.fn.init.each (jquery.min.js?v=3.6.0:2:1481)
    at Drupal.AjaxCommands.insert (ajax.js?v=9.3.0:567:21)
    at ajax.js?v=9.3.0:446:44
    at Array.forEach (<anonymous>)

The readme isn't helpful either because it shows sites/all/libraries meaning old Drupal 7 things...

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

💬 Support request
Status

Closed: works as designed

Version

2.0

Component

Documentation

Created by

🇸🇰Slovakia kaszarobert

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @kaszarobert
  • Comment almost 2 years ago →
    🇸🇰Slovakia kaszarobert
  • Comment almost 2 years ago →
    🇸🇰Slovakia kaszarobert
  • Status changed to Closed: works as designed almost 2 years ago
  • Comment almost 2 years ago →
    🇸🇰Slovakia kaszarobert

    I managed to fix it. That npm installed the wrong version. I solved by adding this to the site's composer.json:

        "repositories": {
        "drupal": {
            "type": "composer",
            "url": "https://packages.drupal.org/8"
        },

        "assets": {
            "type": "composer",
            "url": "https://asset-packagist.org"
        },

        "clipboard.js": {
            "type": "package",
            "package": {
                "name": "zenorocha/clipboard.js",
                "version": "2.0.11",
                "type": "drupal-library",
                "dist": {
                    "url": "https://github.com/zenorocha/clipboard.js/archive/refs/tags/v2.0.11.zip",
                    "type": "zip"
                },
                "require": {
                    "composer/installers": "~1.0"
                }

            }
        }

    },

    And then running composer require zenorocha/clipboard.js I installed the right needed library with composer.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024