nx: Storybook build failing because of typescript in monorepo
Current Behavior
- Getting semicolon missing error only on publish to storybook-to-ghpages step.
Expected Behavior
Should deploy the stories to GitHub pages.
Steps to Reproduce
- Create a new
nx workspace. - Create two new react libraries using nx console vs code extension.
- Running storybook locally works fine using
nx run project-name:storybook. - When trying to deploy to github pages using
npx -p @storybook/storybook-deployer storybook-to-ghpagesyou will getmissing 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
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 1
- Comments: 19 (12 by maintainers)
I solved this issue 2 days ago by putting the following file in the library or app’s
.storybookfolder that imports other library components.Hey all! I’m working on it!!! 😄
Next minor version, I should say. Best case scenario, next patch!
@mandarini
I have the same problem.
I reproduced this. https://github.com/hayawata3626/nx-next-storybook
After
nx run next-app:storybook, the error is occured.Perfect, thanks. I’ll look at it at some point! 😄
@mandarini Thanks for getting back to me! Sorry. I just pushed it!