Cannot import Tone.js is in a Next.js project

Question

I'm unable to import Tone in my Next.js project. I have Tone as a dependency, but when I run import * as Tone from 'tone' Next says it can't find the module node_modules/tone/build/esm/core/Global imported from node_modules/tone/build/esm/index.js. Originally I thought it was a browser thing, where I had to make sure I was importing Tone only in the browser and not in Node, but dynamically importing (as described here) in the useEffect hook (which only runs in the browser), but it still couldn't find the module.

The odd thing is that the browser console prints * Tone.js v14.8.38 *, so clearly Tone exists, but Next can't find it for some reason.

I'm running Next.js version 12, Tone v14.8.38, React 18 and yarn v3.2.0, if that matters. I'd really appreciate any help!

Answer 1

it is currently not possible to run tone in node. You should download tone.js from here and include it as a script in your project.

you could also try using another library like soundfont

Answer 2

You are on the right track with the dynamic loading, I've got a large project doing it that way. This is how I've done it (although I can't really see what you have done wrong) -

const DynamicComponent = dynamic(
  () => import('../components/foobar'),
  { ssr: false }
)

More details can be seen here (although I see you posted that already). https://nextjs.org/docs/advanced-features/dynamic-import

Inside your component you can import tone objects in the following fashion eg.

import { Clock, Merge, Oscillator, Player, Waveform } from "tone";

I have used useEffect to instantiate tone classes, but I have also done it using JS classes. Both ways worked for me.

Is this different from what you did? Just to check you are doing the dynamic import at the page level right? And how are you importing the tone objects? This depends on your specific code.

I'm using

"next": "^10.0.9",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"tone": "^14.7.77"

Might be worth downgrading to these and trying.