Bootstrap error on contact manager tutorial

After following the contact-manager tutorial i could not progress ultil the import point:

To get Bootstrap setup, we begin by installing the library itself with NPM. Execute the following on the command line to do this:
 
Shell


  npm install bootstrap --save
  

Next, we need to import it in our main.ts by adding the following line to the top of the file:
 
JavaScript


  import 'bootstrap/dist/css/bootstrap.css';

I get this error:
Error: Script error for “bootstrap/dist/css/bootstrap.css”, needed by: main
http://requirejs.org/docs/errors.html#scripterror
Stack trace:
Error: Script error for “bootstrap/dist/css/bootstrap.css”, needed by: main
http://requirejs.org/docs/errors.html#scripterror
makeError@http://localhost:9000/scripts/vendor-bundle.js:3956:17
onScriptError@http://localhost:9000/scripts/vendor-bundle.js:5526:36
From previous event:
DefaultLoader.prototype.loadModule@http://localhost:9000/scripts/vendor-bundle.js:13896:14
config@http://localhost:9000/scripts/vendor-bundle.js:11668:14
bootstrap/p<@http://localhost:9000/scripts/vendor-bundle.js:11704:14
From previous event:
bootstrap@http://localhost:9000/scripts/vendor-bundle.js:11703:13
run/<@http://localhost:9000/scripts/vendor-bundle.js:11690:9
From previous event:
run@http://localhost:9000/scripts/vendor-bundle.js:11685:12
@http://localhost:9000/scripts/vendor-bundle.js:11710:37
execCb@http://localhost:9000/scripts/vendor-bundle.js:5484:24
check@http://localhost:9000/scripts/vendor-bundle.js:4671:43
enable@http://localhost:9000/scripts/vendor-bundle.js:4964:17
enable@http://localhost:9000/scripts/vendor-bundle.js:5345:21
enable/<@http://localhost:9000/scripts/vendor-bundle.js:4949:25
bind/<@http://localhost:9000/scripts/vendor-bundle.js:3922:20
each@http://localhost:9000/scripts/vendor-bundle.js:3847:31
enable@http://localhost:9000/scripts/vendor-bundle.js:4901:17
init@http://localhost:9000/scripts/vendor-bundle.js:4576:21
localRequire/<@http://localhost:9000/scripts/vendor-bundle.js:5248:25
vendor-bundle.js:3414:16
Ha fallado la carga del con origen “http://localhost:9000/src/bootstrap/dist/css/bootstrap.css.js”.

What CLI version you have if using CLI?
Otherwise where does the error come from?

also… bootstrap recently bumped the version. check in node_modules where the referenced css file is.
you might need to change the path.

for a more rapid Q&A session
join gitter channel https://gitter.im/aurelia/Discuss
If you want to trace this now with me.

the error comes from firefox’s console i will try to update the cli to see if that works

If you created that project with cli… try that.
Let me know how it goes.
I’ll check up tomorrow
If problem persists, please write down the answers for au new command you chose
And I’ll have a go at trying to reproduce your issue tomorrow.

