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

user_10349152 0
Viewed 3996

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:

enter image description here

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.

enter image description here

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?

storybook webpack next.js reactjs
1 Answers

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

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