Storybook build failing because of typescript in monorepo

Current Behavior

1. Getting semicolon missing error only on publish to storybook-to-ghpages step.

Expected Behavior

Should deploy the stories to GitHub pages.

Steps to Reproduce

1. Create a new nx workspace.
2. Create two new react libraries using nx console vs code extension.
3. Running storybook locally works fine using nx run project-name:storybook.
4. When trying to deploy to github pages using npx -p @storybook/storybook-deployer storybook-to-ghpages you will get missing semicolon error.

You can also watch this youtube video to see how to reproduce: https://www.youtube.com/watch?v=c323HOuFKkA

Our package.json at the root:

{
  "name": "cxc-react-monorepo",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "prepare": "husky install",
    "start": "nx serve",
    "build": "nx run-many --target=build --all",
    "build:icons": "nx run cxc-react-icons:build-icons",
    "test": "nx run-many --target=test --all",
    "graph": "nx graph",
    "lint": "nx workspace-lint && nx lint",
    "e2e": "nx e2e",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:graph": "nx affected:graph",
    "commit": "git cz",
    "version": "lerna version",
    "version:beta": "lerna version --conventional-prerelease",
    "release:ci": "lerna publish from-package"
  },
  "dependencies": {
    "@ford/ford-design-system": "^18.3.0",
    "axios": "^0.27.2",
    "clsx": "^1.1.1",
    "core-js": "^3.6.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-hook-form": "^7.31.3",
    "regenerator-runtime": "0.13.7",
    "tslib": "^2.3.0",
    "valtio": "^1.6.0"
  },
  "devDependencies": {
    "@nrwl/cli": "14.1.4",
    "@nrwl/cypress": "14.1.4",
    "@nrwl/eslint-plugin-nx": "14.1.4",
    "@nrwl/jest": "14.1.4",
    "@nrwl/linter": "14.1.4",
    "@nrwl/react": "14.1.4",
    "@nrwl/web": "14.1.4",
    "@nrwl/workspace": "14.1.4",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^14.2.0",
    "@types/jest": "27.4.1",
    "@types/node": "16.11.7",
    "@types/react": "18.0.8",
    "@types/react-dom": "18.0.3",
    "@types/react-modal": "^3.13.1",
    "@typescript-eslint/eslint-plugin": "~5.18.0",
    "@typescript-eslint/parser": "~5.18.0",
    "babel-jest": "27.5.1",
    "chalk": "^2.4.1",
    "cypress": "^9.1.0",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "~8.12.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-react": "7.29.4",
    "eslint-plugin-react-hooks": "4.5.0",
    "husky": "^8.0.1",
    "jest": "27.5.1",
    "lerna": "^4.0.0",
    "nx": "14.1.4",
    "prettier": "^2.5.1",
    "react-modal": "^3.15.1",
    "react-test-renderer": "^18.1.0",
    "shelljs": "^0.8.2",
    "svgr": "^1.10.0",
    "ts-jest": "27.1.4",
    "ts-node": "9.1.1",
    "typescript": "~4.6.2"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

Failure Logs

RROR in 
src/stories/Button.stories.tsx
  Line 13:2:  Parsing error: Missing semicolon

  11 |     backgroundColor: { control: 'color' },
  12 |   },
> 13 | } as Meta;
     |  ^
  14 |
  15 | const Template: Story<ButtonProps> = (args) => <Button {...args} />;
  16 |

Environment

nx : 14.1.9 @nrwl/angular : Not Found @nrwl/cypress : 14.1.9 @nrwl/detox : Not Found @nrwl/devkit : 14.1.9 @nrwl/eslint-plugin-nx : 14.1.9 @nrwl/express : Not Found @nrwl/jest : 14.1.9 @nrwl/js : 14.1.9 @nrwl/linter : 14.1.9 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/nx-cloud : Not Found @nrwl/nx-plugin : Not Found @nrwl/react : 14.1.9 @nrwl/react-native : Not Found @nrwl/schematics : Not Found @nrwl/storybook : 14.1.9 @nrwl/web : 14.1.9 @nrwl/workspace : 14.1.4 typescript : 4.6.4 rxjs : 6.6.7

[mandarini]

Hey all! I’m working on it!!! 😄

[rishabhmhjn]

I solved this issue 2 days ago by putting the following file in the library or app’s .storybook folder that imports other library components.

apps/checkout/.storybook/.babelrc.json

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ],

  "plugins": []
}