storybook with typescript does not referring to tsx file as typescript file - 'Parsing error: Missing semicolon'

Question

I just can't understand why it happened, I tried to fix it for few weeks and just moved back to javascript on my stories.

here's the branch which reproduces the bug. this is the full project. inside at ./examples you will see demo app running with react-react-app with typescript and storybook. inside you will see src/stories/Xarrow.stories.tsx which when running yarn storybook throwing Parsing error: Missing semicolon. just like as I tried to put typescript inside javascript file.

I'm using storybook v6.2.9 which supposed to support typescript out of the box since v6.0.2beta

here's a gitpod for quick preview: https://gitpod.io/#https://github.com/Eliav2/react-xarrows/blob/storybook-typescript-bug wait until dependency install finishes(you will see example preview popup at :3000). then open new terminal and cd ./example and run yarn storybook. you will see the exact same errors.

This problem is here for few weeks and I'm not quite sure why.

any idea? I've already tried to delete and reinstall storybook but this did not work.

notes:

because of dependency conflict between babel-loader and react-scripts i had to do a trick - .env file with SKIP_PREFLIGHT_CHECK=true to allow dependency conflict but I'm don't really know if this is related to my problem.
the full project is included just for the project files like package.json and tsconfig.json files.
there is tsconfig.json in ./ and also in ./example

any ideas would be very appreciated!

score 0 · Accepted Answer · answered Jun 21 '21 at 10:42

This was problem with eslint. i had .estlintrc config file at the root dir which was not suited for the demo project.

i updated the .eslintrc file to support typescript(like explained here) that I used and the error was gone.

{
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "import",
    "@typescript-eslint"
  ],
  "rules": {
    // turn on errors for missing imports
    "import/no-unresolved": "error"
  },
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [
        ".ts",
        ".tsx"
      ]
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
        // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
      },
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "parserOptions": {
    "ecmaVersion": 2021
  },
  "env": {
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

storybook with typescript does not referring to tsx file as typescript file - 'Parsing error: Missing semicolon'

1 Answers1