not woking with @storybook/react 4.1.4

[SokolovAlex]

create simple storybook project from
https://storybook.js.org/basics/guide-react/

/// package.json
{
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook"
},
"devDependencies": {
"@storybook/react": "^4.1.4"
},
"dependencies": {
"@babel/core": "^7.2.2",
"babel-loader": "^8.0.4",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"storybook-addon-material-ui": "^0.8.11"
}
}

/// .storybook/config.js
import { configure } from '@storybook/react';

function loadStories() {
require('../stories/index.js');
// You can require as many stories as you need.
}
configure(loadStories, module);

add addon
import 'storybook-addon-material-ui/register';

after that storybook cant starting

what did i do wrong?

[usulpro]

Hi
You need to use the "storybook-addon-material-ui@0.9.0-alpha.16. It's the latest version

[SokolovAlex]

I try both
"storybook-addon-material-ui": "^0.9.0-alpha.16"
and
"storybook-addon-material-ui": "^0.8.11"

same result

[usulpro]

@SokolovAlex Ok, I'll check it, thanks for reporting this

[usulpro]

note to myself storybookjs/storybook#4995

[usulpro]

@SokolovAlex At this moment the best workaround is to downgrade Storybook to v4.0.9

you can check out https://github.com/react-theming/create-material-ui-app with working dependencies

[alistair-hmh]

@usulpro - just out of interest? Why does material ui register break with the new Storybook React?

The frustrating thing here is that I can't use @storybook/react@v4.0.9 because my app was created with create-react-app@2.1.1 - which no longer uses webpack.config.dev in react-scripts.

[usulpro]

Hi @alistair-hmh
I didn't dig but looks like it transpiles into something incompatible. Possible Babel updating would help. Here is a working example https://github.com/storybooks/addon-development-kit/tree/version-1

[SKCrawford]

Has any progress been made towards resolving this issue? I cannot downgrade storybook because of create-react-app. Otherwise, is there any other (simple) way to provide the theme manually?

Edit: I've answered my own question. For anyone using material-ui@next (currently 4.0.0-alpha.1), wrap the targeted component like so:

import { ThemeProvider } from '@material-ui/styles';

import { theme } from './wherever';

storiesOf('Component', module)
  .addDecorator(story => (
    <ThemeProvider theme={theme}>{story()}</ThemeProvider>
  ))      
  .add('default', () => <Component /* prop stuff */ />)
  .add('', () => <></>);

For the stable branch, I believe it's still appropriate to use MuiThemeProvider from @material-ui/core. I was using the wrong provider, which disguised my issue.

[SleepWalker]

This may be due to add-on, because starting from 4.1.x you can not import any core node modules in addons. This will lead to compile error, but due to storybookjs/storybook#5584 it will hang without showing error.
You can apply patch manually simply to see an actual error, or try to test with storybook 5, where the bug with hidden errors is fixed

[usulpro]

Solved in #92