Bootstrap error on contact manager tutorial

geomorillo · March 16, 2018, 11:46pm

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';

Alexander-Taran · March 16, 2018, 11:54pm

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.

geomorillo · March 17, 2018, 12:12am

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

Alexander-Taran · March 17, 2018, 12:21am

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 (-:

geomorillo · March 17, 2018, 12:24am

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' }

Alexander-Taran · March 17, 2018, 12:26am

npm --version please
and node -v

and the steps chosen for au new

geomorillo · March 17, 2018, 12:27am

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

geomorillo · March 17, 2018, 12:29am

node version v6.11.1

Alexander-Taran · March 17, 2018, 12:31am

@types/webpack - npm seems to be there…

geomorillo · March 17, 2018, 12:39am

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

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

Alexander-Taran · March 17, 2018, 12:39am

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

geomorillo · March 17, 2018, 12:40am

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

Alexander-Taran · March 17, 2018, 12:41am

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

geomorillo · March 17, 2018, 12:46am

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

geomorillo · March 17, 2018, 12:48am

well that sucks lol any workaround?

Alexander-Taran · March 17, 2018, 12:48am

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

geomorillo · March 17, 2018, 12:54am

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

geomorillo · March 17, 2018, 12:59am

github.com

aurelia/cli/blob/master/lib/dependencies.json

{
  "@types/jasmine": "^2.8.6",
  "@types/jest": "^22.2.0",
  "@types/lodash": "^4.14.105",
  "@types/node": "^9.4.7",
  "@types/webpack": "^4.1.1",
  "aspnet-webpack": "^2.0.3",
  "aurelia-animator-css": "^1.0.4",
  "aurelia-bootstrapper": "^2.2.0",
  "aurelia-cli": "^0.33.0",
  "aurelia-loader-nodejs": "^1.0.1",
  "aurelia-pal-nodejs": "^1.0.0-beta.3.2.0",
  "aurelia-protractor-plugin": "^1.0.6",
  "aurelia-testing": "^1.0.0-beta.4.0.0",
  "aurelia-tools": "^2.0.0",
  "aurelia-webpack-plugin": "^3.0.0-rc.1",
  "aurelia-polyfills": "^1.3.0",
  "autoprefixer": "^8.1.0",
  "babel-core": "^6.26.0",
  "babel-eslint": "^8.2.2",

This file has been truncated. show original

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

Alexander-Taran · March 17, 2018, 12:59am

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 (-:

geomorillo · March 17, 2018, 1:01am

well thanks should wait for a fix then

Topic		Replies	Views
Bug in the 'Contact Manager' tutorial when using Typescript Site Feedback	1	870	July 3, 2018
Error on Contact Manager tutorial	4	873	November 19, 2017
Contact Manager Tutorial webpack WARNING in Conflict Help Requests	9	1471	June 29, 2021
Issue with CLI-bundler when overriding bootstrap styles (using SASS) Help Requests	22	886	April 15, 2021
URGENT@ Aurelia with webpack Help Requests	3	999	February 15, 2018

Bootstrap error on contact manager tutorial

Related Topics