title: An import path cannot end with a '.ts' extension. Consider importing 'src/theme.js'
body: <p>So this error has been a bit of a mystery to me and I'm having trouble figuring out how to resolve it.</p>
  <p>I have a <code>theme.ts</code> file that more or less looks like this below:</p>
  <pre><code>import { AgnosticStyles, ThemeParameters } from 'styled-components';
  import { createTheme } from '@material-ui/core/styles';
  
  const agnosticStyles: AgnosticStyles = {
    font: {
      weight: {
        light: '300',
        normal: '400',
        bold: '600',
      },
    },
  };
  ...
  // more themes
  
  const defaultTheme = {
    lightTheme,
    darkTheme,
  };
  
  export default defaultTheme;
  </code></pre>
  <p>in my <code>Button.stories.txs</code> file, when I try to import it <em>the same way I import everything else</em>... I get the following error in storybook:</p>
  <p><a href="https://i.stack.imgur.com/tWut8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tWut8.png" alt="enter image description here" /></a></p>
  <p>Okay, so I gues I need to then write <code>theme.ts</code>, however that does two things. One, it creates the error shown below and two, it breaks the intellisense that comes with VsCode TS.</p>
  <p><a href="https://i.stack.imgur.com/6TnSP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6TnSP.png" alt="enter image description here" /></a></p>
  <hr />
  <p>How can I fix my <code>Button.stories.tsx</code> file so the import path error with go away and I can just import as <code>src/theme</code>?</p>