Making react vite and storybook play nice

Another one of those reminder posts. I wanted to add storybook to a react app that I had created with vite. I was getting the following error

ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /home/bart/src/enra_v3/frontend/.storybook/main.js from /home/bart/src/enra_v3/frontend/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js not supported.
ERR! main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/bart/src/enra_v3/frontend/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
ERR! 

There is a whole thread of different ways of fixing this but this is the one that helped me most Issues Link

Basically Add a package.json file to the .storybook folder

{
  "type": "commonjs"
}

Boooom!!!!