build-storybook fails in Github Actions
Closed this issue · 3 comments
019aJ commented
Describe the bug
npm run --silent build-storybook fails in Github Actions with error
TS2786: 'ErrorBoundary' cannot be used as a JSX component.
If I run this manually it works. Problem appears only in Github Actions
I've tried ubuntu and macos runners with same result
All commands from log work correctly if I run them manually
System
(same in CI and localy)
storybook v6.4.22
Chromatic CLI v6.5.4
nodeVersion v16.15.0
npm v8.5.5
runner ubuntu-latest/macos-latest
This is my workflow chromatic.yml file:
name: 'Chromatic Deployment'
on: push
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- run: yarn
working-directory: ./lesson-11
- uses: chromaui/action@v1
with:
workingDir: ./lesson-11
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
token: ${{ secrets.GITHUB_TOKEN }}
env:
working-directory: ./lesson-11
LOG_LEVEL: 'debug'
Log
Run chromaui/action@v1
Chromatic CLI v6.5.4
https://www.chromatic.com/docs/cli
Authenticating with Chromatic
→ Connecting to https://index.chromatic.com
Collecting Storybook metadata
→ ; no supported addons found
Building your Storybook
→ Running command: npm run --silent build-storybook -- --output-dir /tmp/chromatic--1629-Kp3J1WhjwRgN
Using spawnParams: {
"client": "npm",
"clientVersion": "8.5.5",
"nodeVersion": "v16.15.0",
"platform": "linux",
"command": "npm",
"clientArgs": [
"run",
"--silent"
],
"scriptArgs": [
"build-storybook",
"--",
"--output-dir",
"/tmp/chromatic--1629-Kp3J1WhjwRgN"
]
}
Command failed with exit code 1: npm run --silent build-storybook -- --output-dir /tmp/chromatic--1629-Kp3J1WhjwRgN
info @storybook/react v6.4.22
info
info => Cleaning outputDir: /tmp/chromatic--1629-Kp3J1WhjwRgN
(node:1693) DeprecationWarning: --static-dir CLI flag is deprecated, see:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Copying static files: ./public => ./
info => Compiling manager..
info => Compiling preview..
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack5 setup
info => Manager built (30 s)
ERR! => Failed to build the preview
ERR! TS2786: 'ErrorBoundary' cannot be used as a JSX component.
ERR! Its instance type 'ErrorBoundary' is not a valid JSX element.
ERR! The types returned by 'render()' are incompatible between these types.
ERR! Type 'React.ReactNode' is not assignable to type 'import("/home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/@types/react-syntax-highlighter/node_modules/@types/react/index").ReactNode'.
ERR! Type '{}' is not assignable to type 'ReactNode'.
ERR! 46 | <div className={styles.scrollDiv} style={{ height: this.props.height }}>
ERR! 47 | {this.state.todos.map((todo) => (
ERR! > 48 | <ErrorBoundary key={"eb" + todo.id}>
ERR! | ^^^^^^^^^^^^^
ERR! 49 | <TodoInfo key={todo.id} todo={todo} />
ERR! 50 | </ErrorBoundary>
ERR! 51 | ))}
ERR! TS2786: 'ErrorBoundary' cannot be used as a JSX component.
ERR! Its instance type 'ErrorBoundary' is not a valid JSX element.
ERR! 48 | <div className={styles.header}>{this.props.user.name}</div>
ERR! 49 | {this.state.todoVisible ? (
ERR! > 50 | <ErrorBoundary>
ERR! | ^^^^^^^^^^^^^
ERR! 51 | <TodoCard
ERR! 52 | userId={this.props.user.id}
ERR! 53 | height={this.props.height - 30}
ERR! TS2786: 'ErrorBoundary' cannot be used as a JSX component.
ERR! Its instance type 'ErrorBoundary' is not a valid JSX element.
ERR! 6 | ReactDOM.render(
ERR! 7 | <React.StrictMode>
ERR! > 8 | <ErrorBoundary>
ERR! | ^^^^^^^^^^^^^
ERR! 9 | <Field />
ERR! 10 | </ErrorBoundary>
ERR! 11 | </React.StrictMode>,
ERR! Error: => Webpack failed, learn more with --debug-webpack
ERR! at /home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:200:62
ERR! at /home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/lib/HookWebpackError.js:68:3
ERR! at Hook.eval [as callAsync] (eval at create (/home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
ERR! at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
ERR! at Cache.shutdown (/home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/lib/Cache.js:150:23)
ERR! at /home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/lib/Compiler.js:1225:15
ERR! at Hook.eval [as callAsync] (eval at create (/home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR! at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
ERR! at Compiler.close (/home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/lib/Compiler.js:1218:23)
ERR! at /home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:199:20
ERR! at finalCallback (/home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/lib/Compiler.js:441:32)
ERR! at /home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/lib/Compiler.js:458:13
ERR! at Hook.eval [as callAsync] (eval at create (/home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:35:1)
ERR! at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
ERR! at onCompiled (/home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/lib/Compiler.js:456:21)
ERR! at /home/runner/work/nosova-otus-2022-03-react/nosova-otus-2022-03-react/lesson-11/node_modules/webpack/lib/Compiler.js:1196:17
tmeasday commented
Hi @019aJ -- it looks like you have multiple version of React installed which is causing a problem here. I'm not sure what the best solution is, but if it works on your local machine you might try reinstalling your lock file.
tmeasday commented
Sorry I should say @types/react. If it works differently in CI I would look at what happens to your yarn.lock on CI after you install.