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.)}

Answer 1

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.

Answer 2

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 [email protected]

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"/>.

Answer 3

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

Answer 4

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