search

Tonejs / Tone.js

A Web Audio framework for making interactive music in the browser.
https://tonejs.github.io
MIT License
13.53k stars 987 forks source link

import error - cant not worked in nuxt3 #1081

Open wohui opened 2 years ago

wohui commented 2 years ago

I got a error when use import * as Tone from 'tone'

error_info: Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Usenode --trace-warnings ...to show where the warning was created) only npm run dev got the error。it can workd when npm run build ,amazing

my code link:https://stackblitz.com/edit/github-cmudtt?file=app.vue

the issue also report in nuxt3: https://github.com/nuxt/nuxt.js/issues/13976 can help me how to fix this,thank you

pi0 commented 2 years ago

Hi @wohui. The issue you are getting from sandbox, is that because tone > standardized-audio-context is not a valid ESM package (using ESM syntax but neither using type: 'module' or .mjs extension).

Therefore we need to transpile it:

export default defineNuxtConfig({
  build: {
    transpile: ['tone', 'standardized-audio-context'],
  },
});

Sandbox: https://stackblitz.com/edit/github-cmudtt-nvzmdw?file=nuxt.config.ts

wohui commented 2 years ago

@pi0 hi pi0 very thank you ！ can you tell me how to find out it is caused by this library

chrisguttandin commented 2 years ago

Hi @wohui, sorry for the inconvenience. I'm the author of standardized-audio-context. I planned to update the way the package is published since "type": "module" became a thing but I don't know yet how that should be done to support all the different use cases. There are some frameworks/tools which only support the new way but there are others which still require the old format. 🤷

standardized-audio-context is for example already published as an ESM package but it doesn't have the "type": "module" property yet which might be the reason why that's not picked up by some bundlers.

pi0 commented 2 years ago

Hi @chrisguttandin I would suggest to start compatibility by renaming .jsto .mjs when using esm syntax and type: module is not possible. Feel free to create an issue and ping me would be happy to help on packaging support.

3aluw commented 1 year ago

I had the same issue with contentful-management and after I added it to transpile array I faced a new error which I'm not sure how to resolve. I'm not sure what to do next ? ncaught SyntaxError: The requested module '/_nuxt/node_modules/lodash.isplainobject/index.js?v=c1b556fd' does not provide an export named 'default' (at index.es-modules.js?v=c1b556fd:4:8)