TypeError: (0 , _coreCommon.getStorybookBabelConfig) is not a function

[nathanredblur]

Describe the bug
on upgrade storybook from 6.3.8 to 6.4.13 I get this error

yarn storybook
yarn run v1.22.15
$ start-storybook -p 6006
info @storybook/react v6.4.13
info
info => Loading presets
WARN Unexpected webpack version in builder-webpack4
WARN - Received: 4
WARN - Expected: 4
WARN
WARN For more info: https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#troubleshooting
ERR! TypeError: (0 , _coreCommon.getStorybookBabelConfig) is not a function
ERR!     at /lernaMonoRepo/mewtwo/node_modules/@storybook/react/node_modules/@storybook/core-server/dist/cjs/presets/common-preset.js:29:82
ERR!     at loadCustomBabelConfig (/lernaMonoRepo/mewtwo/node_modules/@storybook/react/node_modules/@storybook/core-common/dist/cjs/utils/load-custom-babel-config.js:110:10)
ERR!     at Object.babel (/lernaMonoRepo/mewtwo/node_modules/@storybook/react/node_modules/@storybook/core-server/dist/cjs/presets/common-preset.js:28:48)
ERR!     at /lernaMonoRepo/mewtwo/node_modules/@storybook/react/node_modules/@storybook/core-common/dist/cjs/presets.js:274:28
ERR!     at processTicksAndRejections (internal/process/task_queues.js:95:5)
ERR!  TypeError: (0 , _coreCommon.getStorybookBabelConfig) is not a function
ERR!     at /lernaMonoRepo/mewtwo/node_modules/@storybook/react/node_modules/@storybook/core-server/dist/cjs/presets/common-preset.js:29:82
ERR!     at loadCustomBabelConfig (/lernaMonoRepo/mewtwo/node_modules/@storybook/react/node_modules/@storybook/core-common/dist/cjs/utils/load-custom-babel-config.js:110:10)
ERR!     at Object.babel (/lernaMonoRepo/mewtwo/node_modules/@storybook/react/node_modules/@storybook/core-server/dist/cjs/presets/common-preset.js:28:48)
ERR!     at /lernaMonoRepo/mewtwo/node_modules/@storybook/react/node_modules/@storybook/core-common/dist/cjs/presets.js:274:28
ERR!     at processTicksAndRejections (internal/process/task_queues.js:95:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

To Reproduce
I just upgrade my version manually and run with my regular configuration.

from this

"@storybook/addon-actions": "^6.3.8",
    "@storybook/addon-essentials": "^6.3.8",
    "@storybook/addon-links": "^6.3.8",
    "@storybook/react": "^6.3.8",

to this

"@storybook/addon-actions": "^6.4.13",
    "@storybook/addon-essentials": "^6.4.13",
    "@storybook/addon-links": "^6.4.13",
    "@storybook/react": "^6.4.13",

Because npx sb@next automigrate didn't do anything.

Trying to find the problem, I disable all configuration files and stories except main.js and comment all, but I get the same error.

module.exports = {
  // stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  // addons: [
  //   '@storybook/addon-links',
  //   '@storybook/addon-essentials',
  //   'storybook-addon-apollo-client',
  //   'storybook-react-i18next',
  // ],
};

System

Environment Info:

  System:
    OS: macOS 12.0.1
    CPU: (8) x64 Apple M1
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v14.17.6/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Edge: 96.0.1054.62
    Firefox: 95.0
    Safari: 15.1
  npmPackages:
    @storybook/addon-essentials: ^6.4.13 => 6.4.13
    @storybook/addon-links: ^6.4.13 => 6.4.13

Additional context
I have a mono repo that is using lerna and different versions of storybook are installed in other folders.

[nathanredblur]

Just like context, I wanted to upgrade because I notice that when 'storybook-addon-apollo-client' is active, my component do two renders, and if I activate 'storybook-react-i18next' my component do 4 unnecessary renders.

That is a problem, because I'm using MockedProvider and when a component do more renders than I'm expecting, my query is executed more than once, so I need to duplicate fake query mocks for each render.

example:

component

import WORLD_QUERY from './worldQuery.graphql';

const Hello = () => {
  const world = useQuery(WORLD_QUERY)
  return <div>{world}</div>
}

story

import WORLD_QUERY from './worldQuery.graphql';
const apolloMock = {
    request: { query: WORLD_QUERY },
    result: {
      data: "world",
    }
}

const Template = (args) => <Component {...args} />;

export const Default = Template.bind({});
Default.parameters = {
  apolloClient: {
    mocks: [
       // one request for each render generated 
       // on use 'storybook-addon-apollo-client' and 'storybook-react-i18next' addons
       apolloMock,
       apolloMock,
       apolloMock,
       apolloMock,
    ],
  },
};

I not have a solution, but I wanted to upgrade storybook and check if that helps.

[khylerlin]

I have encountered this error before, and I found out is that npm or yarn has installed the wrong version of @storybook/core-common and @storybook/core-server, so I delete all the node_modules and install it again, and the errors go away.

[nathanredblur]

thank you, I will try.

I'm working in a mono repo, another folders in this repo have a older versions of storybook.
do I need to update all the other versions in order to make it works? (it's hard to do because the other storybook is "^6.2.9")

[khylerlin]

I am also working on a mono repo, while I only faced this issue is when I upgrade all other folders(or packages) that will happened. single folder upgrade, for me, do not have that issue.

my suggestion is delete the root node_module and install it again from the root.

[nathanredblur]

Thank you @khylerlin, I solved my problem, thank you for your help