4

Warning: I'm new to this.

I'm working on a react app that uses react-create-app via yarn.

I'm trying to install react-wavesurfer using these instructions https://github.com/mspae/react-wavesurfer#prerequisites-and-common-pitfalls

I need to get Wavesurfer.js into the application somehow. These instructions include making changes to the webpack config, which I'm trying to avoid ejecting.

I found this react-app-rewired and this article https://jaketrent.com/post/change-webpack-config-create-react-app-without-ejecting/

So I've added this to config-overrides.js

const rewireProvidePlugin = require('react-app-rewire-provide-plugin')

// Use `webpack.ProvidePlugin` to add jQuery globally


module.exports = function override(config, env) {
  // add a plugin
  config = rewireProvidePlugin(config, env, {
    'WaveSurfer': 'wavesurfer.js',
  })

    resolve: {
        alias: {
            wavesurfer: require.resolve('wavesurfer.js')
        }
    }

  return config
}

Which builds, but I still can't access wavesurfer in the page which has these imports

import React, {Component} from 'react'
import history from '../../../history'
import Wavesurfer from 'react-wavesurfer'

import * as _ from 'lodash'

require('wavesurfer.js')
require('wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js')
require('wavesurfer.js/dist/plugin/wavesurfer.regions.min.js')
require('wavesurfer.js/dist/plugin/wavesurfer.minimap.min.js')

When I try and run react-app-rewired start

Any clues on how to fix this?

beek
  • 3,522
  • 8
  • 33
  • 86

1 Answers1

0

Use the npm version instead, add wavesurfer to your package.json file under the dependencies and then do an npm install or if you're using yarn do yarn install

How to use inside project.

import WaveSurfer from 'wavesurfer.js';
Emil Reña Enriquez
  • 2,929
  • 1
  • 29
  • 32