Prism: Uncaught TypeError: Illegal constructor Error

[ghost]

Hi,

I am getting this error:

Uncaught TypeError: Illegal constructor
    at n (prism.js:1)
    at prism.js:1
    at prism.js:1
    at Array.forEach (<anonymous>)
    at Prism.plugins.toolbar.hook (prism.js:1)
    at Object.run (prism.js:1)
    at Object.highlightElement (prism.js:1)
    at HTMLDocument.highlightAll (prism.js:1)

It seems to be showing when I add the "Copy to Clipboard Button" package.

My browser I am getting the error is Google Chrome Version 62.0.3200.0 (Official Build)

Here is a screenshot of the error in dev tools:

For now I am just going to live with out adding this plugin. I thought I'd let you know anyway.

p.s. Normal setup works fine no problem. It only appears with this plugin addon.

[mAAdhaTTah]

Is Clipboard.js included on the page? Do you have a public, reproducible example?

[ghost]

@mAAdhaTTah I don't have clipboard.js installed on that website. Also I have prism running in the backend of a custom cms so I can't show you the URL.

[mAAdhaTTah]

You need Clipboard.js installed. That's what handles the clipboard interactions. The "invalid constructor" is the attempt to instantiate the Clipboard.js object failing.

[jakeNiemiec]

This was also a problem with webpack.

The problem was the same: use clipboard/lib/clipboard.js instead of the dist. This seems to be an issue with how they transpile.

[knyy]

Any chance your browser is Chrome v61?

Chrome v61 added a window.Clipboard which is probably causing a namespace collision with copyToClipboard plugin.

I only got the error on Chrome v61, tested on Chrome v60 and v61.

[mAAdhaTTah]

Did it really? We check window.Clipboard to determine whether to inject/provide the CDN version. If Chrome has a window.Clipboard already, we can't check inject the correct one.

Poking at it in the console, it doesn't appear to... do anything. I can't new it, it has no static methods, although there are a few prototype methods, and I can't find any documentation on it. There's also a ticket open @ Clipboard.js to change the global name: https://github.com/zenorocha/clipboard.js/issues/468

Hoping Chrome will provide some docs on this feature so maybe we can figure out how to detect it properly or Clipboard.js changes the global name. I don't have a solution off the top though.

[dmytrodemchenko]

Hi,
The same issue I got in the latest version of Chrome.
[Version 61.0.3163.79 (Official Build) (64-bit)]

Screenshot from devTool

[ghost]

Interesting points was not aware of needing Clipboard.js installed.

Actually I am running Chrome V63 see here:

[mAAdhaTTah]

@ayumihamsaki Anything after 61 will have this problem, as that's when the global Clipboard object was introduced. The plugin normally installs Clipboard.js at runtime for you, if you don't install it yourself, but with the introduction of window.Clipboard in Chrome 61, this check fails, as window.Clipboard already exists. It's just not the Clipboard.js instance we're expecting here.

[caraya]

I was having the same problem with Prism installed manually in a Wordpress theme.

Adding clipboard.js explicitly solved the issue in Chrome 61 and Canary (63.0.3213.0).

@mAAdhaTTah Chromestatus has an entry for Asynchronous Clipboard API. It also has a couple links to demos and docs.

The links point to an explainer and the proposal at wicg

Hope this helps

[mAAdhaTTah]

@caraya Thanks, that might be it, but Chrome 61 (or 63) doesn't have a navigator.clipboard property. I'm still not sure the cause.

Update: Yes, the window.Clipboard prototype matches the Clipboard inteface in the spec, so this must be an early introduction as they build out the infra for this Clipboard api.

Just so everyone knows, this can be resolved by including Clipboard.js yourself, either in a script tag or bundled into your JS. It's specifically the plugin's behavior to fallback to a CDN version if it doesn't find Clipboard.js that is failing.

[nunos7]

In my scenario

<script src="prism.js"></script>
<script src="prism-toolbar.min.js"></script>
<script src="copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

i just inverting the position of the copy-to-clipboard plugin to be the first one to be loaded, and problem solved!.

<script src="copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script src="prism.js"></script>
<script src="prism-toolbar.min.js"></script>

However loading the plugin before the main component seems a bit strange...

NS

[timhemendinger]

I added:

$("<script />", { type: "text/javascript", src: "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js" }).appendTo("head"); right after Prism = function () { in prism.js.

It's essentially the same thing as adding the clipboard script to <head> but I wanted to keep it contained to the script itself.

[ldemailly]

@timhemendinger I tried that but didn't get it to work - do you have a diff ?

[rwebster85]

If you're using PrismJS in a custom wordpress plugin, you can enqueue "clipboard.min.js" before you enqueue "prismJS" like so...

wp_register_script( 'prismJS', plugins_url('/includes/prism.js',__FILE__ ));
wp_register_script( 'clipboardPrismJS', 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js' );
wp_enqueue_script('clipboardPrismJS');
wp_enqueue_script('prismJS');

[mAAdhaTTah]

So the require step doesn't work either because window.Clipboard was found initially. The only way this works is to load up the Clipboard first and assign the correct instance to window.Clipboard D:.

[mAAdhaTTah]

@Golmote Would it be a terrible hack to do something like this instead:

/(native code)/.test(window.Clipboard.toString())

[mAAdhaTTah]

This version of the fix is here: #1206.