After upgrading TypeScript from 3.9.6 to 4.4.4, our storybook breaks with the several errors similar to this one:

ERROR in ../pilot-mock-service/dist/mocks/image.js 3:7
Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { generateRandomInteger, generateRandomString, removeNullValues } from './mock.utils';
| export class ImagePilotData {
>     alt;
|     caption;
|     credit;
 @ ../pilot-mock-service/dist/mocks/index.js 61:0-41 61:0-41
 @ ./stories/pages/qa/Post Page/postPagePrague.stories.tsx
 @ ./stories sync \.stories\.tsx$
 @ ./.storybook/preview.js
 @ multi ../node_modules/@storybook/core/dist/server/common/polyfills.js ../node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

Some details about our project that might be relevant:

• We're using:
  • yarn workspaces
  • Storybook 5.3.19 (@storybook/addon-info @storybook/addon-knobs @storybook/addon-links @storybook/addon-viewport @storybook/addons @storybook/react)
  • React 16.13
  • Webpack 4
  • Babel 7
  • eslint 6

Dependencies in the problematic (yarn) workspace:

{
    "dependencies": {
        "@babel/polyfill": "^7.10.1",
        "aphrodite": "^2.2.3",
        "axios": "^0.19.0",
        "body-parser": "^1.18.3",
        "consent-string": "^1.4.1",
        "current-device": "^0.10.0",
        "iframe-resizer": "^4.3.2",
        "intersection-observer": "^0.7.0",
        "luxon": "^1.22.0",
        "mm-client-core": "1.0.0",
        "mm-theme-configuration": "1.0.0",
        "mm-ui-components": "1.0.0",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-helmet": "^6.1.0",
        "react-redux": "^7.1.1",
        "redux": "^4.0.0",
        "redux-thunk": "^2.3.0",
        "traffic-source-analyzer": "1.0.0",
        "web-vitals": "^2.1.4"
    },
    "devDependencies": {
        "@babel/core": "^7.10.2",
        "@babel/plugin-proposal-class-properties": "^7.10.1",
        "@babel/plugin-proposal-optional-chaining": "^7.16.7",
        "@babel/preset-env": "^7.10.2",
        "@babel/preset-react": "^7.10.1",
        "@babel/preset-typescript": "^7.10.1",
        "@storybook/addon-actions": "^5.3.19",
        "@storybook/addon-info": "^5.3.21",
        "@storybook/addon-knobs": "^5.3.19",
        "@storybook/addon-links": "^5.3.19",
        "@storybook/addon-viewport": "^5.3.19",
        "@storybook/addons": "^5.3.19",
        "@storybook/react": "^5.3.19",
        "@types/iframe-resizer": "^3.5.8",
        "@types/luxon": "^1.21.0",
        "@types/nock": "^11.1.0",
        "@types/react-redux": "^7.1.0",
        "@types/storybook__addon-info": "^5.2.4",
        "@typescript-eslint/eslint-plugin": "^2.10.0",
        "@typescript-eslint/parser": "^2.10.0",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.1.0",
        "copy-webpack-plugin": "^5.0.5",
        "core-js": "^3.4.7",
        "enzyme": "^3.7.0",
        "enzyme-adapter-react-16": "^1.6.0",
        "eslint": "^6.7.2",
        "eslint-config-mm": "git https://github.com/FTBpro/eslint-config-mm.git#v3.1",
        "eslint-loader": "3.0.2",
        "jest": "^24.0.0",
        "jest-junit": "^10.0.0",
        "mm-pilot-mock": "1.0.0",
        "nock": "^11.7.0",
        "npm-run-all": "^4.1.3",
        "terser-webpack-plugin": "^2.2.1",
        "typescript": "4.4.4",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.1.4",
        "webpack-merge": "^4.1.3",
        "webpack-node-externals": "^1.7.2"
    }
}

I've tried virtually every possible solution I could find, to no avail. Any ideas would be greatly appreciated.

CodePudding user response：

Switch to storybook v6.1 or above.

Latest is v6.7, v6.6 or v6.5 would fix the issue.