jquery.inputmask gives file not found error during rebuild of bundle

[JeroenVinke]

I'm submitting a bug report

• Library Version: 0.28.0

Please tell us about your environment:

• Operating System: OSX 10.x|Linux (distro)|Windows [7|8|8.1|10]

• Node Version: any

• NPM Version: any

Current behavior:

1. npm install jquery.inputmask jquery
2. use the following config in aurelia.json:

   
       "jquery",
       {
         "name": "jquery.inputmask",
         "main": "index.js",
         "path": "../node_modules/jquery.inputmask",
         "resources": []
       }
   

3. in app.js use import 'jquery.inputmask';
4. observe that au run --watch works fine initially, and in the browser window.Inputmask is available
5. in app.js, comment out the import line, save, and remove the comment again
6. observe the following error:

File not found or not accessible: C:/Development/aurelia-cli-instantsearch/src/inputmask.js. Requested by C:\Development\aurelia-cli-instantsearch\src\app.js
{ Error: ENOENT: no such file or directory, open 'C:\Development\aurelia-cli-instantsearch\src\inputmask.js'
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.readFileSync (fs.js:491:33)
    at Object.exports.readFileSync (C:\Development\cli\lib\file-system.js:74:13)
    at fileRead (C:\Development\cli\lib\build\bundled-source.js:101:27)
    at Object.context.fileRead (C:\Development\cli\lib\build\amodro-trace\lib\loader\Loader.js:179:18)
    at Object.context.load (C:\Development\cli\lib\build\amodro-trace\lib\loader\Loader.js:370:32)
    at Module.load (eval at <anonymous> (C:\Development\cli\lib\build\amodro-trace\lib\loader\Loader.js:14:1), <anonymous>:832:29)
    at Module.fetch (eval at <anonymous> (C:\Development\cli\lib\build\amodro-trace\lib\loader\Loader.js:14:1), <anonymous>:822:66)
    at Module.check (eval at <anonymous> (C:\Development\cli\lib\build\amodro-trace\lib\loader\Loader.js:14:1), <anonymous>:854:30)
    at Module.enable (eval at <anonymous> (C:\Development\cli\lib\build\amodro-trace\lib\loader\Loader.js:14:1), <anonymous>:1173:22)
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\Development\\aurelia-cli-instantsearch\\src\\inputmask.js' }

Expected/desired behavior:

• What is the expected behavior? it not to look for the inputmask.js (or related) file in that location

[JeroenVinke]

This appears to be happening because of the .js extension in the main property:

          {
            "name": "jquery.inputmask",
            "main": "index.js",
            "path": "../node_modules/jquery.inputmask",
            "resources": []
          }

After changing index.js to index I did not get this error anymore

[JeroenVinke]

Fyi, the above config was added to aurelia.json via au import jquery.inputmask. But I think we should add a guard for this in the bundler, not necessarily the importer

[cosmoKenney]

FYI, this is my current config in aurelia.json:

          {
            "name": "jquery.inputmask",
            "main": "index",
            "path": "../node_modules/jquery.inputmask",
            "deps": [
              "jquery"
            ],
            "exports": "$"
          }

And when I save my custom attribute where I have import 'jquery.inputmask'; I get still get the following errors when I run au run --watch, then subsequently save the file:

Starting 'writeBundles'...
Tracing resources/attributes/input-mask...
File not found or not accessible: C:/VisualStudioOnline/Sandbox/Ken/Compline.National/Compline.National.Web/src/inputmask.dependencyLib.js. Requested by C:/VisualStudioOnline/Sandbox/Ken/Compline.National/Compline.National.Web/src/resources/attributes/input-mask.js
File not found or not accessible: C:/VisualStudioOnline/Sandbox/Ken/Compline.National/Compline.National.Web/src/inputmask.js. Requested by C:/VisualStudioOnline/Sandbox/Ken/Compline.National/Compline.National.Web/src/resources/attributes/input-mask.js
File not found or not accessible: C:/VisualStudioOnline/Sandbox/Ken/Compline.National/Compline.National.Web/src/inputmask.dependencyLib.js. Requested by C:/VisualStudioOnline/Sandbox/Ken/Compline.National/Compline.National.Web/src/resources/attributes/input-mask.js
File not found or not accessible: C:/VisualStudioOnline/Sandbox/Ken/Compline.National/Compline.National.Web/src/inputmask.js. Requested by C:/VisualStudioOnline/Sandbox/Ken/Compline.National/Compline.National.Web/src/resources/attributes/input-mask.js
Writing app-bundle.js...
Finished 'writeBundles'
Starting 'reload'...
Finished 'reload'

[cosmoKenney]

I get still get the following errors when I run au run --watch, then subsequently save the file:

I just wanted to bump this as I am still seeing the bug behavior on subsequent builds. ...And I have removed the .js extension.

[JeroenVinke]

Strange. I will have another look tonight

[cosmoKenney]

I've been looking at the files in the dist and dist/inputmask folders. It looks like the jquery.inputmask.bundle.js is not an AMD module. But files in dist/inputmask are AMD.

What I'm trying to figure out know is how to load those in aurelia.json so I can get all the functionality.

It looks like dist/inputmask/jquery.inputmask.js requires dist/inputmask/inputmask.js. So I think dist/inputmask/jquery.inputmask.js should be the "main" entry. But I'm not sure how to configure this so that I bring in the dependencyLib and date, numeric, phone and regex extensions.

The dist/inputmask/inputmask.*.extensions.js files all seem to export "inputmaks.dependencyLib" and "inputmask". This is all very new and confusing to me.

[cosmoKenney]

I must be doing something wrong because I just keep getting the same errors. Here's my current config for jquery, moment (which works fine) and inputmask:

          "jquery",
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist",
            "main": "js/bootstrap.min",
            "deps": [
              "jquery"
            ],
            "exports": "$"
          },
          "moment",
          {
            "name": "jquery.inputmask",
            "main": "jquery.inputmask",
            "path": "../node_modules/jquery.inputmask/dist/inputmask",
            "deps": [
              "jquery"
            ]
          }

And my custom attribute:

import {autoinject} from "aurelia-framework"; 
import * as $ from "jquery"; 
import 'jquery.inputmask'; 

@autoinject
export class InputMaskCustomAttribute
{
	public value:string; 
	private $e:$; 

	constructor(private element:Element)
	{
		this.$e = $(this.element); 
	}

	attached()
	{
		this.$e.on("focusout", (e:any ) => 
		{
			if (this.$e.inputmask("isComplete"))
			{
				let event = document.createEvent('Event'); 
				event.initEvent('input', true, true); 
				e.target.dispatchEvent(event); 
			}
		}); 
		this.$e.inputmask(this.value); 
	}

	detached()
	{
		this.$e.off("focusout"); 
		this.$e.inputmask("remove"); 
	}
}

Any idea where there is a complete reference for the aurelia.json file? It looks like the dependencies section is an abstraction that writes your loader config for you? I've tried looking at the RequireJS docs, but their configs look noting like the dependencies section.

[JeroenVinke]

@cosmoKenney mind if I send you a private message on Gitter?

[cosmoKenney]

Sure

[JeroenVinke]

@cosmoKenney as soon as you finished trying out the configuration we found together, could you let me know so I can convert this issue into a documentation related issue?

[VagyokC4]

Is there any update on this? I'd like to use this control with Aurelia, and while I have it partially working, I'd like to take advantage of the alias:phone and alias:email which appear to require loading other resources along with the main resource. Do we have an Aurelia Attribute example?

[JeroenVinke]

@VagyokC4 could you provide more info, what setup you use, which resources it tries to load etc?