How to require tippy.js in Webpack 3.6?

Question

I'm using Laravel Mix, which uses Webpack 3.6, and I'm trying to install https://atomiks.github.io/tippyjs/.

My SCSS is probably working fine via @import "../../../../node_modules/tippy.js/dist/tippy.css";.

However, at the top of my javascript file, I have this, which doesn't work:

var $ = require('jquery');
var webcast_helper = require('webcast_helper');
var moment = require('moment');
import tippy from 'tippy.js';

I get error: Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

How can I import Tippy.js in a way that works with this Webpack approach?

_{(How to import tippy.js into an html page with webpack 4? obviously doesn't work for me.)}

score 6 · Answer 1 · answered Mar 18 '19 at 00:49

6

window.Popper = require('popper.js').default;
window.tippy = require('tippy.js').default;

answered Mar 18 '19 at 00:49

Ilya Hoilik

154
1
5

Ahh I see this now. Thanks. – Ryan Oct 06 '19 at 02:15

score 5 · Accepted Answer · edited Oct 06 '19 at 00:40

5

import tippy from 'tippy.js' uses the ESM version (the "module" field in package.json).

For TippyJs 5.0.1 and Webpack 4, try: const tippy = require('tippy.js').default;

To use the UMD version (supports CJS)

However I don't recommend using CJS version because treeshaking doesn't work.

edited Oct 06 '19 at 00:40

Ryan

22,332
31
176
357

answered Nov 25 '18 at 23:46

atomiks

684
6
11

1

Thanks, but I already tried that, and it seems to work for 2.6.0 but not 3.2.0, as I mentioned here: https://stackoverflow.com/a/53404391/470749 – Ryan Nov 26 '18 at 00:09
How about `require('tippy.js/dist/tippy.js')`. To include CSS as well: `require('tippy.js/dist/tippy.all.js')` – atomiks Nov 26 '18 at 01:53
I'm now back trying to get Tippy working (and I might as well try to get v5 working instead of 2.6), but I haven't figured out how to get it working when required via Webpack. Any ideas? I'm excited about your library and really hope it can work for me. Thanks for your help. – Ryan Oct 05 '19 at 22:08
I updated your answer, upvoted it, and accepted it. Thanks! – Ryan Oct 06 '19 at 00:40

score 0 · Answer 3 · answered Sep 10 '19 at 01:04

0

Line below works for me on webpack 3.3.0

const tippy = require('tippy.js/umd/index.all.js')

Got this from the tippy.js website:

** Note: You willl also need to include a css loader in your webpack.config.js if the css is used

answered Sep 10 '19 at 01:04

Jesse Reza Khorasanee

3,140
4
36
53

I'm finally back to this question (wanting to try Tippy again), and this answer looked promising, but now Tippy is at version 5, and I can't find instructions about how to get it to work with Webpack. – Ryan Oct 05 '19 at 18:32

Ryan · Answer 4 · 2018-11-23T14:28:57.737

I'd prefer to accept an answer from someone who can show me how to get 3.2.0 to work.

I was able to get an older version (2.6.0) to work (partially).

npm install tippy.js@2.6.0

In my file:

const tippy = require('tippy.js');
tippy($(inputRangeEl).get(0), {
    content: "Rewind by clicking anywhere on this red slider",
    arrow: true,
    duration: [0, 1000], // Array [show, hide]
    followCursor: "horizontal",
    size: 'large',
    animation: 'scale'
});

But the tooltips unfortunately never appear on touch devices (such as iPhone) and I don't know why.

I'm trying to have a tooltip on <input type="range" id="position" name="position" step="1" min="0" max="1" value="1" title="Rewind by clicking anywhere on this red slider"/>.

How to require tippy.js in Webpack 3.6?

4 Answers4