J'utilise Laravel Mix, qui utilise Webpack 3.6, et j'essaye d'installer https: // atomiks. github.io/tippyjs/.

Mon SCSS fonctionne probablement bien via @import "../../../../node_modules/tippy.js/dist/tippy.css";.

Cependant, en haut de mon fichier javascript, j'ai ceci, qui ne fonctionne pas:

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

J'obtiens une erreur: Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Comment puis-je importer Tippy.js d'une manière qui fonctionne avec cette approche Webpack?

(Comment importer tippy.js dans une page html avec webpack 4? ne fonctionne évidemment pas pour moi.)

2
Ryan 21 nov. 2018 à 00:55

4 réponses

Meilleure réponse

import tippy from 'tippy.js' utilise la version ESM (le champ "module" dans package.json).

Pour TippyJs 5.0.1 et Webpack 4, essayez: const tippy = require('tippy.js').default;

Pour utiliser la version UMD (prend en charge CJS)

Cependant, je ne recommande pas d'utiliser la version CJS car le tremblement d'arbres ne fonctionne pas.

2
Ryan 6 oct. 2019 à 00:40

La ligne ci-dessous fonctionne pour moi sur webpack 3.3.0

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

Obtenu ceci sur le site Web tippy.js: entrez la description de l'image ici

** Remarque: Vous devrez également inclure un chargeur css dans votre webpack.config.js si le css est utilisé

0
Jesse Reza Khorasanee 10 sept. 2019 à 01:04

Je préférerais accepter une réponse de quelqu'un qui peut me montrer comment faire fonctionner la version 3.2.0.

J'ai pu obtenir une version plus ancienne (2.6.0) pour travailler (partiellement).

npm install tippy.js@2.6.0

Dans mon dossier:

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

Mais les info-bulles n'apparaissent malheureusement jamais sur les appareils tactiles (comme l'iPhone) et je ne sais pas pourquoi.

J'essaye d'avoir une info-bulle sur <input type="range" id="position" name="position" step="1" min="0" max="1" value="1" title="Rewind by clicking anywhere on this red slider"/>.

0
Ryan 23 nov. 2018 à 14:28
window.Popper = require('popper.js').default;
window.tippy = require('tippy.js').default;
1
Ilya Hoilik 18 mars 2019 à 00:49