Clipboard.js: Cannot find module './clipboard-action'

[fibo]

Minimal example

Using Clipboard v2.0.1 and importing it

import Clipboard from 'clipboard'

Expected behaviour

Can import Clipboard. I fixed it downgrading to Clipboard v1.7.1

Actual behaviour

Got error

Cannot find module './clipboard-action'

Browsers affected

I tested it on Chrome.

[jpike88]

Having this issue as well. Using fusebox when trying to bundle, getting

→ WARNING Statement "dist/clipboard-action.js" has failed to resolve in module "clipboard"

[fibo]

Other than that I tryed to use vanilla code to handle browser clipboard and it is not that easy, in particular when there are multiple copy buttons, so thanks @zenorocha for creating this package.

On the other end I would suggest trying other bundles like rollup or my favourite browserify, cause webpack changes major version too often, specially for OOS where most of the time devs cannot spend to much time, in my opinion a more stable bundler, or at least one that cares about backward compatibility would be better in this case.

[jpike88]

@zenorocha can this be fixed? whats the best way forward?

[jpike88]

This is seriously starting to drive me nuts. @zenorocha appreciate your opinion here, otherwise I'm going to fork.

[Ruffio]

Should it be ClipboardJS somewhere?

[fibo]

@jpike88 using v1.7.1 worked for me, the quickest workaround for me was to downgrade.

[jpike88]

https://github.com/zenorocha/clipboard.js/blob/3382ea3d14a6c46d274df6147c73a83ef47e41b3/dist/clipboard.js#L506

This line is the issue. It's referencing a relative path that doesn't exist. Very weird, looks like it might be webpack's fault. And no idea why this issue still exists, it's a really annoying one.

@fibo how do you avoid the issue mentioned in #468?

[fibo]

@jpike88 I had not that issue, probably because I used Clipboard from npm package, hence there should not be global collisions.

[Ruffio]

@fibo can this issue be closed?

[fibo]

@Ruffio nope, the bug was not fixed.

[Ruffio]

@fibo and you are importing ClipboardJS ?

It would be a good idea with a JSBin or similar so people can help you.
I personally don't use webpack/UMD so I can't help you...

[fibo]

Here are steps that can be used to reproduce error quickly.

1. in some empty folder, open a terminal
2. npm init -y
3. npm install clipboard
4. npm install zeroconf-redux
5. npx zeroconf-redux
6. A browser will open, and an index.js file will be created. Edit index.js and add as first line of code the following

import Clipboard from 'clipboard'

[hdodov]

Having the same error using Gulp over here:

module "./clipboard-action" not found from "C:\xampp\htdocs\project\node_modules\clipboard\dist\clipboard.js"

I've installed clipboard version 2.0.1.

[hlolli]

I get this error too, using Clojurescript

failed to resolve: ./clipboard-action from /home/hlolli/csound/midi2score/node_modules/clipboard/dist/clipboard.js
{:relative-to #object[java.io.File 0x5b2e4ff1 "/home/hlolli/csound/midi2score/node_modules/clipboard/dist/clipboard.js"], :entry "./clipboard-action"}

[nadnoslen]

I'm working with an Ember-Addon, using the ember-auto-import to bring in Clipboard-2.0.1 from yarn add --dev clipboard. I'm simply importing clipboard in my component as follows: import Clipboard from 'clipboard';. All works great when I run my DUMMY test app locally (dev/text) 👍

If I run a _production_ build of the DUMMY app (which I deploy for demo purposes), I get errors. 👎

I got around this because I don't care about Clipboard-2.0.1 for my feeble demo site and I reverted to Clipboard-1.7.1: yarn add --dev clipboard@^1.7.1. My production build is now green and happy.

[zenorocha]

I just released a new version 2.0.2 that uses Webpack 4 for the module bundling. Can you please test and let me know if the problem was fixed? Thanks!

[nadnoslen]

Yup. That worked for me. I can now import Clipboard from 'clipboard'; without issue.

Thank you so much for the fix.

[zenorocha]

That's great to hear, thanks @nadnoslen.