I have some problems when use bootstrap 4 and font awesome with Aurelia CLI.
I created a webpack based project and added the following vendors
vendor: [
'bluebird',
'jquery',
'bootstrap/dist/js/bootstrap.bundle', // If you define bundle, you dont need `popper.js`
'bootstrap/dist/css/bootstrap-reboot.css',
'bootstrap/dist/css/bootstrap.css',
'font-awesome/css/font-awesome.css',
],
this is the configuration for expose-loader and jQuery
{ test: /[\/\\]node_modules[\/\\]jquery[\/\\].+\.js$/, loader: 'expose-loader?$!expose-loader?jQuery' },
and in ProvidePlugin
new ProvidePlugin({
'Promise': 'bluebird',
'jQuery': 'jquery',
'$': 'jquery'
}),
after these I executed au run so you can see the errors
ERROR in multi bluebird jquery bootstrap/dist/js/bootstrap.bundle bootstrap/dist/css/bootstrap-reboot.css bootstrap/dist/css/bootstrap.css font-awesome/css/font-awesome.css
Module not found: Error: Can't resolve 'jquery' in 'C:\Users\...\Desktop\Aurelia-CLI-Webpack-Problem-master'
@ multi bluebird jquery bootstrap/dist/js/bootstrap.bundle bootstrap/dist/css/bootstrap-reboot.css bootstrap/dist/css/bootstrap.css font-awesome/css/font-awesome.css
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.bundle.js
Module not found: Error: Can't resolve 'jquery' in 'C:\Users\...\Desktop\Aurelia-CLI-Webpack-Problem-master\node_modules\bootstrap\dist\js'
@ ./node_modules/bootstrap/dist/js/bootstrap.bundle.js 7:81-98
@ multi bluebird jquery bootstrap/dist/js/bootstrap.bundle bootstrap/dist/css/bootstrap-reboot.css bootstrap/dist/css/bootstrap.css font-awesome/css/font-awesome.css
ERROR in ./node_modules/bootstrap/dist/css/bootstrap-reboot.css
Module parse failed: C:\Users\...\Desktop\Aurelia-CLI-Webpack-Problem-master\node_modules\bootstrap\dist\css\bootstrap-reboot.css Unexpected token (8:0)
You may need an appropriate loader to handle this file type.
| * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
| */
| *,
| *::before,
| *::after {
@ multi bluebird jquery bootstrap/dist/js/bootstrap.bundle bootstrap/dist/css/bootstrap-reboot.css bootstrap/dist/css/bootstrap.css font-awesome/css/font-awesome.css
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module parse failed: C:\Users\...\Desktop\Aurelia-CLI-Webpack-Problem-master\node_modules\bootstrap\dist\css\bootstrap.css Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
| */
| :root {
| --blue: #007bff;
| --indigo: #6610f2;
@ multi bluebird jquery bootstrap/dist/js/bootstrap.bundle bootstrap/dist/css/bootstrap-reboot.css bootstrap/dist/css/bootstrap.css font-awesome/css/font-awesome.css
ERROR in ./node_modules/font-awesome/css/font-awesome.css
Module parse failed: C:\Users\...\Desktop\Aurelia-CLI-Webpack-Problem-master\node_modules\font-awesome\css\font-awesome.css Unexpected character '@' (7:0)
You may need an appropriate loader to handle this file type.
| /* FONT PATH
| * -------------------------- */
| @font-face {
| font-family: 'FontAwesome';
| src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
@ multi bluebird jquery bootstrap/dist/js/bootstrap.bundle bootstrap/dist/css/bootstrap-reboot.css bootstrap/dist/css/bootstrap.css font-awesome/css/font-awesome.css
You can download the sample here
I did the same thing (without font-awesome) in my project just the other day, here’s what I put in my vendor,
vendor: [
'whatwg-fetch',
'jquery',
'bootstrap',
'bootstrap/dist/css/bootstrap.css'
]
and in plugins I have
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
Hopefully it helps.
Once fully resolved, his would be a good contribution to Tips and Tricks collection - a part of the AUCS projects
1 Like
@veccsolutions
It seems that both of us are the same settings. Has anyone a solution? Is there a problem with Aurelia CLI?
Did you au install jquery?
Also seems a loader for eot files is not setup
Did you au install jquery?
The command no, I am working on webpack.
Error: This command is only available for the Aurelia CLI Bundler
Also seems a loader for eot files is not setup
Do you know how to fix it? I uploaded the sample on git . If you have time please check it.
Then npm install jQuery --save
1 Like
@MaximBalaganskiy
The main problem comes from CSS Files, Do you have a solution? Seems the problem comes from some tokens : and @ in CSS files.
ERROR in ./node_modules/bootstrap/dist/css/bootstrap-reboot.css
Module parse failed: C:\Users\...\Desktop\a\node_modules\bootstrap\dist\css\bootstrap-reboot.css Unexpected token (8:0)
You may need an appropriate loader to handle this file type.
| * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
| */
| *,
| *::before,
| *::after {
@ multi (webpack)-dev-server/client?http://localhost:8080 bluebird jquery bootstrap/dist/js/bootstrap.bundle bootstrap/dist/css/bootstrap-reboot.css bootstrap/dist/css/bootstrap.css font-awesome/css/
font-awesome.css
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module parse failed: C:\Users\...\Desktop\a\node_modules\bootstrap\dist\css\bootstrap.css Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
| */
| :root {
| --blue: #007bff;
| --indigo: #6610f2;
@ multi (webpack)-dev-server/client?http://localhost:8080 bluebird jquery bootstrap/dist/js/bootstrap.bundle bootstrap/dist/css/bootstrap-reboot.css bootstrap/dist/css/bootstrap.css font-awesome/css/
font-awesome.css
ERROR in ./node_modules/font-awesome/css/font-awesome.css
Module parse failed: C:\Users\...\Desktop\a\node_modules\font-awesome\css\font-awesome.css Unexpected character '@' (7:0)
You may need an appropriate loader to handle this file type.
| /* FONT PATH
| * -------------------------- */
| @font-face {
| font-family: 'FontAwesome';
| src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
@ multi (webpack)-dev-server/client?http://localhost:8080 bluebird jquery bootstrap/dist/js/bootstrap.bundle bootstrap/dist/css/bootstrap-reboot.css bootstrap/dist/css/bootstrap.css font-awesome/css/
font-awesome.css
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs 1.05 kB {0} [built]
[1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Failed to compile.
I think what happens is you include CSS in the bundle directly. The CSS rule sees that the issuer is not html and applies style-loader additionally, which then incorrectly parses CSS as a JS module, hence the syntax error. I suggest you reread on using bootstrap with webpack. I bet if you remove CSS from vendor config it will work. In my opinion, ‘au new’ offers not the best webpack config, where you have to manually pick your vendor modules.
I’ll be able to have a look at your repo tomorrow - 11pm here
1 Like
Ok, Thanks.
It would be great if you check it.
Aurelia-toolbelt works with fusebox perfectly but it should work with webpack and require.js too. In first step, we have problem with webpack as you see.
Can I just ask?
Is there an advantage to using fusebox? Is it easier than webpack?
I use the aurelia-cli/require and haven’t really had any major problems. I can usually find an answer to any issue by googling.
Every time I’ve looked at webpack I just give up - it seems so much work!
2 Likes
@jeremyholt
Based on awesome work by Mr @vegarringdal you can use Fusebox and Aurelia with this skeleton-plugin-typescript together.
We use that because
- Less configuration
- Great Typescript type checker (made by Mr @vegarringdal )
- Blazing fast bundler/module loader
I advise you to try it. The entire AureliaToolbelt project is based on the above skeleton.
@HamedFathi just as I suspected, it’s the explicit CSS in vendor bundle which causes this. Once you remove it, webpack bundles just fine.
Again, I don’t believe CLI produces the best webpack config exactly for this reason - manual splitting. Have a look at my PR to the repository of yours to see how to setup webpack correctly.
1 Like
BTW, you mentioned that toolbelt is using fusebox… could you please explain why? In my organisation we have a proprietary plugin written in TS and it’s completely bundler agnostic - just produces transpiled JS and typings to a dist folder.
In the projects you can then use any bundler you wish.
3 Likes
I don’t think fusebox is ideal for writing plugins, all you can do is transpile your code to commonjs it doesn’t support amd or system, plus plugins don’t need to be bundled.
FuseBox is cool because it is fast but it doesn’t help aurelia devs much, if you want to do code splitting you need Quantum which is not supported with aurelia due to its dynamic nature (module ids and loaders issue again).
1 Like
@jeremyholt, @MaximBalaganskiy, @veccsolutions
I just want to clarify sth, we are NOT using fusebox to write the toolbelt, we are using fusebox to bundle the modules for the sample and docs you see on the demo page. That, and the fact that at the time we started writing the toolbelt we did not know the knots and bolts of major bundlers, we preferred to work with one which has fewer problems than others and is more straightforward, and the skeleton provided by @vegarringdal paved the way.
Moreover, even now, that we know how to configure the basics of webpack or AureliaCLI/requireJS we confront serious obstacles, they are for sure due to lack of my understanding or knowledge around those bundlers:
-
With webpack configuration provided in aspnet core spa templates the jquery was undefined when we are using some specific components such as bootstrap-toggle2 or tokenize, removing them all is good, weird to me 
thus, I added jquery as a static-or-CDN-base resource in my index.html, and all problems solved. check here and here and here.
-
Using webpack configuration provided by CLI we even face more problems, that @MaximBalaganskiy and @HamedFathi worked on that for a day I guess, am not sure at the moment whether they succeed or not, when I replaced the configuration of CSS loaders with the one provided in spa templates we face no error but the CSS does not get into the bundles. Do I need to add all of them as static CSS resources too? 
-
The same story happens when using AU/CLI and requireJS, there are a lot of javascript files that the bundler just ignores them, and I have no idea why that happens, take a look at here.
-
In requireJS, we have to import CSS files like this
import 'text!some_path_to_css_files/file.css';
for webpack:
import 'some_path_to_css_files/file.css';
put aside that @noView() and @viewResources do not load nprogress CSS files into the bundle and I have to use the import syntax. When using webpack.
Still, I have some more complicated issues, I don’t know how to explain.
Our main concern is only around providing a basic configuration for the Aurelia community to use the toolbelt as easy as possible. Like what @zewa666 requested and what we have done for webpack config.
To conclude, having starter kits can help people to better config their developing environment, that’s why we are trying to create some here.
I think asp.net core starter kit is ready to work with.
Regards,
Shahab
@arabsight, you are right, and I explained here
I just want to clarify sth, we are NOT using fusebox to write the toolbelt, we are using fusebox to bundle the modules for the sample and docs you see on the demo page
got it, and good luck with the issues.
1 Like
Not quite. Webpack configuration is not optimal there - your app and vendor bundles will have different module types in them - native and commonjs, which will prevent reusability and bloat app bundle. You are better off with the weback config from aforementioned repo+my PR.
1 Like
