Issues with Latest Chromatic and Storybook

[kthanesh]

Chromatic Version - Chromatic CLI v10.0.0 Storybook Version - Storybook 7.6.3 for React

Error -

info => Building manager.. ✘ [ERROR] Could not resolve "react-syntax-highlighter/dist/esm/styles/hljs/github" node_modules/@whitespace/storybook-addon-html/dist/esm/components/PanelContent.js:3:18: 3 │ ... style from "react-syntax-highlighter/dist/esm/styles/hljs/github"; ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ You can mark the path "react-syntax-highlighter/dist/esm/styles/hljs/github" as external to exclude it from the bundle, which will remove this error. ✘ [ERROR] Could not resolve "react-syntax-highlighter" node_modules/@whitespace/storybook-addon-html/dist/esm/components/SyntaxHighlighter.js:20:35: 20 │ import ReactSyntaxHighlighter from "react-syntax-highlighter"; ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~ You can mark the path "react-syntax-highlighter" as external to exclude it from the bundle, which will remove this error. Error: Build failed with 2 errors: node_modules/@whitespace/storybook-addon-html/dist/esm/components/PanelContent.js:3:18: ERROR: Could not resolve "react-syntax-highlighter/dist/esm/styles/hljs/github" node_modules/@whitespace/storybook-addon-html/dist/esm/components/SyntaxHighlighter.js:20:35: ERROR: Could not resolve "react-syntax-highlighter" at failureErrorWithLog (./node_modules/esbuild/lib/main.js:1649:15) at ./node_modules/esbuild/lib/main.js:1058:25 at runOnEndCallbacks (./node_modules/esbuild/lib/main.js:1484:45) at buildResponseToResult (./node_modules/esbuild/lib/main.js:1056:7) at ./node_modules/esbuild/lib/main.js:1085:16 at responseCallbacks. (./node_modules/esbuild/lib/main.js:703:9) at handleIncomingPacket (./node_modules/esbuild/lib/main.js:762:9) at Socket.readFromStdout (./node_modules/esbuild/lib/main.js:679:7) at Socket.emit (node:events:513:28) at addChunk (node:internal/streams/readable:315:12)

[jeppester]

The issue is that storybook-addon-html relies on react-syntax-highlighter as a peer dependency.

Until recently that worked fine because react-syntax-highlighter was a (non-peer) dependency of @storybook/addon-storysource. That has now changed however, resulting in the error you are facing.

Luckily it is very easy to fix by simply adding react-syntax-highlighter to you project.

Since I'm not the author of storybook-addon-html I'm not entirely certain why react-syntax-highlighter is not a regular dependency, but it would perhaps make sense to change that.