use vextab in angular-cli

[lilworks]

I'm trying to get the vextab api in an angular-cli project. I manage to get Vexflow working but I can't get
import * as vextab from 'vextab'

here a stackblitz
(https://stackblitz.com/edit/angular-umnmcs)

Any suggestion?

[stephaneeybert]

@lilworks You got some progress ?

[davidmold]

Yes, this won't work in VueJS either. If you try to import vextab with
import {VexTab, Artist, Vex} from 'vextab';
or
import vextab from 'vextab'

all of the imports are undefined.

[leocaseiro]

After releasing a compiled UMD #113 to npm, this issue should be fixed.

[LeonhWolf]

But does it work now? #113 seems to have been merged but I still get the same error when trying to import vextab in Vue.js.

[leocaseiro]

I think the version has not been published to npm yet.

[LeonhWolf]

Hi, it's been a while and I wanted to give it another shot. @leocaseiro were you able to use vextab by installing it directly from this repo and not from npm?
I tried npm i https://github.com/0xfe/vextab.git and it installed everything. However, I keep getting the error Module not found: Error: Can't resolve 'vextab' in 'C:\path\to\component'.
I tried deleting the folder node_modules and npm install. Didn't work either.

Could you give me a little nudge into the right direction?

[pmarsceill]

Has there been any update here? Really looking forward to using VexTab with a react project I'm working on. @leocaseiro were you able to get this to work?

[stephaneeybert]

@pmarsceill Here is how I did to import it.

import Vex from 'vexflow';

My package.json file contains:

"vexflow": "^3.0.9",
"@types/vexflow": "^1.2.33",

I could then use it like:

const formatter: Vex.Flow.Formatter = new Vex.Flow.Formatter();
const stave: Vex.Flow.Stave = this.drawBareStave(measure, soundtrack, displayWidth, staveX, staveY);

[pmarsceill]

I got that working for VexFlow as you described @stephaneeybert , but to use the VexTab syntax there is no way to import the vextab package.

[pmarsceill]

For those curious, I got the import to work in my React app by cloning this repo, running the build script locally, and then copying the entire repo/directory into a vendor folder in my project. Then importing the build output (/dist) from the local copy (instead importing the module from npm):

import { Vex, Artist, VexTab } from '../../../vendor/vextab/dist/main.prod'

Not ideal, but it works for now.

[K20shores]

I've tried what @pmarsceill suggested in vue 3.3.11 with vite. I've gotten close

I ran

npm update
npm install
export NODE_OPTIONS=--openssl-legacy-provider
npm run build

then I copied the dist folderd and imported like this

import { VexTab, Artist, Vex } from "../../vendor/vextab/dist/main.prod"

but I still receive an import error.

Uncaught SyntaxError: The requested module '/vendor/vextab/dist/main.prod.js' does not provide an export named 'Artist' (at Component.vue:18:18)

I'll continue trying to figure this out, but @0xfe, is there any chance we could get something published that defines these exports?

[dan-whitehouse]

This isn't fixed, can we please look into this?