Load aurelia-mask on a aurelia-cli(0.26.1) project

[renathoaz]

Hello guys, I'm facing an issue on using aurelia-mask in a aurelia-cli (0.26.1) project.

I tried a lot of ways to load the aurelia-mask, but it throws errors like this:

  <require from="../node_modules/aurelia-mask/dist/masked-input"></require>

The error:

But I managed to use aurelia-mask only by using this way on aurelia.json

          {
              "name": "masker",
              "path": "../node_modules/aurelia-mask/dist/masker"
          },
          {
              "name": "aurelia-mask",
              "path": "../node_modules/aurelia-mask/dist/masked-input"
          },

Note if not include masker file it throws errors.

But I don't know why the masked-input.ts file overrides vendor-bundle.js on console as it follows:

somebody can help to solve this, is there any proper way to include it on a cli project? Why is it overriding vendor-bundle.js on the console, indicating the line 609 ?

[ariovistus]

just tried using aurelia mask with aurelia-cli.

au install aurelia-mask

then in my template,

<require from="aurelia-mask"></require>

and it works for me. In the aurelia.json, it deposited this:

         {
            "name": "aurelia-mask",
            "main": "masked-input",
            "path": "../node_modules/aurelia-mask/dist",
            "resources": []
          }

[renathoaz]

@ariovistus This is the best way to laod aurelia-mask, but I don't know why when aurelia-mask is on aurelia.json and you run the app, if you open dev tools and look into console, it indicates the masker.ts and not the vendor-bundle.js, why that's happening ? is it a bug in aurelia or in aurelia-mask ? Look:

With aurelia-mask:

Without aurelia-mask:

[ariovistus]

no idea. it doesn't do that for me.

[renathoaz]

@ariovistus can you send me your example ? it would help me to figure out what's going on.

[ariovistus]

here you go: https://github.com/ariovistus/autest

[renathoaz]

@ariovistus thank you for the sample. Well I cloned the repo, and ran the example. The console log goes like this:

It still indicates masker.ts on log console when it should point to vendor-bundle.js. is it a bug? On the image above the console.log points to masker.ts on line 375 but it should point to vendor-bundle.js on its respective lines. is it happens to you on your browser ?

An update: the above behavior only happens on chrome. I tested it on firefox and it shows the vendor-bundle normally.

[ariovistus]

oh you're using chrome. Yup I get the same behavior. That would be the source mapping pointing the debugger at masker.ts. Which it probably shouldn't be doing. Could be a bug in chrome, or a bug in aurelia-cli, or a misconfiguration in my build.

[ariovistus]

I looked into this just now on a slightly different but probably equivalent example.

What is happening is my typescript build is generating .js and .js.map from the .ts. the mapping contains mappings like masked-input.ts line 1 -> masked-input.js line 11 encoded in some nasty unreadable format. the cli builder plunks my masked-input.js into vendor-bundle.js (and perhaps minifies it), and plunks masked-input.js.map into vendor-bundle.js.map verbatim, which is invalid, because line 11 of masked-input.js is actually line 6011 (or whatever) in vendor-bundle.js

What needs to happen is the cli needs to update my source maps before incorporating them into its source maps. I do not know if it is capable of doing this now, and I'm lacking proper configuration, or if it's just busted

* irl its column based, but this is for illustration