-
-
Notifications
You must be signed in to change notification settings - Fork 115
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
'WebMidi' only refers to a type, but is being used as a namespace here. #247
Comments
I am not getting this error in an environment very similar to yours. Could you provide an example that triggers the issue? Perhaps it's something in your config file? The |
@djipco It seems like there is some sort of incompatibility with the angular build. I simply created a new angular project and imported WebMidi and the same error occurs. Repo: https://github.com/maximedupre/web-midi-issue Run |
I also have this problem with Vite + React. I use Node v17.3.0 and TypeScript on Linux (Pop!_OS). The code from the project is also available here: https://github.com/Vexcited/lpadder/blob/9e3122723c06aa052506c52a9e0953214524d6ce/src/pages/utilities/midi-checker.tsx I have the same error when trying to build my project, so I guess this is not only happening for Angular Hope it can help ! Edit: found a workaround by using temporarily I really want to help but I looked up the code and seems so much harder than I thought 😭 |
I will try to find some time to look at this this week. Unfortunately, I'm not a TypeScript developer so I feel out of my depth... We need to find a TypeScript expert that's also a WEBMIDI.js fan. Anyone? |
I'm not super familiar with library type declarations but it seems like you might need something like: // get types somehow
import type { WebMidi, MIDIInput, MIDIOutput, MIDIAccess } from "...";
// export this type
export WebMidi;
// overlay with a namespace for accessing other types,
// might be `declare namespace` instead
export namespace WebMidi {
export MIDIInput;
export MIDIOutput;
export MIDIAccess;
} |
@joshwilsonvu Thank you so much for your input. Here is something you probably should know to better understand the problem. By default, TypeScript does not know about the objects from the native Web MIDI API. So, I had to add @types/webmidi as a dependency for the library. However, the namespace for the native objects ( |
Can I somehow rename the namespace of the imported types (@types/webmidi) to, for example, The thing is that I'm never explicitly importing the external types. I just added them as a dependency to the project and TypeScript automagically picks them up. |
Check out this example, to see how the types overlap. I think it's likely a problem with how these types are imported/exported. Just a note, if you want to forward |
Thanks to the feedback from @joshwilsonvu, I think I have finally found a solution. This is what I did:
With the new definitions, I was able to successfully compile the Angular example prepared by @maximedupre (thanks for that, by the way!). @Vexcited Can you try it out and confirm that it works for you too? If it does, I will publish a new release. All you have to do is replace the following file in your project ( If others want to try it out, simply replace either the |
Hello ! I've followed your instructions and it successfully built ! I can confirm that .cjs and .esm works on Vite + React. |
Release v3.0.16 fixes this problem. Thanks all for your help! |
Description
There seems to be an issue with the typings 🤔
Environment:
Specify the environment where you are witnessing the problem:
The text was updated successfully, but these errors were encountered: