"Error: composition is only allowed when selector is single", when trying to import react-toolbox components

[PDS42]

Here is the console error which pops whenever I try to import a component from react-toolbox (eg import { AppBar, Checkbox, IconButton } from 'react-toolbox';

I tried digging a bit, and I think that I could fix that if it wern't for Happypack, which makes it harder for me to understand.

Any idea how to fix it? I did not touch a single webpack/other config file!

[sergiokopplin]

@PDS42 i guess is the same error.

reference: https://github.com/react-toolbox/react-toolbox/issues/1359

[PDS42]

Thanks for answering.

I've tried all solutions there, as well as in linked answers, and none worked. I'm on the feature/apollo branch, and just tried fixing it again from a fresh clone, did not work for me. I would be so grateful if someone helped out on this, (ideally clone as well and try to fix it ?) as I really need to make this work :(

[diondirza]

Could you make a sample branch so I could take a look on it?

[PDS42]

Sure! Head over to https://github.com/PDS42/react-toolbox-issue and have a blast :)

To make things clear, I did manage to import some components without the build failing, such as import Button from 'react-toolbox/lib/button/Button', but 1) not all of them work for me and 2) I'm having trouble using similar libraries, so it must be related to something I'm doing wrong. But I really can't see it! Thanks for taking the time anyways

[diondirza]

@PDS42 sorry for late reply, to solve the issue there are some steps:

• Implement css modules in your css-loader, because react-toolbox using that.
• add postcss-loader to handle css import, also because react-toolbox will need that to compile their styles
• Also, implement those loaders mentioned above for your compiled server bundle

As your reference to implement react-toolbox completely in this boilerplate, you could compare your current setup with my branch.

Note: don't use latest postcss-loader version, it is still buggy and will make react-toolbox component buggy, use postcss-loader v1.3.3

[PDS42]

@diondirza I cloned your branch, and did the following:

=> created a new Menu folder in /shared/components/Menu

=>created new file index.js, with the following example from react-toolbox/components/Layout:

`import React, { Component } from 'react'; import { AppBar, Checkbox, IconButton } from 'react-toolbox'; import { Layout, NavDrawer, Panel, Sidebar } from 'react-toolbox';

class Menu extends Component { constructor(props) { super(props); this.state = { drawerActive: false, drawerPinned: false, sidebarPinned: false }; }

toggleDrawerActive = () => {
    this.setState({ drawerActive: !this.state.drawerActive });
};

toggleDrawerPinned = () => {
    this.setState({ drawerPinned: !this.state.drawerPinned });
}

toggleSidebar = () => {
    this.setState({ sidebarPinned: !this.state.sidebarPinned });
};

render() {
    return (
        <Layout>
            <NavDrawer active={this.state.drawerActive}
                pinned={this.state.drawerPinned} permanentAt='xxxl'>
                <p>
                    Navigation, account switcher, etc. go here.
                </p>
            </NavDrawer>
            <Panel>
                <AppBar leftIcon='menu'/>
                <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}>
                    <h1>Main Content</h1>
                    <p>Main content goes here.</p>
                    <Checkbox label='Pin drawer' checked={this.state.drawerPinned} onChange={this.toggleDrawerPinned} />
                    <Checkbox label='Show sidebar' checked={this.state.sidebarPinned} onChange={this.toggleSidebar} />
                </div>
            </Panel>
            <Sidebar pinned={ this.state.sidebarPinned } width={ 5 }>
                <div><IconButton icon='close'/></div>
                <div style={{ flex: 1 }}>
                    <p>Supplemental content goes here.</p>
                </div>
            </Sidebar>
        </Layout>
    );
}

}

export default Menu;`

I only added a constructor and this.state=... instead of state = ....

=> added the import Menu from '../Menu'; line in DemoApp's index.js.

It throws me the following error: https://gyazo.com/96cb26bf67b4b6188454c69227e9d339 (which I already got and fixed on my own project, so no big deal.)

=> I commented the problematic functions to see if react-toolbox components alone still rendered, got this error again: https://gyazo.com/8f66122d651e39c1ba7f280ce0150c0e

This is literally all I did, I truly do not understand. As for the steps, I'm not comfortable enough with the environment to complete them on my own. I tried digging in configFactory and related config files, but I could not figure a solution out.

Do you think this could come from my OSX environment somehow?

[diondirza]

No it is not. 1st error just change your babel preset to use stage 0. 2nd error its related on your css loader config. The error really obvious to tell us that your css loader not implement css modules rules and postcss loader yet, therefore it can't process the css file because the file have composition syntax that normal css loader don't understand. See commit history to fully understand how to setup css loader in the right way. You can see it clearly.

[diondirza]

this commit should tell you clearly. There is also setting in config/value.js to be added for react toolbox to be excluded being process in server.

[PDS42]

Thank you very much for all your help. I'll try this out tomorrow, but I finally understood what you meant with the commit! Much love, I'll let you know how it went but I'm pretty sure I can fix it now. Edit: fixed it, thanks!