Error when using material-design-iconic-font with new CLI/require

[cluka]

I'm submitting a bug report

• Library Version:
  ^1.0.0-beta.1

Please tell us about your environment:

• Operating System:
  Windows [10]

• Node Version:
  10.10.0

• NPM Version:
  6.4.1

• Browser:
  all

• Language:
  TypeScript 3.0.1

• Loader/bundler:
  RequireJS

Current behavior:
au start displays an error when it tries to bundle material-design-iconic-font

• What is the expected behavior?
  The application should start without error

Reproduce:

1. npm install aurelia-cli -g
2. au new
3. ... selected custom bundler then selected RequireJS
4. restored packages with yarn
5. yarn add material-design-iconic-font
6. Add
   "copyFiles":{ "node_modules/material-design-iconic-font/dist/fonts/*":"material-design-iconic-font/dist/fonts" }, into aurelia.json after "bundles"
7. Add
   <require from="material-design-iconic-font/dist/css/material-design-iconic-font.min.css"></require>
   into app.html
8. au run

Error is in the image

• What is the motivation / use case for changing the behavior?

[zewa666]

@huochunpeng the main of the package is an array. Never seen that

[cluka]

Ok.
So it's all ok with my registration of the font in Aurelia bundler?
And this font does work without problem in Aurelia webpack

[zewa666]

@cluka actually no idea, but thats what I'd guess. Just mentioned that I wasn't aware you could use an array for main, so perhaps this is causing the new aurelia auto-tracer to choke

[cluka]

Maybe, I see that there are multiple pull request on it's github that fixes the main that should be string and to move the array to files.

[3cp]

There are two issues here.

1. strange main. They definitely didn't follow spec https://docs.npmjs.com/files/package.json#main
   This is not a bug for us to fix, it's one for them.

This issue can be fixed with an explicit config

"dependencies": [
  //...
  {
    "name": "material-design-iconic-font",
    "path": "../node_modules/material-design-iconic-font",
    "main": "dist/css/material-design-iconic-font.min.css"
  }
]

For that reason, this issue can be closed.

2. I saw you updated your post to use <require from="some.css"></require>. cli+requirejs has never supported import "some.css" in js file, our cli+webpack supports it with style-loader plugin.

I think it could be a good improvement to cli+requirejs to support import "some.css", so people can easily migrate their code from webpack app to requirejs app. I will keep it on my todo list.

[3cp]

I will make cli more resilient in this situation, instead of panic, I can ignore the malformed main. You will see a missing main warning, but css import will still work.

[3cp]

The fix means you don't need explicit config in aurelia.json.

[cluka]

@huochunpeng Damn you're fast :-). Thanks man.
About the import edit, yes i did replace it with require, as it was like you thought, I moved from webpack.

I think it could be a good improvement to cli+requirejs to support import "some.css", so people can easily migrate their code from webpack app to requirejs app.

It's fine for me, now that i know how to import them.

[3cp]

Congratulations for migrating from webpack to cli bundler!

It will take some time to heal your trauma, you might still wake up in nightmare in next few weeks.
Deep breathe, brother, Deep breathe... it was all over now.
🤣

[cluka]

Lol

…

On Fri, Oct 12, 2018, 09:51 huochunpeng ***@***.***> wrote: Congratulations for migrating from webpack to cli bundler! It will take some time to heal your trauma, you might still wake up in nightmare in next few weeks. Deep breathe, brother, Deep breathe... it was all over now. 🤣 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#934 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvhiP4j4evuOt9qYv8cYdTfir0UOcbWks5ukEnrgaJpZM4XXdUb> .