Error Cannot find module 'babel-plugin-macros'

What version of vite are you using?

2.9.12

System info and storybook versions

System: OS: Windows 10 10.0.22000 CPU: (20) x64 12th Gen Intel® Core™ i7-12700K Binaries: Node: 16.13.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.18 - C:\Program Files\nodejs\yarn.CMD npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.22000.120.0), Chromium (102.0.1245.44) npmPackages: @storybook/addon-actions: ^6.5.9 => 6.5.9 @storybook/addon-essentials: ^6.5.9 => 6.5.9 @storybook/addon-interactions: ^6.5.9 => 6.5.9 @storybook/addon-links: ^6.5.9 => 6.5.9 @storybook/builder-vite: ^0.1.36 => 0.1.36 @storybook/react: ^6.5.9 => 6.5.9 @storybook/testing-library: ^0.0.13 => 0.0.13

Describe the Bug

Im using IONIC the new version with react implementation.

I’ve migrated from CRA to Vite and it still work like a charm.

But when i try to use storybook i can install it but if i try to run or build it throw this message:

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'babel-plugin-macros'
Require stack:
- D:\Perso Dev\studentz-app\node_modules\@storybook\core-common\dist\cjs\utils\babel.js
- D:\Perso Dev\studentz-app\node_modules\@storybook\core-common\dist\cjs\index.js
- D:\Perso Dev\studentz-app\node_modules\@storybook\core-server\dist\cjs\index.js
- D:\Perso Dev\studentz-app\node_modules\@storybook\react\node_modules\@storybook\core\dist\cjs\server.js
- D:\Perso Dev\studentz-app\node_modules\@storybook\react\node_modules\@storybook\core\server.js
- D:\Perso Dev\studentz-app\node_modules\@storybook\react\dist\cjs\server\build.js
- D:\Perso Dev\studentz-app\node_modules\@storybook\react\bin\build.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at r (D:\Perso Dev\studentz-app\node_modules\@storybook\core-common\dist\cjs\utils\babel.js:9:30)
    at getStorybookBabelConfig (D:\Perso Dev\studentz-app\node_modules\@storybook\core-common\dist\cjs\utils\babel.js:37:294)
    at Object.<anonymous> (D:\Perso Dev\studentz-app\node_modules\@storybook\core-common\dist\cjs\utils\es6Transpiler.js:10:64)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\Perso Dev\\studentz-app\\node_modules\\@storybook\\core-common\\dist\\cjs\\utils\\babel.js',
    'D:\\Perso Dev\\studentz-app\\node_modules\\@storybook\\core-common\\dist\\cjs\\index.js',
    'D:\\Perso Dev\\studentz-app\\node_modules\\@storybook\\core-server\\dist\\cjs\\index.js',
    'D:\\Perso Dev\\studentz-app\\node_modules\\@storybook\\react\\node_modules\\@storybook\\core\\dist\\cjs\\server.js',
    'D:\\Perso Dev\\studentz-app\\node_modules\\@storybook\\react\\node_modules\\@storybook\\core\\server.js',
    'D:\\Perso Dev\\studentz-app\\node_modules\\@storybook\\react\\dist\\cjs\\server\\build.js',
    'D:\\Perso Dev\\studentz-app\\node_modules\\@storybook\\react\\bin\\build.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[Arthurmtro]

My solution was to put this in the package.json:

  "overrides": {
    "babel-plugin-macros": "^3.0.1"
  },

[Arthurmtro]

Here is the result

studentz-app@0.0.1 D:\Perso Dev\studentz-app
└─┬ @storybook/addon-essentials@6.5.9
  └─┬ @storybook/core-common@6.5.9
    └── babel-plugin-macros@ invalid: "^3.0.1" from node_modules/@storybook/core-common

npm ERR! code ELSPROBLEMS
npm ERR! invalid: babel-plugin-macros@ D:\Perso Dev\studentz-app\node_modules\babel-plugin-macros

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\arthu\AppData\Local\npm-cache\_logs\2022-06-23T21_30_41_748Z-debug.log