Error resolve 'riffwave' in node modules.

[colinwilliams91]

Hi, Chris,

I am trying to use your library in a typescript/react project originally and was getting this error:

ERROR in ./node_modules/jsfxr/sfxr.js 
Module not found: Error: Can't resolve 'riffwave' in '/home/colin/projects/sound-test/my-app/node_modules/jsfxr'
Did you mean './riffwave'?
Requests that should resolve in the current directory need to start with './'.

So, I originally thought I might have some compatibility issues with require/import syntax, but after much troubleshooting I couldn't figure it out. So, I spun up a very simple create-react-app to try to see if I could get jsfxr to work and somehow I am still getting the same error. I checked in the suggested file for the problem, but it looks like the require is happening correctly and the error is incorrect... RIFFWAVE = require("./riffwave.js"); is the only place I could find inside my-app/node_modules/jsfxr/sfxr.js So, I can't figure out what the issue is. Any ideas?

Do I need to npm i riffwave as well? When I try that it fails to find it.

[colinwilliams91]

I even tried intentionally breaking the sfxr module by commenting out important code inside sfxr.js and it still throws the same error. So, my suspicion is that it is failing even before it can try to get to that require statement.

For the record, I followed your very simple instructions for installation within the README, so I don't think it's user error regarding the actual execution of jsfxr methods or any of that.

Thanks so much for any response you manage to give me. I would love to be able to use your tool in my projects!

[chr15m]

Hi @colinwilliams91 thanks for reporting this. Can you send me the code you are using to require jsfxr? And also the node command you are using.

[colinwilliams91]

Absolutely! Thank you for the quick response! Sorry I am a very novice web developer, so, is it okay if I include the code here with the proper markdown or is there a better way to send it to you? It isn't much code.

[chr15m]

Yeah just go ahead and paste it. Use three back-ticks: ` to designate a code block.

[colinwilliams91]

So, I deserialized a sound object from the GUI:

import { sfxr } from 'jsfxr';

const completeSound = {
/* ... */
}

export const complete = sfxr.generate(completeSound);

and then in my react component:

/* ... */
import { sfxr } from 'jsfxr';
import { complete } from './sounds';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <h1 onclick={() => sfxr.play(complete)}>HELLO SOUND</h1> // <--
      </header>
    </div>
  );
}

export default App;

And then I am just running npm run start "start": "react-scripts start", <-- script in package.json

Sorry if I didn't understand the 'node command' part.

[colinwilliams91]

"jsfxr": "^1.2.0", in my dependencies

[colinwilliams91]

The error is pointing to my-app/node_modules/jsfxr/sfxr.js --> RIFFWAVE = require("./riffwave.js"); I believe? But, that looks fine?

[chr15m]

OK cool, thanks for all the detail, will investigate tonight.

[colinwilliams91]

Thanks so much @chr15m ! I appreciate any insight you'll give. Let me know here how else I can be of any help.

[colinwilliams91]

Is there somewhere I need to connect an external .WAV file to allow a sound to be played? Or is the serialized object good enough for sfxr to create an actual sound file to execute as needed?

[chr15m]

You should be able to play the serialized sound as per the docs:

var a = sfxr.toAudio(completeSound);
a.play();

So in your code you would do this instead of .generate(...).

[chr15m]

If you want to get the wav file as a dataURI you can do this:

var a = sfxr.toWave(completeSound);
console.log(a.dataURI);

[colinwilliams91]

Hmm, dang, I was hoping I had misused .generate where I should have been using .toAudio but unfortunately the Can't resolve 'riffwave' remains. Thank you for the info on that part though.

[chr15m]

@colinwilliams91 thanks to your instructions I managed to replicate with webpack and create-react-app. It took me the whole day but I finally figured out a fix. :sweat_smile: I have pushed a fix and version 1.2.1 is up on npm. Could you try npm i jsfxr@latest and see if it fixes the issue for you? I also had to delete node_modules/.cache so you might need to do that in your react app.

[chr15m]

@colinwilliams91 please let me know if this fixed the issue for you.

[colinwilliams91]

Oh that's fantastic @chr15m !! Thank you! I'm so sorry that took so much of your time. I will let you know ASAP.

[colinwilliams91]

oh my gosh! yay!! it worked @chr15m great job!! Thank you!!

[chr15m]

All good, thanks for reporting the bug, and thanks very much for taking the time to test and report back.