title: Module not found: Error: Can't resolve '@emotion/styled/base' when running story book
body: <p>I recently installed Storybook to my project</p>
  <p>Dependencies and Dev Dependencies below:</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;@emotion/react&quot;: &quot;^11.1.4&quot;,
      &quot;@emotion/styled&quot;: &quot;^11.0.0&quot;,
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.34&quot;,
      &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.2&quot;,
      &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.14&quot;,
      &quot;@hot-loader/react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;node-sass&quot;: &quot;^5.0.0&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-content-loader&quot;: &quot;^6.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-hot-loader&quot;: &quot;^4.13.0&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.12.10&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.12.11&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.12.10&quot;,
      &quot;@commitlint/cli&quot;: &quot;^11.0.0&quot;,
      &quot;@commitlint/config-conventional&quot;: &quot;^11.0.0&quot;,
      &quot;@emotion/babel-plugin&quot;: &quot;^11.1.2&quot;,
      &quot;@emotion/babel-preset-css-prop&quot;: &quot;^11.0.0&quot;,
      &quot;@emotion/jest&quot;: &quot;^11.1.0&quot;,
      &quot;@emotion/styled-base&quot;: &quot;^11.0.0&quot;,
      &quot;@storybook/addon-actions&quot;: &quot;^6.1.15&quot;,
      &quot;@storybook/addon-essentials&quot;: &quot;^6.1.15&quot;,
      &quot;@storybook/addon-links&quot;: &quot;^6.1.15&quot;,
      &quot;@storybook/preset-scss&quot;: &quot;^1.0.3&quot;,
      &quot;@storybook/react&quot;: &quot;^6.1.15&quot;,
      &quot;@wojtekmaj/enzyme-adapter-react-17&quot;: &quot;^0.4.1&quot;,
      &quot;babel-eslint&quot;: &quot;^10.1.0&quot;,
      &quot;babel-jest&quot;: &quot;^26.6.3&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
      &quot;babel-plugin-emotion&quot;: &quot;^11.0.0&quot;,
      &quot;babel-plugin-require-context-hook&quot;: &quot;^1.0.0&quot;,
      &quot;clean-webpack-plugin&quot;: &quot;^3.0.0&quot;,
      &quot;css-loader&quot;: &quot;^5.0.1&quot;,
      &quot;enzyme&quot;: &quot;^3.11.0&quot;,
      &quot;enzyme-to-json&quot;: &quot;^3.6.1&quot;,
      &quot;eslint&quot;: &quot;^7.18.0&quot;,
      &quot;eslint-config-prettier&quot;: &quot;^7.1.0&quot;,
      &quot;eslint-loader&quot;: &quot;^4.0.2&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.22.1&quot;,
      &quot;eslint-plugin-jest&quot;: &quot;^24.1.3&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.22.0&quot;,
      &quot;eslint-plugin-react-hooks&quot;: &quot;^4.2.0&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^5.0.0-alpha.3&quot;,
      &quot;husky&quot;: &quot;^4.3.8&quot;,
      &quot;jest&quot;: &quot;^26.6.3&quot;,
      &quot;jest-prop-type-error&quot;: &quot;^1.1.0&quot;,
      &quot;prettier&quot;: &quot;^2.2.1&quot;,
      &quot;react-test-renderer&quot;: &quot;^17.0.1&quot;,
      &quot;sass&quot;: &quot;^1.32.4&quot;,
      &quot;sass-loader&quot;: &quot;^10.1.1&quot;,
      &quot;standard-version&quot;: &quot;^9.1.0&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;terser-webpack-plugin&quot;: &quot;^5.1.1&quot;,
      &quot;url-loader&quot;: &quot;^4.1.1&quot;,
      &quot;webpack&quot;: &quot;^5.15.0&quot;,
      &quot;webpack-bundle-analyzer&quot;: &quot;^4.3.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.3.1&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.2&quot;
    },
  </code></pre>
  <p>I built a simple button component that uses <code>@emotion/styled</code> for styling. I would like to add a story for this button, however, when running <code>npm run storybook</code> i get the following error</p>
  <pre><code>Module not found: Error: Can't resolve '@emotion/styled/base' in '/directory/to/Button'
  </code></pre>
  <p>This is what I am importing inside my button component:</p>
  <pre><code>import styled from '@emotion/styled';
  import { useTheme } from '@emotion/react';
  
  const StyledButton = styled.button`
    cursor: pointer;
    font-size: ${({ fontSize }) =&gt; fontSize};
  `;
  </code></pre>
  <p>This is happening to other components that use <code>@emotion/styled</code> as well. Am i missing an extra dependency or do I need to add any presets to .babelrc file?</p>
  <p>.babelrc:</p>
  <pre><code>{
    &quot;presets&quot;: [
      &quot;@babel/preset-env&quot;,
      &quot;@babel/preset-react&quot;,
      &quot;@emotion/babel-preset-css-prop&quot;
    ],
    &quot;env&quot;: {
      &quot;test&quot;: {
        &quot;plugins&quot;: [&quot;require-context-hook&quot;]
      }
    },
    &quot;plugins&quot;: [&quot;react-hot-loader/babel&quot;, &quot;@emotion&quot;]
  }
  
  </code></pre>