search

mspae / react-wavesurfer

React component wrapper for wavesurfer.js
BSD 3-Clause "New" or "Revised" License
108 stars 46 forks source link

cant use react-wavesurfer in my project #46

Closed chicarrida closed 7 years ago

chicarrida commented 7 years ago

I cloned the repo and ran the examples - they look great! I would really like to use react-wavesurfer in my project.

I installed both of them using npm, this is how my package.json looks:

  "react-wavesurfer": "^0.8.3",
   "wavesurfer.js": "^1.1.11"

And expose it using Webpack as described. Using the simple.js file from the example folder in my component I get this Error & Warning:

WARNING in ./~/source-map-loader!./~/wavesurfer.js/dist/wavesurfer.min.js
(Emitted value instead of an instance of Error) Cannot find SourceMap 'wavesurfer.min.js.map': Error: Can't resolve './wavesurfer.min.js.map' in '/home/mele/dummy_start_page/frontend/node_modules/wavesurfer.js/dist'
 @ ./~/wavesurfer.js/dist/wavesurfer.min.js 3:40-149
 @ ./src/app/components/DetailView/simple.js
 @ ./src/app/components/DetailView/DetailView.js
 @ ./src/app/components/App.js
 @ ./src/app/index.tsx
 @ multi react-hot-loader/patch ./src/app/index.tsx

WARNING in ./~/source-map-loader!./~/wavesurfer.js/dist/wavesurfer.min.js
(Emitted value instead of an instance of Error) Cannot find SourceMap 'wavesurfer.min.js.map': Error: Can't resolve './wavesurfer.min.js.map' in '/home/mele/dummy_start_page/frontend/node_modules/wavesurfer.js/dist'
 @ ./~/wavesurfer.js/dist/wavesurfer.min.js 3:40-149
 @ ./src/app/components/DetailView/simple.js
 @ ./src/app/components/DetailView/DetailView.js
 @ ./src/app/components/App.js
 @ ./src/app/index.tsx
 @ multi react-hot-loader/patch ./src/app/index.tsx

ERROR in ./~/react-wavesurfer/lib/react-wavesurfer.min.js
Module not found: Error: Can't resolve 'wavesurfer' in '/home/mele/dummy_start_page/frontend/node_modules/react-wavesurfer/lib'
 @ ./~/react-wavesurfer/lib/react-wavesurfer.min.js 6:270-304
 @ ./src/app/components/DetailView/simple.js
 @ ./src/app/components/DetailView/DetailView.js
 @ ./src/app/components/App.js
 @ ./src/app/index.tsx
 @ multi react-hot-loader/patch ./src/app/index.tsx

I dont understand what I am missing, would be grateful for any hint...

mspae commented 7 years ago

Try this: https://github.com/mspae/react-wavesurfer#prerequisites-and-common-pitfalls

It looks like this is an issue with wavesurfer.js