webpack error in chapter10/auction/client

[mthierba]

Hi, I'm getting this error on npm start:

ERROR in ./~/bootstrap/dist/css/bootstrap.min.css
Module parse failed: F:\src\angular2typescript\chapter10\auction\client\node_modules\bootstrap\dist\css\bootstrap.min.css Unexpected token (5:83)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:83)
    at Parser.pp.raise (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:920:13)
    at Parser.pp.unexpected (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:1483:8)
    at Parser.pp.semicolon (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:1462:73)
    at Parser.pp.parseExpressionStatement (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:1976:8)
    at Parser.pp.parseStatement (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:1754:188)
    at Parser.pp.parseTopLevel (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:1648:21)
    at Parser.parse (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:1616:17)
    at Object.parse (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:882:44)
    at Parser.parse (F:\src\angular2typescript\chapter10\auction\client\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (F:\src\angular2typescript\chapter10\auction\client\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (F:\src\angular2typescript\chapter10\auction\client\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (F:\src\angular2typescript\chapter10\auction\client\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at F:\src\angular2typescript\chapter10\auction\client\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (F:\src\angular2typescript\chapter10\auction\client\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at F:\src\angular2typescript\chapter10\auction\client\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3)
 @ ./src/vendor.ts 13:0-47

I've already tried various things that people suggested for similar situations, but to no avail so far. Could you kindly check if this needs a fix in the config?

Many thanks, Mathias

[antonmoiseev]

Just tried to run it on my machine, works fine. Let's try two things in order to fix the issue.

Option 1

Make sure you have a clean fresh copy of the bootstrap library and all the tools involved in processing CSS.

1. Open the chapter10/auction/clientdirectory in the command line:

   $ cd chapter10/auction/client

2. Run the following git command to remove all the 3rd-party packages and the generated code:

   $ git clean -fdx

3. Run npm install to install fresh copies of all dependencies.
4. Run npm start to launch the app.

Option 2

You can also try replacing line 15 in the vendor.ts file with the following one:

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

Note, here we import unminified version of the bootstrap.css file. In the production build it will be minified anyway.

Please let us know if you still experience this issue.

[mthierba]

I've tried both options, but didn't get any further, I'm afraid.

Option 1 (fresh install) gives me the exact same error I have quoted above.

Option 2 (changing to unminified version of bootstrap.css) is incidentally something I had already tried before, and this only gives a slightly different version of the error above. For reference:

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module parse failed: F:\src\angular2typescript\chapter10\auction\client\node_modules\bootstrap\dist\css\bootstrap.css Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:5)
    at Parser.pp.raise (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:920:13)
    at Parser.pp.unexpected (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:1483:8)
    at Parser.pp.semicolon (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:1462:73)
    at Parser.pp.parseExpressionStatement (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:1976:8)
    at Parser.pp.parseStatement (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:1754:188)
    at Parser.pp.parseTopLevel (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:1648:21)
    at Parser.parse (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:1616:17)
    at Object.parse (F:\src\angular2typescript\chapter10\auction\client\node_modules\acorn\dist\acorn.js:882:44)
    at Parser.parse (F:\src\angular2typescript\chapter10\auction\client\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (F:\src\angular2typescript\chapter10\auction\client\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (F:\src\angular2typescript\chapter10\auction\client\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (F:\src\angular2typescript\chapter10\auction\client\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at F:\src\angular2typescript\chapter10\auction\client\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (F:\src\angular2typescript\chapter10\auction\client\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at F:\src\angular2typescript\chapter10\auction\client\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)
 @ ./src/vendor.ts 13:0-43

Just to be extra-safe, I also upgraded my local node installation from 5.5 to 6.2, with exactly the same outcomes.

I've run through the same process on an entirely different machine, where I had never checked out the repo before, and got the exact same errors. Hence, this absolutely seems to be reproducible for me.

[dkataiev]

Hi. I'm getting the same problem. I tried both solutions, but nothing helps. :(

[catull]

I do not have a problem with bootstrap at all, but I ran into 3 issues in the same directory.

I have a clean clone of the code checked out.

When I run npm run build the prebuild task is run. Now, this prebuild tasks cleans - deletes dist/ -, that's fine, but it immediately runs the test suite.

For the following 3 issues I have suggested solutions.

First issue

Can you please elaborate why you run a test BEFORE having built anything ?

If I remove the prebuild task, I can run the build task with various warnings, but at least it builds. Also, a build takes much longer this way.

Fix: Is the prebuild task necessary ?

Second issue

Why are the dev dependencies defined - for karma, rimraf, webpack etc - but in the scripts section they are not prefixed with node_modules/.bin/karma etc ?

This means that npm installs the dev dependencies locally, but you still need them installed globally where they are picked from the $PATH. You may have an incompatible or outdated version installed in the $PATH, who knows ?

Fix: prefix the dev commands such as 'node_modules/.bin/karma' etc.

Third issue

If I run npm test or npm run test, no test is actually run successfully.

Here's the output:

➜  client git:(master) ✗ npm test

> Chapter_10_Auction@ test angular2typescript.git/chapter10/auction/client
> karma start karma.conf.js

START:
ts-loader: Using typescript@2.0.0 and angular2typescript.git/chapter10/auction/client/tsconfig.json
19 08 2016 23:55:28.952:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
19 08 2016 23:55:28.972:INFO [launcher]: Starting browser Chrome
19 08 2016 23:55:28.993:INFO [launcher]: Starting browser Firefox
19 08 2016 23:55:33.289:INFO [Chrome 52.0.2743 (Mac OS X 10.11.6)]: Connected on socket /#RPd5tUvAjsLznfl4AAAA with id 42207960
Chrome 52.0.2743 (Mac OS X 10.11.6) ERROR
  Uncaught Error: Missing: SyncTestZoneSpec
  at angular2typescript.git/chapter10/auction/client/karma-test-runner.js:2821
19 08 2016 23:55:36.644:INFO [Firefox 48.0.0 (Mac OS X 10.11.0)]: Connected on socket /#mW4SVXPzg2HfBeOGAAAB with id 39354343
Firefox 48.0.0 (Mac OS X 10.11.0) ERROR
  Error: Missing: SyncTestZoneSpec
  at angular2typescript.git/chapter10/auction/client/karma-test-runner.js:2821

Finished in 0.789 secs / 0 secs

SUMMARY:
✔ 0 tests completed

Fix: The problem is with zone.js 0.6.14 or higher. If you tie the version to

    "zone.js": "0.6.13"

the problem goes away!! See https://github.com/angular/zone.js/issues/404.

Now the output is

➜  client git:(master) ✗ npm test

> Chapter_10_Auction@ test angular2typescript.git/chapter10/auction/client
> karma start karma.conf.js

START:
ts-loader: Using typescript@2.0.0 and angular2typescript.git/chapter10/auction/client/tsconfig.json
20 08 2016 00:19:23.669:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
20 08 2016 00:19:23.692:INFO [launcher]: Starting browser Chrome
20 08 2016 00:19:23.713:INFO [launcher]: Starting browser Firefox
20 08 2016 00:19:28.194:INFO [Chrome 52.0.2743 (Mac OS X 10.11.6)]: Connected on socket /#GZnWw_kdXa7YYoQMAAAA with id 50352697
20 08 2016 00:19:30.091:INFO [Firefox 48.0.0 (Mac OS X 10.11.0)]: Connected on socket /#kGxqbKiB9NLE6tg6AAAB with id 14277212
  ApplicationComponent
    ✔ is successfully instantiated
  StarsComponent
    ✔ is successfully injected
    ✔ readonly property is true by default
    ✔ all stars are empty
    ✔ all stars are filled
    ✔ emits rating change event when readonly is false
  ProductService
    ✔ getProductById() should return Product with ID=1

Finished in 0.645 secs / 0.621 secs

SUMMARY:
✔ 14 tests completed

[dkataiev]

@antonmoiseev and @catull can you please provide you versions of node and npm ? I tried to uninstall old node installation and install new one, but this also did not sole the issue. My env: OS: OSX 10.11.6 node: v6.4.0 npm: 3.10.3

[catull]

Certainly, I am also on Mac OS X 10.11.6.

Node is 6.4.0, npm is 3.10.6. Which ones are yours ?

Thanks.

[dkataiev]

Just updated to the same versions. node: v6.4.0 npm: 3.10.3

[catull]

I am aware I am not addressing the original poster's problem. The problem occurred in May, with nodejs 6.2. It is not known if @mthierba's problem still persists.

[catull]

If I leave the prebuild task in, but with the other two suggested fixes, I can run all tasks.

[catull]

@antonmoiseev: Can you please address the three "issues", whether they are "issues" in your opinion ?

[dkataiev]

The strange thing is that i created a starter project based on client code. If i run npm run build directly in this starter - everything is ok. After that i copy files to another folder (only source code, without node_modules), and then i get subj error.

[dkataiev]

@catull I'm very new to Angular2 and it is hard for me to say if your two first issues are really issues.

I also faced problem with zone.js and fixed it in the same way as you did.

[catull]

I am also rather new to angular 2, we're in the same boat on the same ocean.

[dkataiev]

And this ocean is full of sharks and mysterious creatures ;)

[catull]

I checked out your repo, and I can only run npm run build successfully, if zone.js is exacly 0.6.12. Now which files do you copy ?

Are there the ones?

karma.js package.json src/ -- the whole folder tsconfig.json webpack

?

[dkataiev]

i copied the whole project structure, except .git to a folder where i want to start new project let's call it 'new_project'. after that in 'new_project' i do npm install npm run build

and now i get

ERROR in ./~/bootstrap/dist/css/bootstrap.css Module parse failed: /Users/dk/dev/idea-projects/go-academy/src/go-academy-ng/node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (7:5) You may need an appropriate loader to handle this file type.

[catull]

Can you give me the first 10 lines of that bootstrap.css, the one that is reported as having an unexpected token .... I am doing exactly as you described, by the way. The project builds in a different folder, as you described. I do let npm install the dependencies fresh in the "new_project" folder.

Could it be that IDEA is messing with things ?

I have tried the whole thing repeatedly, in the CLI. It builds nicely for me, sorry I cannot help you.

[dkataiev]

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

this are the first 10 lines

[catull]

Yepp, I have the exact same lines, I was hoping there was a typo ...

[dkataiev]

So for you everything is ok ?

Can you please describe the way you installed node and updated npm ? Maybe i did something wrong on that step.

[catull]

Installation: I downloaded node 6.4.pkg (for Mac OS X). Ran the installer and it installed it in /usr/local, as always. It installs node and npm. I have installed node js 4.x.y, 5.x.y, and 6.x.y, various sub-versions. I only keep one version at a time. But I do occasionally update npm. So, for instance, nodejs 6.4 comes with npm 3.10.3, but I have upgraded npm to 3.10.6.

[dkataiev]

Looks like i broke my node and npm installation. I'll try to reinstall it again, maybe this will help.

[catull]

Which OS and version do you use ? Have you tried the modification of vendor.ts ?

[dkataiev]

OSX 10.11.6

[catull]

Do you install npm packages globally ?

[dkataiev]

Not sure about that. How do you install webpack or karma ?

[catull]

You can install it two ways. For your user only, or globally.

User-only: npm install karma -- the packages are installed in $HOME/.npm I think. Globally: npm install -g karma -- per default, the packages are installed in /usr/local/lib/node_modules.

Inside a node project, you do this: npm init (it creates a simple package.json) Then you install packages like in the User-only case. Only now they are installed in node_modules in the same directory. But you can also instruct npm to save the version in package.json

npm install karma --save-dev -- the package is defined in "devDependencies" section npm install bootstrap --save -- the package is defined in "dependencies" section

[dkataiev]

I don't understand how but i made it work without errors. Hope everything will be fine. Thank you for your support.