How do I integrate React ToolBox.

[casoetan]

I love what you've done here with React and Typescript.
One major challenge I have is integrating this with react-toolbox. http://react-toolbox.com/

Once I add react-toolbox, app fails to build. Any help would be great.

[altaywtf]

Hello @casoetan, thanks for using vortigern.

Can you share the details of additional configurations you've made and errors you've encountered?

As far as I know, react-toolbox uses SASS and it requires to have a module which can handle SASS. But we are using PostCSS with css-loader. You might need to install sass-loader.

[casoetan]

Hi @altayaydemir, installed react-toolbox, sass-loader and toolbox-loader and updated the Header.tsx file

import * as React from 'react';
import AppBar from 'react-toolbox/lib/app_bar';

import { Link } from 'react-router';

export class Header extends React.Component<any, any> {
  render() {
    const s = require('./style.css');

    return (
      <AppBar fixed flat>
        <nav className={s.nav}>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="about">About</Link></li>
            <li><Link to="counter">Counter</Link></li>
            <li><Link to="stars">Stars</Link></li>
          </ul>
        </nav>
      </AppBar>
    );
  }
}

I updated the webpack dev file css to

{
        test: /\.(css|scss)$/,
        include: /src\/app/,
        loaders: [
          'style',
          'css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]',
          'postcss'
        ]
      },
      {
        test: /\.(css|scss)$/,
        exclude: /src\/app/,
        loader: 'style!css!sass!toolbox'
      },

The error.

$ npm run start

> vortigern@0.0.2 start /webts
> npm run start:dev


> vortigern@0.0.2 start:dev /webts
> cross-env NODE_ENV=development make start

rm -rf build/
webpack --config config/webpack/dev.js
ts-loader: Using typescript@1.8.10 and /webts/tsconfig.json
Hash: 05c880111c579a5bf53f
Version: webpack 1.13.1
Time: 4665ms
                                      Asset      Size  Chunks             Chunk Names
images/a6a8103e977275e28df8224ed8d6521e.png   16.7 kB          [emitted]
                                  js/app.js   1.28 MB       0  [emitted]  app
                           ../manifest.json  97 bytes          [emitted]
   [0] multi app 40 bytes {0} [built]
 [279] ./config/main.js 678 bytes {0} [built]
    + 325 hidden modules

WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/containers/App/style.css
stylelint: /webts/src/app/containers/App/style.css:2:3: Expected indentation of 1 tab (indentation)

WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/containers/App/style.css
stylelint: /webts/src/app/containers/App/style.css:3:3: Expected indentation of 1 tab (indentation)

WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/containers/App/style.css
stylelint: /webts/src/app/containers/App/style.css:4:3: Expected indentation of 1 tab (indentation)

WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/containers/Home/style.css
stylelint: /webts/src/app/containers/Home/style.css:2:3: Expected indentation of 1 tab (indentation)

WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/components/Header/style.css
stylelint: /webts/src/app/components/Header/style.css:2:3: Expected indentation of 1 tab (indentation)

WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/components/Header/style.css
stylelint: /webts/src/app/components/Header/style.css:3:3: Expected indentation of 1 tab (indentation)

WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/components/Header/style.css
stylelint: /webts/src/app/components/Header/style.css:7:3: Expected indentation of 1 tab (indentation)

WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/components/Header/style.css
stylelint: /webts/src/app/components/Header/style.css:8:3: Expected indentation of 1 tab (indentation)
webpack --config config/webpack/server.js
ts-loader: Using typescript@1.8.10 and /webts/tsconfig.json
Hash: 21d1215340e1b3f04768
Version: webpack 1.13.1
Time: 3312ms
                                      Asset     Size  Chunks             Chunk Names
images/a6a8103e977275e28df8224ed8d6521e.png  16.7 kB          [emitted]
                               ../server.js   709 kB       0  [emitted]  main
   [1] ./config/main.js 678 bytes {0} [built]
 [274] ./config/webpack/dev.js 2.55 kB {0} [built]
    + 280 hidden modules

ERROR in ./~/react-toolbox/lib/app_bar/theme.scss
Module parse failed: /webts/node_modules/react-toolbox/lib/app_bar/theme.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)
    at Parser.pp.raise (/webts/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
    at Parser.pp.getTokenFromCode (/webts/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)
    at Parser.pp.readToken (/webts/node_modules/webpack/node_modules/acorn/dist/acorn.js:2526:15)
    at Parser.pp.nextToken (/webts/node_modules/webpack/node_modules/acorn/dist/acorn.js:2518:71)
    at Parser.parse (/webts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1631:10)
    at Object.parse (/webts/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
    at Parser.parse (/webts/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/webts/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/webts/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/webts/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /webts/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/webts/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /webts/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)
 @ ./~/react-toolbox/lib/app_bar/index.js 14:13-36
node build/server.js
/webts/build/server.js:19322
    var _theme = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"./theme.scss\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
                                                                                                                                                                ^

Error: Cannot find module "./theme.scss"
    at webpackMissingModule (/webts/build/server.js:19322:79)
    at Object.<anonymous> (/webts/build/server.js:19322:168)
    at __webpack_require__ (/webts/build/server.js:21:30)
    at Object.module.exports.Object.defineProperty.value (/webts/build/server.js:19289:18)
    at __webpack_require__ (/webts/build/server.js:21:30)
    at Object.<anonymous> (/webts/build/server.js:19274:17)
    at __webpack_require__ (/webts/build/server.js:21:30)
    at Object.<anonymous> (/webts/build/server.js:19254:21)
    at __webpack_require__ (/webts/build/server.js:21:30)
    at Object.<anonymous> (/webts/build/server.js:19169:14)
make: *** [start] Error 1

npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/Cellar/node/6.2.0/bin/node" "/Users/Me/.node/bin/npm" "run" "start:dev"
npm ERR! node v6.2.0
npm ERR! npm  v3.9.2
npm ERR! code ELIFECYCLE
npm ERR! vortigern@0.0.2 start:dev: `cross-env NODE_ENV=development make start`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the vortigern@0.0.2 start:dev script 'cross-env NODE_ENV=development make start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vortigern package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development make start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs vortigern
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls vortigern
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /webts/npm-debug.log

npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/Cellar/node/6.2.0/bin/node" "/Users/Me/.node/bin/npm" "run" "start"
npm ERR! node v6.2.0
npm ERR! npm  v3.9.2
npm ERR! code ELIFECYCLE
npm ERR! vortigern@0.0.2 start: `npm run start:dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vortigern@0.0.2 start script 'npm run start:dev'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vortigern package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run start:dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs vortigern
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls vortigern
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /webts/npm-debug.log

[batuhan]

Hey @casoetan, we've done some changes to Vortigern. Can you try again and let us know if things work as expected?

[casoetan]

Yeah works now.

I'm going to open another issue if you do not mind.

Cheers