Error loading / loading Bootstrap v4 in Aurelia

Question

I have the following in my aurelia.json file, the rest is what you usually find. I copied it directly from the reference implementation, and as you expect it to work fine.

 { 'build': { 'bundles': [ 'name': 'vendor-bundle.js' 'dependencies': [ "jquery", { "name": "bootstrap", "path": "../node_modules/bootstrap/dist", "main": "js/bootstrap.min", "deps": ["jquery"], "exports": "$", "resources": [ "css/bootstrap.css" ] } ] ] } } 

However, I am trying to upgrade to Bootstrap 4 and it just doesn't work. To upgrade the package, I tried changing build.bundles.dependencies[].path to ../jspm_packages/github/twbs/ bootstrap@4.0.0-beta , as well as ../node_modules/bootstrap-v4-dev/dist , but it doesn’t changes the error code or does not make the error manifest smaller. I also tried copying v4 files to the dist folder for v3, which also causes the same problem.

The assembly is always clean; an error occurs at runtime:

 DEBUG [templating] importing resources for app.html Uncaught TypeError: plugin.load is not a function Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css 

EDIT:

Thanks to Ashley Grant's answer, I updated Bootstrap via NPM, aurelia.json any changes to aurelia.json . The error remains unchanged, which, apparently, indicates an error, if not for the fact that other people successfully completed this migration without errors, using the same chain of tools.

EDIT2:

I created the steps to reproduce the error:

 $ au new name # can be any valid value 2 # Selects TypeScript as the language 1 # Create project structure 1 # Install dependencies 

cd to the project directory.

Add the two entries listed above to build.bundles[1].dependencies in aurelia_project/aurelia.json

 $ npm install jquery --save $ npm install bootstrap@ ^4.0.0-beta --save 

Change src/app.html to the following:

 <template> <require from="bootstrap/css/bootstrap.css"></require> </template> 

Finally, do one of the following and navigate to the provided URL.

 $ au run 

OR

 $ au build $ serve 

This gives the errors described in both Google Chrome Version 55.0.2883.87 (64-bit) and Mozilla Firefox 55.0.3 on my Arch Linux systems. I have not yet had the opportunity to test it on other systems.

Edit3:

Thanks @vidriduch everything works. However, if you look at the console, you will find the following:

 Uncaught SyntaxError: Unexpected token export vendor-bundle.js:3927Uncaught Error: Mismatched anonymous define() module: [entirety of vendor-bundle.js printed here] 

These are the first two messages when the page loads in debug mode, but no other errors occur.

Answer 1

You are missing the popper.js dependency for Bootstrap 4.0.0-beta. For Aurelia to agree to this, add

  "node_modules/popper.js/dist/umd/popper.js" 

on top (according to a comment from @hxtk) of the preend aurelia.json part (assuming you are using RequireJS, otherwise look at the webpack dependency binding for Bootstrap https://getbootstrap.com/docs/4.0/getting-started/webpack/ )

Just note that the version of popper.js you need to install is 1.11.0 ( https://github.com/twbs/bootstrap/issues/23381 ), so

 npm install popper.js@1.11.0 

or

 yarn add popper.js@1.11.0 

and it should work :)

Answer 2

Your aurelia.json configuration aurelia.json correct. I'm going to guess that you never ran npm install bootstrap@ ^4.0.0-beta --save , since you mention that you are copying files to the node_modules version, and NPM does not use versioned files like JSPM.

So run npm install bootstrap@ ^4.0.0-beta --save and everything should start. I have your exact configuration working in an application for one of my clients.