React-toolbox: Help integrating with react-starter-kit

[claudiuapetrei]

Hi,

Has anyone managed to integrate it with https://github.com/kriasoft/react-starter-kit ?

I can't seem to get rid of this error:
node_modules/react-toolbox/lib/ripple/theme.scss:1 (function (exports, require, module, __filename, __dirname) { @import "../colors"; ^ SyntaxError: Invalid or unexpected token

[sea129]

seems your webpack doesn't know how to load sass files.
make sure you have correctly configured sass loader and css loader with css modules query.

[claudiuapetrei]

@sea129 a bit complicated with rsk.
Cloned the react-tools repo and using the next-css branch everything works :)

(apart from having to load the styles for each component but that's because of the isomorphic-styles-loader I guess)

[regenrek]

@claudiuapetrei Hi I have the same problem with the react starter kit.
Could you post your webpack.config.js?

/Users/harambe/webwork/el1000/node_modules/react-toolbox/lib/input/theme.css:1
(function (exports, require, module, __filename, __dirname) { @import '../colors.css';

[webican]

When you are building a server.js bundle with react-starter-kit, the webpack.config.js is configured in way to tell webpack to ignore everything in node_modules directory (notice regex /^[@a-z][a-z/.-0-9]*$/i doesn't allow underscore). This is good because normally you don't want to bundle every node module it depends on into server.js bundle (sometimes there are binary files in node_modules such as database drivers that webpack doesn't know what to do with). So server.js can just reference to node_modules without having to bundle everything into a single file. react-toolbox however includes scss files, when left ignored by webpack, remain untouched and when server.js is trying to import them after it's been built, you'll see "SyntaxError: Invalid or unexpected token error" because it was expecting js code. To fix this, you need to tell webpack to bundle react-toolbox into server.js. This way every scss file react-toolbox imports will be run through webpack loaders. Here is what you need to do to make it work:

server.js webpack.config.js (serverConfig section if you're using react-starter-kit):

  externals: [
    /^\.\/assets$/,
    (context, request, callback) => {
      const isExternal =
        request.match(/^[@a-z][a-z/.\-0-9]*$/i) &&
        !request.match(/\.(css|less|scss|sss)$/i) &&
        !request.match(/react-toolbox/i);

      callback(null, Boolean(isExternal));
    },
  ],

under loaders:

      test: /\.scss$/,
        loaders: [
          'isomorphic-style-loader',
          `css-loader?${JSON.stringify({
            importLoaders: 1,
            sourceMap: isDebug,
            modules: true,
            localIdentName: isDebug ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]',
            minimize: !isDebug,
          })}`,
          'postcss-loader?pack=sass',
          'sass-loader',
        ],

@claudiuapetrei check out this code I wrote to make themr compatible with isomorphic-style-loader https://github.com/kriasoft/isomorphic-style-loader/issues/62#issuecomment-261805159