Module not found: Error: Can't resolve '@storybook/theming' after migrating from Storybook 6.5.16 to 7.6.5

[christianhoward]

Summary

Recently, I used the automigration script to migrate from 6.5.16 to 7.6.5. In doing so, I had to make one manual migration for decorators and move from this to this:

// Storybook 6.5.16 code in my preview.js file
addDecorator((story) => (
  <ThemeProvider theme={{ isDesktopEnabledFF: true }}>
    <GlobalStyles />
    {story()}
  </ThemeProvider>
));

// Storybook 7.6.5 code in my preview.js file
decorators: [
  (Story) => (
    <ThemeProvider theme={{ isDesktopEnabledFF: true }}>
      <GlobalStyles />
      {Story()}
    </ThemeProvider>
  ),
],

Once completing the migration, I ran into a number of autodoc errors that needed to be resolve via removing my node modules and re-installing with npm. Upon doing that, I encountered this error ERROR in ../../node_modules/@storybook/components/dist/esm/Color-f953d088.js 47:0-44 Module not found: Error: Can't resolve '@storybook/theming' in '/Users/choward/Development/design-system/node_modules/@storybook/components/dist/esm' for a number of different components in the @storybook/components/dist/esm directory. @storybook/theming 7.6.5 is installed

Additional information

[email protected]

main.js after migration script

import { dirname, join } from "path";

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],

  addons: [
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-interactions"),
    getAbsolutePath('@storybook/addon-themes')
  ],

  framework: {
    name: getAbsolutePath("@storybook/react-webpack5"),
    options: {}
  },

  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: false,
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },

  docs: {
    //👇 See the table below for the list of supported options
    autodocs: 'tag',
    defaultName: 'Documentation',
  },
};

function getAbsolutePath(value) {
  return dirname(require.resolve(join(value, "package.json")));
}

preview.js after migration and debugging

const preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      expanded: true,
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
      sort: 'requiredFirst',
    },
    viewport: {
      viewports: {
        ...MINIMAL_VIEWPORTS,
        wisetackDefault: {
          name: '375px Mobile (Default)',
          styles: {
            width: '375px',
            height: '801px',
          },
        },
      },
    },
  },
  decorators: [
    (Story) => (
      <ThemeProvider theme={{ isDesktopEnabledFF: true }}>
        <GlobalStyles />
        {Story()}
      </ThemeProvider>
    ),
  ],
};

export default preview;

Create a reproduction

No response

[christianhoward]

Seemed to be an issue from where I installed the packages from in our monorepo. Ooops 😬

[Marcel-Konjata]

Seemed to be an issue from where I installed the packages from in our monorepo. Ooops 😬

Can you tell me what was solution / problem? I am facing today same issue exactly with the same or simillar config and exact same error, can't figure out what is the problem