Как потребовать tippy.js в Webpack 3.6? - PullRequest
Новая
       19

Как потребовать tippy.js в Webpack 3.6?

0 голосов
/ 21 ноября 2018

Я использую Laravel Mix, который использует Webpack 3.6, и пытаюсь установить https://atomiks.github.io/tippyjs/.

Мой SCSS, вероятно, работает нормально через @import "../../../../node_modules/tippy.js/dist/tippy.css";.

Однако,вверху моего файла JavaScript у меня есть это, которое не работает: 

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

Я получаю ошибку: Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Как я могу импортировать Tippy.jsтаким образом, который работает с этим подходом Webpack?

( Как импортировать tippy.js в HTML-страницу с Webpack 4? , очевидно, не работает для меня.)

Ответы [ 3 ]

0 голосов
/ 26 ноября 2018

import tippy from 'tippy.js' использует версию ESM (поле "module" в package.json).

Попробуйте: var tippy = require('tippy.js');

Для использования версии UMD (поддерживает CJS)

0 голосов
/ 18 марта 2019 
window.Popper = require('popper.js').default;
window.tippy = require('tippy.js').default;
0 голосов
/ 21 ноября 2018

Я бы предпочел бы принять ответ от кого-то, кто может показать мне, как заставить работать 3.2.0.

Мне удалось получить старше версии ( 2.6.0 ) для работы (частично).

npm install tippy.js@2.6.0

В моем файле: 

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'
});

Но, к сожалению, всплывающие подсказки никогда не появляются на сенсорных устройствах (таких как iPhone), и я не знаю, почему.

...