ERROR in ./~/react-network-diagrams/lib/map.css - reactjs

Question

I am wanting to use the react-network-diagrams library. I have node v0.10.25, npm version 1.3.10 installed and am able to run .js files using node. I have followed tutorials to install webpack and babel and these both appear to be working with the tutorial examples. I have installed the react-network-diagram components using npm. This initially complained that my sibling dependencies we wrong. This seamed to be fixed when I reloaded the react and react-dom and gave a specific version (npm install --save react#^0.14.3 react-dom#^0.14.3)
So everything seems to work according to the tutorials.
Here is the index.jsx file contents:
console.log( "hw" )
import React from 'react';
import {render} from 'react-dom';
import { TrafficMap } from "react-network-diagrams";
class App extends React.Component {
render () {
return <TrafficMap width={980} height={500} margin={50}
topology={topo}
traffic={traffic}
edgeColorMap={edgeColorMap}
edgeDrawingMethod="bidirectionalArrow"
edgeThinknessMap={edgeThinknessMap}
edgeShapeMap={edgeShapeMap}
nodeSizeMap={nodeSizeMap}
nodeShapeMap={nodeShapeMap}
stylesMap={stylesMap}
selection={mapSelection}
onSelectionChange={this.handleSelectionChanged} />
//return <p> Hello React!</p>;
}
}
render(<App/>, document.getElementById('app'));
And here is output of webpack
ubuntu#ip-172-31-38-114:~/doe2$ ./node_modules/.bin/webpack -d
Hash: 1ecd317731574aa4e7fd
Version: webpack 1.13.0
Time: 5901ms
Asset Size Chunks Chunk Names
bundle.js 1.38 MB 0 [emitted] main
bundle.js.map 1.55 MB 0 [emitted] main
+ 204 hidden modules
ERROR in ./~/react-network-diagrams/lib/map.css
Module parse failed: /home/ubuntu/doe2/node_modules/react-network-diagrams/lib/map.css Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:4)
at Parser.pp.raise (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:920:13)
at Parser.pp.unexpected (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1483:8)
at Parser.pp.semicolon (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1462:73)
at Parser.pp.parseExpressionStatement (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1976:8)
at Parser.pp.parseStatement (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1754:188)
at Parser.pp.parseTopLevel (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1648:21)
at Parser.parse (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1616:17)
at Object.parse (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:882:44)
at Parser.parse (/home/ubuntu/doe2/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/home/ubuntu/doe2/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/home/ubuntu/doe2/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/ubuntu/doe2/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/ubuntu/doe2/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/ubuntu/doe2/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/ubuntu/doe2/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:78:16
at fs.js:268:14
at /home/ubuntu/doe2/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:43:10
at Object.oncomplete (fs.js:107:15)
# ./~/react-network-diagrams/lib/map-base.js 55:0-20
The information given in the react network diagrams website (http://software.es.net/react-network-diagrams/#/?_k=xs005u) is unclear to me. Under the heading Examples it says I must run npm install. I have done this is several different directories but it hasn't helped and I am working somewhat in the dark. npm run web-site is a script within the package and it seems to do something but then it says to connect with a webclient to port 8080 but there is nothing listening there.
I just feel like I missing one or two crucial bits to bring the whole thing together.
Thanks for help.
Ian.

Answer 1

It looks like you are missing webpack's css loader configuration.
1) First install the css-loader (imports the css), and style-loader (adds the css to the DOM)
npm install css-loader style-loader --save-dev
2) Add the loader configuration to your webpack config
{
// ...
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
}
You could find some more information here Webpack: EMBEDDED STYLESHEETS

Answer 2

Promises are part of ES2015 (previously ES6). They are not yet integrated into all environments, including yours. There is a very well-known library that adds support for new ecmascript features, which is called Babel.js.
Just like we added a css-loader, we are going to add a babel-loader:
npm install babel-loader babel-core babel-preset-es2015 --save-dev
Now add to your loaders:
{
// ...
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015']
}
}
]
}
}
For more information: babel-loader