Vue中导入Tone.js v14.7.34报错，如何正确导入Tone对象？

Hey there! I’ve run into this exact import snag with Tone.js v14 before, so let’s get it sorted out for you right away.

Why Your Current Imports Aren’t Working #

The warning "export 'default' (imported as 'Tone') was not found in 'tone'" pops up because Tone.js v14 uses pure ES modules and doesn’t provide a default export. Here’s what’s off about your attempts:

• import Tone from "tone" tries to pull in a default export that doesn’t exist in v14’s module structure.
• import { Tone } from "tone" is also incorrect — there’s no named export called Tone in the library. All classes, functions, and utilities are exported directly at the top level instead of being wrapped in a single Tone object.

Correct Import Methods #

You’ve got two solid options depending on your needs:

1. Import the Entire Tone Namespace

If you want to stick with the familiar Tone.* syntax (like you might have used in older versions), import the entire module as a namespace:

import * as Tone from "tone";

Then you can use it just like you’d expect:

// Example: Create a synth and play a quick note
const synth = new Tone.Synth().toDestination();
Tone.Transport.start();
synth.triggerAttackRelease("C4", "8n");

2. Import Only What You Need (Tree-Shakable)

For a smaller bundle size (great for production), import only the specific classes or functions you’ll use:

import { Synth, Transport } from "tone";

Then use them without the Tone. prefix:

const synth = new Synth().toDestination();
Transport.start();
synth.triggerAttackRelease("C4", "8n");

Quick Check #

Make sure your Vue project is set up to handle ES modules — modern Vue CLI or Vite setups do this by default. If you hit build issues, double-check that your package.json doesn’t have "type": "commonjs" (Vue projects typically use "module" or omit this field entirely).

内容的提问来源于stack exchange，提问作者user10840312