Getting a compilation error with react-toolbox

[all-iver]

When I import MobxSchemaForm I get the following error:

./node_modules/react-toolbox/lib/switch/theme.css
Module build failed: Error: composition is only allowed when selector is single :local class name not in ".disabled", ".disabled" is weird
    at Array.map (<anonymous>)

I don't want to use react-toolbox at all and want to remap to react-bootstrap widgets instead. I was under the impression that react-toolbox was optional, do I need to do something to stop MobxSchemaForm from importing it?

[alexhisen]

Its default mapper map (https://github.com/alexhisen/mobx-schema-form/blob/ed33419c9fc4cff203b6683c643a5589f0e1a6e4/src/MobxSchemaForm.jsx#L68) imports widgets that use react-toolbox. To use it without react-toolbox, you'll need to provide a mapper object that includes each of the widget types mapped to your own components instead of the built-in widgets. You'll need to use the asSchemaForm HOC in your own widgets.

[all-iver]

Hmm, I'm getting that error when I import MobxSchemaForm:

import { MobxSchemaForm } from 'mobx-schema-form';

That's the only line of code I added, so it shouldn't be doing any rendering...

[alexhisen]

Hmm, MobxSchemaForm specifically uses dynamic require calls instead of static imports to avoid pulling in react-toolbox until it's rendered with default mapper. This definitely works for tests using webpack 1.x. Haven't tried webpack 2.x yet.

[all-iver]

Okay, I'm using create-react-app with what looks like webpack 3.8.1, so maybe that's doing something weird.

[alexhisen]

I think you can solve this problem with the https://webpack.js.org/plugins/ignore-plugin/ by excluding react-toolbox - then webpack won't try to pull it in.

[all-iver]

Unfortunately I can't get to the webpack config with create-react-app (since it hides the build stack). If I could get react-toolbox to load correctly I think it would be fine and webpack would just bundle it in some chunk that never gets sent to the client, but so far no luck. Some googling (https://github.com/react-toolbox/react-toolbox-themr/issues/17) shows similar errors to mine but I'm not sure if it's related.

[alexhisen]

To get it to compile, I think you need support for postcss and sass in your webpack setup. And I remember seeing some docs on the react-toolbox github on how to work within the react-create-app environment.

[all-iver]

Okay yeah, according to the README it requires CSS modules which is not included with Create React App. So you can install react-toolbox-themr and do some changes to the build process, but even then it says this:

Finally, make sure the components you use from react-toolbox are imported without bundled css:

- import {Button} from 'react-toolbox/lib/button'; + import Button from 'react-toolbox/lib/button/Button';

Otherwise your build will break.

Looking at your imports it seems like you're doing the former, meaning webpack would try and bundle the same CSS and fail anyway? If I change your require() statements to do the latter, it compiles successfully and seems to work, and I am able to map to a custom react-bootstrap widget. But I don't know if that breaks other things.

[alexhisen]

Changing require to import raw/unthemed components definitely will break all those widgets. :-( You know you can 'bail out' of create-react-app and get access to normal webpack.

[all-iver]

That's true, but it's kind of a big ask because after that I have to manage my own build stack, and avoiding that was the whole point of using create-react-app. Would it be possible/desirable to split apart the core functionality of mobx-schema-form and the react-toolbox default widgets into two separate things so that the react-toolbox part is completely optional?

[alexhisen]

I've just published mobx-schema-form 1.3.6 with a fix for this. What you'll need to do is instead of import { MobxSchemaForm }, do: import SchemaForm from 'mobx-schema-form/lib/SchemaForm'; And then use SchemaForm with your own mapper in place of MobxSchemaForm. Please let me know if this works right. It's likely you'll need to import all the other parts like asSchemaField from mobx-schema-form/lib/asSchemaField and not from the index. That I cannot fix without breaking existing usage.

[all-iver]

Yes, it works. :) Thanks for the super quick fix!