Adding a Dependency on a CSS only npm modules fails

[benlaan]

I'm submitting a bug report

• Library Version:
  0.17.0

Please tell us about your environment:

• Operating System:
  Windows 10
• Node Version:
  4.2.4
• NPM Version:
  3.10.5
• Browser:
  Chrome
• Language:
  TypeScript 1.5.3

Current behavior:
Adding a dependency on font-awesome (CSS only) from npm fails:

      {
        "name": "font-awesome",
        "path": "../node_modules/font-awesome",
        "resources": [
          "css/font-awesome.min.css"
        ]
      },

At build time:

..
Tracing font-awesome...
error D:\dev\aurelia\app\node_modules\font-awesome.js

At runtime:

vendor-bundle.js:3661 Uncaught Error: Mismatched anonymous define() module:

Expected/desired behavior:

Should allow CSS file to be required successfully.
Should not throw error above
Should generate CSS resource correctly into app-bundle.js

[The1nternet]

I can confirm this issue. I cannot see a way to use the font-awesome npm package with the cli at the moment...

[icegnome]

+1

[arabsight]

you can bundle the css, this works for me:

{
    "name": "font-awesome",
     "path": "../node_modules/font-awesome/css",
    "resources": ["font-awesome.css"]
}

then require it:

<require from="font-awesome/font-awesome.css"></require>

this way font-awesome is looking for the fonts at '/fonts/fontawesome-webfont.woff2?v=4.6.3 ... '
so just copy the fonts folder to the root dir or create a task to do that for you.

[napalm684]

I attempted this with purecss and get an error that build.js is missing.

{
    "name": "purecss",
    "path": "../node_modules/purecss/build",
    "resources": [
        "pure-min.css"
    ]
}

Tracing purecss...
error C:\development\Blah\Client\node_modules\purecss\build.js

[khenderick]

@arabsight, your suggestion yields on my environment the following error during build:

Tracing font-awesome...
error /home/kenneth/source/.../frontend/node_modules/font-awesome/css.js

[arabsight]

@khenderick Yep, It does work though. Its just a workaround till some fix is provided by the CLI.

here's another solution without errors:

{
    "name": "font-awesome",
    "path": "../node_modules/font-awesome/css",
    "main": "font-awesome.css"
}

<require from="font-awesome.css"></require>

[JayDi85]

You can read about how-to add font-awesome support to aurelia project from that post in stack overflow: http://stackoverflow.com/questions/39271458/how-can-i-add-font-awesome-to-my-aurelia-project-using-npm/39544587#39544587

[EisenbergEffect]

This should now be fixed.

[benlaan]

@EisenbergEffect that's great. Is there a commit for that fix? Or some documentation, etc?

[EisenbergEffect]

There is. I can't remember...it was about a month back I think.

[avrahamcool]

I created a new project using cli 0.23.0 and i tried this configuration:

{
    "name": "font-awesome",
    "path": "../node_modules/font-awesome/css",
    "main": "font-awesome.css"
}

<require from="font-awesome.css"></require>

and it's failing at runtime, because the css try to load the font files, and they are missing. [the cli didn't bundle them]

[ChiefZ]

I didn't try to use the css file as the main entry, maybe try to use
<require from="font-awesome/font-awesome.css"></require>

I think aurelia-cli emits only a warning if the main is not found, when using the aurelia_project entry like:

{
	"name": "dist/font-awesome",
	"path": "../node_modules/font-awesome/",
	"main": "",
	"resources": [
	  "css/font-awesome.min.css"
	]
},

That works fine for me (I added a task for other resources like the fonts too, there is an example in another git issue)

[JayDi85]

@avrahamcool , you can bundle font awesome manually: http://stackoverflow.com/a/39544587/1276632

[szogun1987]

Today (08/06/2017) I had this issue for material-elevation. Trick with empty main field stops to work.

{
  "name": "material-elevation",
  "path": "../node_modules/@material/elevation/",
  "main": "",
  "resources": [ "dist/mdc.elevation.css" ] 
}

Error message:

EXEC : error D: \Projekty\Aurelia-Experiment\dotnet-and-aurelia\node_modules\@material\elevation\.js [D:\Projekty\Aureli
a-Experiment\dotnet-and-aurelia\dotnet-and-aurelia.csproj]

I run au build as pre-build task in mine .Net Core project. Version of aurelia framework: aurelia-framework@1.1.4

[hozn]

@EisenbergEffect can we reopen this? This does not appear to be fixed. The empty "main" attr does not work anymore, as noted by @szogun1987 . Also errs out during build for me -- trying to include "select2-bootstrap-theme" package:

aurelia.json:

{
            "name": "select2-bootstrap-theme",
            "path": "../node_modules/select2-bootstrap-theme/dist",
            "main": "",
            "deps": ["select2"],
            "resources": [
              "select2-bootstrap.min.css"
            ]
},

(Tried with and without "main": "" line.)

Error during build:

error /Users/hans/workspace/sample-project/node_modules/select2-bootstrap-theme/dist.js

[zewa666]

Have you tried it with main:false?

[hozn]

@zewa666 , thanks for the tip; "main": false does seem to work! -- Was that documented somewhere that I missed?

[zewa666]

@hozn over at the docs in build-systems-->aurelia-cli-->adding-client-libraries-to-your-project-->a commonjs package.

You might want to document this with a simple example over at our discourse forum

[hozn]

@zewa666 , thanks for the link (and help). Sorry I missed that!