How to use ReactGo with React-Toolbox?

[Cleanshooter]

Question

How to use ReactGo with React-Toolbox?

It seems like it would make sense since react-toolbox was built using CSS Modules vs. Material-UI which was not.

Not super familiar with webpack so not sure how to get passed this one... plus all of the examples react-toolbox has look like webpack v1 and this repo uses webpack v2.

Please help.

Errors follow:

ERROR in ..//react-toolbox/lib/app_bar/theme.css
Module parse failed: /Users/jmotacek/Documents/Projects/Cognitive Request Router/node_modules/react-toolbox/lib/app_bar/theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| :root {
| --palette-red-50: rgb(255, 235, 238);
| --palette-red-100: rgb(255, 205, 210);
@ ..//react-toolbox/lib/app_bar/index.js 16:13-35
@ ./containers/App.jsx
@ ./pages/App.jsx
@ ./pages/index.js
@ ./routes.jsx
@ ../server/render/middleware.js
@ ../server/index.js

ERROR in ..//react-toolbox/lib/navigation/theme.css
Module parse failed: /Users/jmotacek/Documents/Projects/Cognitive Request Router/node_modules/react-toolbox/lib/navigation/theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| :root {
| --palette-red-50: rgb(255, 235, 238);
| --palette-red-100: rgb(255, 205, 210);
@ ..//react-toolbox/lib/navigation/index.js 18:13-35
@ ./containers/App.jsx
@ ./pages/App.jsx
@ ./pages/index.js
@ ./routes.jsx
@ ../server/render/middleware.js
@ ../server/index.js

ERROR in ..//react-toolbox/lib/Link/theme.css
Module parse failed: /Users/jmotacek/Documents/Projects/Cognitive Request Router/node_modules/react-toolbox/lib/Link/theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| :root {
| --palette-red-50: rgb(255, 235, 238);
| --palette-red-100: rgb(255, 205, 210);
@ ..//react-toolbox/lib/Link/index.js 14:13-35
@ ./containers/App.jsx
@ ./pages/App.jsx
@ ./pages/index.js
@ ./routes.jsx
@ ../server/render/middleware.js
@ ../server/index.js

ERROR in ..//react-toolbox/lib/button/theme.css
Module parse failed: /Users/jmotacek/Documents/Projects/Cognitive Request Router/node_modules/react-toolbox/lib/button/theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| :root {
| --palette-red-50: rgb(255, 235, 238);
| --palette-red-100: rgb(255, 205, 210);
@ ..//react-toolbox/lib/button/index.js 24:13-35
@ ../~/react-toolbox/lib/app_bar/index.js
@ ./containers/App.jsx
@ ./pages/App.jsx
@ ./pages/index.js
@ ./routes.jsx
@ ../server/render/middleware.js
@ ../server/index.js

ERROR in ..//react-toolbox/lib/link/theme.css
Module parse failed: /Users/jmotacek/Documents/Projects/Cognitive Request Router/node_modules/react-toolbox/lib/link/theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| :root {
| --palette-red-50: rgb(255, 235, 238);
| --palette-red-100: rgb(255, 205, 210);
@ ..//react-toolbox/lib/link/index.js 14:13-35
@ ../~/react-toolbox/lib/navigation/index.js
@ ./containers/App.jsx
@ ./pages/App.jsx
@ ./pages/index.js
@ ./routes.jsx
@ ../server/render/middleware.js
@ ../server/index.js

ERROR in ..//react-toolbox/lib/ripple/theme.css
Module parse failed: /Users/jmotacek/Documents/Projects/Cognitive Request Router/node_modules/react-toolbox/lib/ripple/theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| :root {
| --color-divider: var(--palette-grey-200);
| --color-background: var(--color-white);
@ ..//react-toolbox/lib/ripple/index.js 13:13-35
@ ..//react-toolbox/lib/button/index.js
@ ..//react-toolbox/lib/app_bar/index.js
@ ./containers/App.jsx
@ ./pages/App.jsx
@ ./pages/index.js
@ ./routes.jsx
@ ../server/render/middleware.js
@ ../server/index.js

[Cleanshooter]

Removing the

include: PATHS.app

From line 66 of the webpack/rules/css.js file helped...

[Cleanshooter]

Still running into issues...

I think (if reading webpack config correctly) that this part of the css rules is preventing postCSS from being used as a loader for the React-Toolbox files...

{
      loader: 'postcss-loader',
      options: {
        plugins: [
          postcssImport({ path: path.resolve(PATHS.app, './css') }),
          postcssCssnext({ browsers: ['> 1%', 'last 2 versions'] }),
          postcssReporter({ clearMessages: true })
        ]
      }
    } 

postcssimport seems to only be looking in the application directory so when webpack compiles the React-Toolbox files and runs into a .css file that was built for postcss it tries to handle it as regular css and fails.

/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)

[Cleanshooter]

I think I'm getting a little closer... I've added this to the webpack/rules/index.js

     {
    	test: /\.css$/,
    	include: [/node_modules\/react-toolbox/],
    	use:[
    	  'style-loader',
        'css-loader?modules&importLoaders=1',
				'postcss-loader',
				{
	    		loader: 'postcss-loader',
	        options: {
	          plugins: function () {
	            return [
	              require('postcss-cssnext'),
	            ];
	          }
	        }
	    	}
    	]
    }

But I think I'm still screwing up the webpack config... because I'm getting an error:

ERROR in ../~/react-toolbox/lib/app_bar/theme.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!../../../css-loader/index.js?modules&importLoaders=1!../../../postcss-loader/index.js!../../../postcss-loader/index.js??ref--3-3!./theme.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // add the styles to the DOM
  7 | var update = require("!../../../style-loader/addStyles.js")(content, {});

Syntax Error: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!../../../css-loader/index.js?modules&importLoaders=1!../../../postcss-loader/index.js!../../../postcss-loader/index.js??ref--3-3!./theme.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // add the styles to the DOM
  7 | var update = require("!../../../style-loader/addStyles.js")(content, {});

    at /Project/node_modules/postcss-loader/index.js:146:22
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ../~/react-toolbox/lib/app_bar/index.js 16:13-35
 @ ./containers/App.jsx
 @ ./pages/App.jsx
 @ ./pages/index.js
 @ ./routes.jsx
 @ ../server/render/middleware.js
 @ ../server/index.js

Any thoughts would be helpful...

[Cleanshooter]

This version seems to work a little better and I had to add a postcss.config.js...

but I'm still stuck:

{
    	test: /\.css$/,
    	include: [PATHS.modules + '/react-toolbox/', PATHS.modules + '/react-css-themr/'],
    	use: [
        "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
      ]
    },

ERROR:

/Project/compiled/webpack:/~/style-loader/addStyles.js:31
	if (typeof options.singleton === "undefined") options.singleton = isOldIE();
^
ReferenceError: self is not defined
    at /Project/compiled/webpack:/~/style-loader/addStyles.js:14:1
    at /Project/compiled/webpack:/~/style-loader/addStyles.js:9:1
    at module.exports.module.exports (/Project/compiled/webpack:/~/style-loader/addStyles.js:31:1)
    at Object.module.exports.module.exports (/Project/compiled/webpack:/~/react-toolbox/lib/ripple/theme.css?377c:7:1)
    at __webpack_require__ (/Project/compiled/webpack:/webpack/bootstrap 4656726d38ca2e29f112:19:1)
    at Object.module.exports.Object.defineProperty.value (/Project/compiled/webpack:/~/react-toolbox/lib/ripple/index.js:13:1)
    at __webpack_require__ (/Project/compiled/webpack:/webpack/bootstrap 4656726d38ca2e29f112:19:1)
    at Object.module.exports.Object.defineProperty.value (/Project/compiled/webpack:/~/react-toolbox/lib/button/index.js:20:1)
    at __webpack_require__ (/Project/compiled/webpack:/webpack/bootstrap 4656726d38ca2e29f112:19:1)
    at Object.module.exports.Object.defineProperty.value (/Project/compiled/webpack:/~/react-toolbox/lib/app_bar/index.js:14:1)
    at __webpack_require__ (/Project/compiled/webpack:/webpack/bootstrap 4656726d38ca2e29f112:19:1)
    at Object.module.exports.Object.defineProperty.value (/Project/compiled/webpack:/containers/App.jsx:10:1)
    at __webpack_require__ (/Project/compiled/webpack:/webpack/bootstrap 4656726d38ca2e29f112:19:1)
    at Object.module.exports.Object.defineProperty.value (/Project/compiled/webpack:/pages/App.jsx:3:1)
    at __webpack_require__ (/Project/compiled/webpack:/webpack/bootstrap 4656726d38ca2e29f112:19:1)
    at Object.module.exports.Object.defineProperty.value (/Project/compiled/server.dev.js:12738:12)
    at __webpack_require__ (/Project/compiled/webpack:/webpack/bootstrap 4656726d38ca2e29f112:19:1)
    at Object.module.exports.Object.defineProperty.value (/Project/compiled/webpack:/routes.jsx:4:1)
    at __webpack_require__ (/Project/compiled/webpack:/webpack/bootstrap 4656726d38ca2e29f112:19:1)
    at Object.<anonymous> (/Project/compiled/webpack:/server/render/middleware.js:3:1)
    at __webpack_require__ (/Project/compiled/webpack:/webpack/bootstrap 4656726d38ca2e29f112:19:1)
    at Object.<anonymous> (/Project/compiled/webpack:/server/index.js:9:1)
    at __webpack_require__ (/Project/compiled/webpack:/webpack/bootstrap 4656726d38ca2e29f112:19:1)
    at module.exports.validateFormat (/Project/compiled/webpack:/webpack/bootstrap 4656726d38ca2e29f112:65:1)
    at Object.<anonymous> (/Project/compiled/server.dev.js:71:10)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)

[Cleanshooter]

Gave up not worth the effort right now...

[amirbaron]

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] };