May my virtual presence resolve the issue for you (-:

after updating first npm and the cli to latest version i got this error when doing au new on the cli console

Installing project dependencies.
Uncaught promise rejection:act: http fetch GET 404 https://registry.npmjs.org/@
{ Error: 404 Not Found: @types/webpack@^4.1.1
    at fetch.then.res (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\pacote\lib\fetchers\registry\fetch.js:42:19)
    at tryCatcher (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\promise.js:693:18)
    at Async._drainQueue (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\async.js:133:16)
    at Async._drainQueues (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\async.js:143:10)
    at Immediate.Async.drainQueues (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\async.js:17:14)
    at runCallback (timers.js:672:20)
    at tryOnImmediate (timers.js:645:5)
    at processImmediate [as _immediateCallback] (timers.js:617:5)
  cause:
   { Error: 404 Not Found: @types/webpack@^4.1.1
       at fetch.then.res (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\pacote\lib\fetchers\registry\fetch.js:42:19)
       at tryCatcher (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\util.js:16:23)
       at Promise._settlePromiseFromHandler (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\promise.js:512:31)
       at Promise._settlePromise (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\promise.js:569:18)
       at Promise._settlePromise0 (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\promise.js:614:10)
       at Promise._settlePromises (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\promise.js:693:18)
       at Async._drainQueue (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\async.js:133:16)       at Async._drainQueues (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\async.js:143:10)
       at Immediate.Async.drainQueues (C:\Users\geomorillo\AppData\Roaming\npm\node_modules\aurelia-cli\node_modules\npm\node_modules\bluebird\js\release\async.js:17:14)
       at runCallback (timers.js:672:20)
       at tryOnImmediate (timers.js:645:5)
       at processImmediate [as _immediateCallback] (timers.js:617:5)
     code: 'E404',
     uri: 'https://registry.npmjs.org/@types/webpack/-/webpack-4.1.1.tgz',
     response:
      Response {
        body: [Object],
        size: 0,
        timeout: 0,
        url: 'https://registry.npmjs.org/@types/webpack/-/webpack-4.1.1.tgz',
        status: 404,
        statusText: 'Not Found',
        headers: Headers {} },
     spec:
      { type: 'range',
        registry: true,
        where: undefined,
        raw: '@types/webpack@^4.1.1',
        name: '@types/webpack',
        escapedName: '@types%2fwebpack',
        scope: '@types',
        rawSpec: '^4.1.1',
        saveSpec: null,
        fetchSpec: '^4.1.1',
        gitRange: undefined,
        gitCommittish: undefined,
        hosted: undefined } },
  code: 'E404',
  uri: 'https://registry.npmjs.org/@types/webpack/-/webpack-4.1.1.tgz',
  response:
   Response {
     body:
      Transform {
        _readableState: [Object],
        readable: true,
        domain: null,
        _events: [Object],
        _eventsCount: 2,
        _maxListeners: undefined,
        _writableState: [Object],
        writable: false,
        allowHalfOpen: true,
        _transformState: [Object],
        _transform: [Function: transform] },
     size: 0,
     timeout: 0,
     url: 'https://registry.npmjs.org/@types/webpack/-/webpack-4.1.1.tgz',
     status: 404,
     statusText: 'Not Found',
     headers: Headers {} },
  spec:
   { type: 'range',
     registry: true,
     where: undefined,
     raw: '@types/webpack@^4.1.1',
     name: '@types/webpack',
     escapedName: '@types%2fwebpack',
     scope: '@types',
     rawSpec: '^4.1.1',
     saveSpec: null,
     fetchSpec: '^4.1.1',
     gitRange: undefined,
     gitCommittish: undefined,
     hosted: undefined },
  parent: 'contact-manager' }

npm --version please
and node -v

and the steps chosen for au new

version >>>>>>>>>> 5.7.1

node version v6.11.1

https://www.npmjs.com/package/@types/webpack seems to be there…

[aurelia-app]> contact-manager
Default TypeScript
Would you like to create this project?

  1. Yes (Default)

Name: contact-manager
Platform: Web
Bundler: Webpack
Loader: None
Transpiler: TypeScript
Markup Processor: Minimal Minification
CSS Processor: None
Unit Test Runner: Jest
Unit Test Runner: Karma
Integration Test Runner: None
Editor: Visual Studio Code

also… CLI produces
@types/webpack”: “^3.0.4” as dev-dependency
how come your setup is trying to download 4.1.1 ?

latest version is 4.1.1 i dont know why this is happening just following the tutorial step by step

Ok. That’s strange…
I updated cli as well…
ok I had old verion in path… checking again with definitely .33 (-:
with yarn available though… might get different results.

Yeah got same result with @types/webpack…
might be a problem with npmjs repo I think

https://github.com/yarnpkg/yarn/issues/5530 maybe this is related?

well :sob: that sucks lol any workaround?

Same goes for npm.
for me au switched to npm after yarn failed with same result.

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/24347 well seems like a bug to me


shows “@types/webpack”: “^4.1.1”,

Yeah… Nothing you can do to fix that
but… you can remove @types/webpack from devDependencies and npm -i or yarn and go on (-:

I’ll check up on you in the morning (-:

well thanks should wait for a fix then :sweat_smile: