1

I'm using reactGo as a boilerplate for a web app and I'd like to include react-toolbox for the UI. Through some unfruitful experimentation I have made at least some progress on including it in the project. I'm getting hung up on the development server rendering. Since reactGo is isomorphic/universal (don't really care about the semantics anymore) it tries to load in the react-toolbox during Webpack's server compilation. The problem is react-toolbox is build using CSS Modules. Webpack 2 can handle CSS Modules but I'm getting caught up somewhere. Any input would be extremely helpful.

webpack/rules/index.js:

const image = require('./image');
const javascript = require('./javascript');
const css = require('./css');
const reactToolbox = require('./reactToolbox');

module.exports = ({ production = false, browser = false } = {}) => (
  [
    javascript({ production, browser }),
    css({ production, browser }),
    image(),
    reactToolbox()
  ]
);

webpack/rules/reactToolbox.js

const PATHS = require('../paths');

module.exports = ({ production = false, browser = false } = {}) => {

  const browserSettings = [
    "style-loader",
    {
      loader: "css-loader",
      options: {
        modules: true,
        sourceMap: true,
        importLoaders: 1,
        localIdentName: "[name]--[local]--[hash:base64:8]"
      }
    },
    "postcss-loader" // has separate config, see postcss.config.js nearby
  ];

  const serverSettings = [
    'isomorphic-style-loader',
    {
      loader: 'css-loader/locals',
      options: {
        modules: true,
        localIdentName: "[name]--[local]--[hash:base64:8]"
      }
    },
    "postcss-loader"
  ];

  return {
    test: /\.css$/,
    include: [PATHS.modules + '/react-toolbox/'],
    use: browser ? browserSettings : serverSettings
  };
};

I've add the "isomorphic-style-loader" to help with the issues I was having with style-loader and it seems to have helped. However I'm still stuck on getting the "css-loader/locals" to do it 's job correctly.

Any time I include a component from the react-toolbox library I end up with with an error along the lines of:

/Project/node_modules/react-toolbox/lib/ripple/theme.css:1
(function (exports, require, module, __filename, __dirname) { :root {
                                                              ^
SyntaxError: Unexpected token :
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Project/node_modules/react-toolbox/lib/ripple/index.js:13:14)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Project/node_modules/react-toolbox/lib/button/index.js:20:15)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Project/node_modules/react-toolbox/lib/app_bar/index.js:14:15)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)

I've been pushing through on this one for a while now and I need some outside perspective. Any input would be helpful. Don't be afraid to ask for more background info or code if you think it will help.

Cleanshooter
  • 2,314
  • 4
  • 19
  • 29

2 Answers2

0

I found a solution : first, you dont need an extra reactToolbox.js in rules, just put the code of postcss.config in the css.js file. Then in the return function of css.js add the path for node_modules in the include(PATHS.modules) . I made a extra file scss.js but it not mandatory.

Install the missing modules(csspost-nested,...) And that's it, it work great :)

Dominique
  • 1
0

Follow: https://github.com/react-toolbox/react-toolbox#usage-in-webpack-projects-not-create-react-app

And add PATHS.modules to the return in css.js return { test: /\.css$/, use: browser ? browserLoaders : serverLoaders, include: [PATHS.app, PATHS.modules] };

Amir Baron
  • 101
  • 6