Storybook + MUI5 + Nextjs - theme issue?

[eoinpayne]

I finally managed to get SB working with mui4, but after upgrading the mui5, i can't get it going.

• installed with Npx sb init —builder webpack5
• updated sb main.js as per
• Complained that "compressible' module couldn't be found so installed that.
• Ran npm i core-js@3.8.2 as gives out about es-weak-map + others not found.
• Added web pack 5 as a dev dependency npm install webpack@5 --save-dev
• npx sb@next upgrade --prerelease.

plus literally every other suggestion i came across online, which you can see in these files (leaving some comments in so you can see what else i tried in some cases)

.storybook>main.js

const path = require('path');
const toPath = filePath => path.join(process.cwd(), filePath);

module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions',
        // 'storybook-addon-designs',
        // 'storybook-anima',
        // '@storybook/addon-actions',
        {
            name: '@storybook/addon-docs',
            options: {
                configureJSX: true,
                babelOptions: {},
                sourceLoaderOptions: null,
                transcludeMarkdown: true,
            },
        },
        '@storybook/builder-webpack5',
    ],
    framework: '@storybook/react',
    core: {
        // builder: '@storybook/builder-webpack5',
        builder: 'webpack5',
    },
    typescript: { reactDocgen: false },
    features: {
        emotionAlias: false,
        modernInlineRendering: true,
    },

    webpackFinal: async (config, { configType }) => {
        config.resolve.modules = [path.resolve(__dirname, '..', '.'), 'node_modules'];
        config.resolve.alias = {
            ...config.resolve.alias,
            '@emotion/core': toPath('node_modules/@emotion/react'),
            'emotion-theming': toPath('node_modules/@emotion/react'),
            // 'core-js/modules/es.weak-map.js': toPath('core-js/modules/es6.weak-map.js'),
        };

        return config;
        // return {
        //     ...config,
        //     resolve: {
        //         ...config.resolve,
        //         alias: {
        //             ...config.resolve.alias,
        //             '@emotion/core': toPath('node_modules/@emotion/react'),
        //             'emotion-theming': toPath('node_modules/@emotion/react'),
        //         },
        //     },
        // };
    },
};

.package.json

{    "dependencies": {
        "@auth0/nextjs-auth0": "^1.7.0",
        "@emotion/react": "^11.8.2",
        "@emotion/styled": "^11.8.1",
        "@material-ui/core": "^4.12.0",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/lab": "^4.0.0-alpha.60",
        "@mui/icons-material": "^5.5.1",
        "@mui/lab": "^5.0.0-alpha.75",
        "@mui/material": "^5.5.3",
        "@mui/styles": "^5.5.3",
        "core-js": "^3.8.2",
        "cors": "^2.8.5",
        "next": "^12.1.4",
        "react": "latest",
    },
    "devDependencies": {
        "@storybook/addon-actions": "^6.5.0-alpha.59",
        "@storybook/addon-essentials": "^6.5.0-alpha.59",
        "@storybook/addon-interactions": "^6.5.0-alpha.59",
        "@storybook/addon-links": "^6.5.0-alpha.59",
        "@storybook/builder-webpack5": "^6.5.0-alpha.59",
        "@storybook/manager-webpack5": "^6.5.0-alpha.59",
        "@storybook/node-logger": "^6.5.0-alpha.59",
        "@storybook/preset-create-react-app": "^4.1.0",
        "@storybook/react": "^6.5.0-alpha.59",
        "@storybook/testing-library": "^0.0.9",
        "@svgr/webpack": "^6.2.1",
        "compressible": "^2.0.18",
        "webpack": "^5.72.0"
    },
    "eslintConfig": {
        "overrides": [
            {"files": ["**/*.stories.*"],
                "rules": {"import/no-anonymous-default-export": "off"}
            }]
    },
    "resolutions": {"@storybook/{app}/webpack": "^5"}
}

my Story

// import { ThemeProvider } from '@mui/styles';
import { ThemeProvider as MUIThemeProvider, createTheme } from '@mui/material/styles';
import { ThemeProvider } from 'emotion-theming';

import React from 'react';
//import theme from 'src/themes/theme.js';

// import DuplicateComponent from 'src/components/helpers/DuplicateComponent';
// import TickerTicket from 'src/components/modules/dashboard/TickerTicket';
import DataLanes from '.';

export default {
    title: 'components/common/dataDisplay/DataLanes',
    component: DataLanes,
};

export const Bare = () => (
    // <MUIThemeProvider theme={theme}>
    // <ThemeProvider theme={theme}>
        <DataLanes borderBottom>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </DataLanes>
    // </ThemeProvider>
    // </MUIThemeProvider>
);

My Component

import { Box } from '@mui/material';
import clsx from 'clsx';
import React from 'react';
import PropTypes from 'prop-types';
import useStyles from './styles';

export default function DataLanes(props) {
    const classes = useStyles();
    const { borderBottom, borderTop, className, children, ...others } = props;

    return (
        <Box
            className={clsx(classes.dataLanes, className, {
                borderBottom: borderBottom,
                borderTop: borderTop,
            })}
            {...others}
        >
            {children}
        </Box>
    );
}

its styling

import makeStyles from '@mui/styles/makeStyles';
const useStyles = makeStyles(theme => ({
    dataLanes: {
        width: '100%',
        background: theme.palette.background.paper,
        display: 'flex',
        paddingTop: theme.spacing(1),
        paddingBottom: theme.spacing(1),
        overflowY: 'auto',
        '& > * ': {
            flexGrow: 1,
            borderRight: `1px solid ${theme.palette.grey[300]}`,
        },

        '&.borderBottom': {
            borderBottom: `1px solid ${theme.palette.grey[300]}`,
        },
        '&.borderTop': {
            borderTop: `1px solid ${theme.palette.grey[300]}`,
        },
    },
}));

export default useStyles;

---

Any thoughts? It seems like it's the background: theme.palette.background.paper, in the style.js.

[CWSites]

Having the same issue with Storybook + MUI v5 + NX / React

[IanVS]

Do you see error messages in your terminal when building storybook, like Module not found: Error: Can't resolve './dist/esm/create'?

[eoinpayne]

In case it helps anyone else, i fixed it like this:

essentially,

import { ThemeProvider } from '@mui/styles';
import { createTheme } from '@mui/material/styles';
const theme = createTheme();

Then wrap your component in <ThemeProvider theme={theme}>

import React from 'react';

import { ThemeProvider } from '@mui/styles';
import { createTheme } from '@mui/material/styles';
import DuplicateComponent from 'src/components/helpers/DuplicateComponent';
import TickerTicket from 'src/components/modules/dashboard/TickerTicket';
import DataLanes from '.';

const theme = createTheme();
// theme = responsiveFontSizes(theme);

export default {
    title: 'components/common/dataDisplay/DataLanes',
    component: DataLanes,
};

export const Bare = () => (
    <ThemeProvider theme={theme}>
        <DataLanes borderBottom>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </DataLanes>
    </ThemeProvider>
);