Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

webpack and plugin import

See original GitHub issue

Hello all,

really good job, very simple and efficient lib !

Using webpack I can install wave surfer easily, but I fail to load plugins.

import WaveSurfer from "wavesurfer";
import Regions from "wavesurfer/plugin/wavesurfer.regions"

it builds, but in the console i get

Uncaught ReferenceError: WaveSurfer is not defined
    at Object.<anonymous> (wavesurfer.regions.js:4)
    at __webpack_require__ (bootstrap a294b25…:19)
    at Object.__WEBPACK_AMD_DEFINE_ARRAY__ (wavesurfer.js:2)
    at __webpack_require__ (bootstrap a294b25…:19)
    at Object.<anonymous> (vue.js:5)
    at __webpack_require__ (bootstrap a294b25…:19)
    at Object.<anonymous> (index.js:1)
    at __webpack_require__ (bootstrap a294b25…:19)
    at Object.<anonymous> (main.js:4)
    at __webpack_require__ (bootstrap a294b25…:19)
(anonymous) @ wavesurfer.regions.js:4
__webpack_require__ @ bootstrap a294b25…:19
__WEBPACK_AMD_DEFINE_ARRAY__ @ wavesurfer.js:2
__webpack_require__ @ bootstrap a294b25…:19
(anonymous) @ vue.js:5
__webpack_require__ @ bootstrap a294b25…:19
(anonymous) @ index.js:1
__webpack_require__ @ bootstrap a294b25…:19
(anonymous) @ main.js:4
__webpack_require__ @ bootstrap a294b25…:19
(anonymous) @ bootstrap a294b25…:39
(anonymous) @ bootstrap a294b25…:39

Not really a bug I think but seems a plugin require failure…

any clue??

Issue Analytics

State:
Created 6 years ago
Comments:10 (4 by maintainers)

Top GitHub Comments

10reactions

simdaxcommented, May 2, 2017

it works for what I tried 😃


import WaveSurfer from 'wavesurfer.js';
import TimelinePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js';
import MinimapPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.minimap.min.js';
import RegionPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.regions.min.js';
import SpectrogramPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.spectrogram.min.js';
import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.min.js';
import ElanPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.elan.min.js';


// ... initialising waveform with plugins
var wavesurfer = WaveSurfer.create({
    container: '#wave',
    waveColor: 'violet',
    plugins: [
        SpectrogramPlugin.create({
            container:"#iu"
        }),
        CursorPlugin.create(),
        ElanPlugin.create({
            container:"#ia"
        }),
        RegionPlugin.create(),
        TimelinePlugin.create({
            container:"#io"
        }),
        MinimapPlugin.create()
    ]
});

wavesurfer.load("../audio/song.mp3")

https://postimg.org/image/k2qq3szpb/

PS : what is elan and cursor ??

PPS : oh, and it seems that there is some changes in plugins behavior, like for Region and “enableDragSelection”

0reactions

sht5commented, Nov 23, 2017

what is the alternative solution to use plugins with webpack before v2?

Top Results From Across the Web

webpack-plugin-import - npm

Start using webpack-plugin-import in your project by running `npm i webpack-plugin-import`. There are 24 other projects in the npm registry ...

Plugins - webpack

A webpack plugin is a JavaScript object that has an apply method. This apply method is called by the webpack compiler, giving access...

imports-loader - webpack

The imports loader allows you to use modules that depend on specific global ... Be careful, existing imports ( import / require )...

InstallWebpackPlugin | webpack

Instead, use require or import how you normally would and installation will happen automatically to install & save missing dependencies while you work!...

Plugins - webpack

Plugins ; ProvidePlugin, Use modules without having to use import/require ; SourceMapDevToolPlugin, Enables a more fine grained control of source maps.