React-redux-starter-kit: How to use react-toolbox?

[ms88privat]

Thank you for this starter-kit. The webpack config is pretty huge so I don't really know how to integrate react-toolbox.

Could anyone help me out here?

[davezuko]

You should just be able to npm install it and, if you want it to be included in the vendor bundle, add it here: https://github.com/davezuko/react-redux-starter-kit/blob/master/config/_base.js#L39. Is there any specific error you're having?

[ms88privat]

@davezuko I tried this but I got a lot of errors (for every component one)

example error:

ERROR in ./~/react-toolbox/lib/button/Button.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./style in /Users/marcelschulze/dev/extern/dacor/cms/react-redux-starter-kit/node_modules/react-toolbox/lib/button
 @ ./~/react-toolbox/lib/button/Button.js 28:13-31

ERROR in ./~/react-toolbox/lib/button/IconButton.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./style in /Users/marcelschulze/dev/extern/dacor/cms/react-redux-starter-kit/node_modules/react-toolbox/lib/button
 @ ./~/react-toolbox/lib/button/IconButton.js 28:13-31

Thanks for your help. Would really appreciate it, if you can try it out.

Edit: I also tried another library called react-mdl. But I don't get this to run either. Here is the problem, that the vendor bundle does not pick up the necessary javascript and style file? Where can I specify which js and style files webpack should bundle?

[davezuko]

So I did some digging and the project does a couple of weird things which make it a bit of a hassle:

• They don't suffix style imports with the file extension (i.e. they write import style from './style' rather than import style from './style.scss'). This means that Webpack has no way of knowing how to resolve that import unless you tell it how. In build/webpack.config you'll need to add this .scss to resolve.extensions:

  resolve: {
    root: paths.base(config.dir_client),
    extensions: ['', '.js', '.jsx', '.scss']
  },

Next, they also require CSS modules to be enabled, but we aren't treating 3rd-party packages as CSS module consumers. As such, you'll have to update the loader for CSS modules:

// Styles
const cssLoader = !config.compiler_css_modules
  ? 'css?sourceMap'
  : [
    'css?modules',
    'sourceMap',
    'importLoaders=1',
    'localIdentName=[name]__[local]___[hash:base64:5]'
  ].join('&')

webpackConfig.module.loaders.push({
  test: /\.scss$/,
  include: /(src|react-toolbox)/, // notice this
  loaders: [
    'style',
    cssLoader,
    'postcss',
    'sass?sourceMap'
  ]
})

Then, finally, update the global scss loader:

// Don't treat global SCSS as modules (except react-toolbox!)
webpackConfig.module.loaders.push({
  test: /\.scss$/,
  exclude: /(src|react-toolbox)/,
  loaders: [
    'style',
    'css?sourceMap',
    'postcss',
    'sass?sourceMap'
  ]
})

[davezuko]

Doing the ^^ I was able to get it to work:

[davezuko]

Just made this even easier with: https://github.com/davezuko/react-redux-starter-kit/commit/b0b5e7177ecb34032801557ff857e07b10d79da9. You just need to do two things and it should work:

• Add the extension mentioned above to https://github.com/davezuko/react-redux-starter-kit/blob/master/build/webpack.config.js#L19
• Add react-toolbox to this list of paths to treat as CSS modules: https://github.com/davezuko/react-redux-starter-kit/blob/master/build/webpack.config.js#L186

Then, optionally, add it to your compiler_vendor if you want to package it in your vendor bundle.

[ms88privat]

@davezuko super awesome, it is working! :+1:

For the sake of completeness, could you also show how to integrate react-mdl?

Edit: wich should cover a lot of other libraries as well

[davezuko]

@ms88privat glad it worked. Going to close this issue for now since the original question has been answered, but will take a look at react-mdl later today. I just started browsing through it and the docs are quite poor, so it may take me a bit longer to figure it out.

[davezuko]

Got it, add the following lines to the top of main.js:

import 'react-mdl/extra/material.css'
import 'react-mdl/extra/material.js'

And then add the <link> tag for the font in index.html:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

After that, you should be able to just:

import Button from 'react-mdl/lib/Button'

// ...
<Button raised primary>foo</Button>

[ms88privat]

@davezuko thanks!

import 'react-mdl/extra/material.css'
import 'react-mdl/extra/material.js'

This is what I was looking for. ES6 + Webpack is quite different then ES5 and Grunt build tools...

[neverfox]

There are some additional things you'll potentially have to do, e.g. if you use a custom theme file with react-toolbox with toolbox-loader.

First is this:

webpackConfig.toolbox = {
  theme : paths.client('styles/toolbox-theme.scss')
}

And you also need to add toolbox last of the list of loaders for your CSS modules SCSS.

[ajainvivek]

@davezuko I tried the steps provided by you to get it working but unfortunately styles doesn't apply

Can you help me out?

[apaatsio]

I can't figure out how to get this to work with react-toolbox either. @davezuko's instructions from Feb 21 seem to be outdated.

[apaatsio]

Here's a config for getting react-toolbox to work with react-redux-starter-kit: https://github.com/apaatsio/react-redux-starter-kit/commit/8d152ee75a10b23132bc8c0796a0752b235bd237

[junibrosas]

@apaatsio I followed your change commit and your issue and it works well, thanks!

[MichaelIT]

@apaatsio it works well with react-toolbox, but I can't import .scss file in component anymore.

[apaatsio]

@MichaelIT Please, check out https://github.com/apaatsio/react-redux-starter-kit/commit/8d5ebb3497fd5283126c505b1feb470d925d5967

I added a simple example for a component with theming.

[junibrosas]

@MichaelIT

I have created a simple minimal repository with react-toolbox just days ago. No Node server installed.

https://github.com/junibrosas/react-tyescript-router-redux-toolbox

[MichaelIT]

@apaatsio @junibrosas thank you all, it work after I remove all node package and run npm install again , it work .

[tosman]

@apaatsio your example doesn't have the styles applied. Try changing styles in Header.scss

[Daddaaff]

@davezuko This seems to be outdated. I got react-toolbox running with this, but it causes problems with other stylesheets like core.scss, CoreLayout.scss, etc. Only selectors on html tags work, but not on classes. The .core-layout__viewport { padding: 1rem; } is present in the styleshet sent to the browser, but doesnt't get applied.