An import path cannot end with a '.ts' extension. Consider importing 'src/theme.js'

Question

So this error has been a bit of a mystery to me and I'm having trouble figuring out how to resolve it.

I have a theme.ts file that more or less looks like this below:

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;

in my Button.stories.txs file, when I try to import it the same way I import everything else... I get the following error in storybook:

Okay, so I gues I need to then write theme.ts, however that does two things. One, it creates the error shown below and two, it breaks the intellisense that comes with VsCode TS.

---

How can I fix my Button.stories.tsx file so the import path error with go away and I can just import as src/theme?

Answer 1

Include your *.tsx files in your tsconfig.json:

{
  "compilerOptions": {
    // ....
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}