Documentation for using react-cosmos with gatsby

[EliotSlevin]

Hi there,

I've been trying to configure react-cosmos to use in a gatsby website, with little success. I've changed the webpack config to gatsby's config, read the compilation section of the docs 10x but I'm still getting nowhere. The reality I picked Gatsby because I don't want to get involved in all the nitty details of webpack building etc. And I'm not even sure if I'm heading in the right direction.

In the docs there are examples of configuring cosmos to work with create-react-app, and next.js. It would be great if there could also be a section detailing using react-cosmos with Gatsby, with some examples.

I've tried several other component viewing libraries and failed to integrate them all (including Storybook) - so making cosmos an easy option for Gatsby users and react-cosmos would be very appealing.

Cheers

[ovidiuch]

Hi @EliotSlevin,

Indeed this would be valuable. I don't have any experience with Gatsby, but it would definitely help if you would share more details. Maybe I see something obvious or someone else will help. Eg. when you changed the webpack config to Gatsby's webpack config, did it make a difference? What does your Cosmos config look like and what do the terminal logs say? Are you getting any errors? Etc. If you can share your project it would be even better.

[EliotSlevin]

Here's is the simplest gatsby website example I could think of, attempted to be configured with react-cosmos. Instructions to run in the read-me. https://github.com/EliotSlevin/cosmos-gatsby-example

Notice I've tried to override the webpack config with gatsby's own webpack config in cosmos.config.js.

If you run cosmos without the config file I get back

$ cosmos
[Cosmos] See you at http://localhost:5000
[Cosmos] Using default webpack config
[Cosmos] Building webpack...
webpack built 548a5ab98bdcb7cb4ff9 in 1459ms
✖ ｢wdm｣: Hash: 548a5ab98bdcb7cb4ff9
Version: webpack 4.43.0
Time: 1459ms
Built at: 28/08/2020 12:13:24 pm
      Asset      Size  Chunks         Chunk Names
    main.js   2.5 MiB    main         main
main.js.map  2.78 MiB    main  [dev]  main
Entrypoint main = main.js main.js.map
[0] multi ./node_modules/react-cosmos/dist/plugins/webpack/client/reactDevtoolsHook.js ./node_modules/@skidding/webpack-hot-middleware/client.js?reload=true&overlay=false ./node_modules/react-cosmos/dist/plugins/webpack/client/index.js 52 bytes {main} [built]
[./node_modules/@skidding/webpack-hot-middleware/client-overlay.js] 2.17 KiB {main} [built]
[./node_modules/@skidding/webpack-hot-middleware/client.js?reload=true&overlay=false] 7.68 KiB {main} [built]
[./node_modules/@skidding/webpack-hot-middleware/process-update.js] 4.44 KiB {main} [built]
[./node_modules/core-js/features/array/find.js] 71 bytes {main} [built]
[./node_modules/core-js/features/array/includes.js] 75 bytes {main} [built]
[./node_modules/core-js/features/promise/index.js] 293 bytes {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/react-cosmos/dist/dom/index.js] 1.7 KiB {main} [built]
[./node_modules/react-cosmos/dist/plugins/webpack/client/errorOverlay/index.js] 292 bytes {main} [built]
[./node_modules/react-cosmos/dist/plugins/webpack/client/hmrErrorHandler.js] 317 bytes {main} [built]
[./node_modules/react-cosmos/dist/plugins/webpack/client/index.js] 1.01 KiB {main} [built]
[./node_modules/react-cosmos/dist/plugins/webpack/client/reactDevtoolsHook.js] 884 bytes {main} [built]
[./node_modules/react-cosmos/dist/plugins/webpack/client/userDeps.js] 327 bytes {main} [built]
[./node_modules/regenerator-runtime/runtime.js] 24 KiB {main} [built]
    + 252 hidden modules

ERROR in ./src/components/button/button.fixture.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/eliot/Desktop/cosmos-gatsby-example/src/components/button/button.fixture.jsx: Support for the experimental syntax 'jsx' isn't currently enabled (5:16):

  3 | import Button from './index.js';
  4 | 
> 5 | export default <Button>Hello cosmos!</Button>
    |                ^

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
    at Parser._raise (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/@babel/parser/lib/index.js:766:17)
    at Parser.raiseWithData (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/@babel/parser/lib/index.js:759:17)
    at Parser.expectOnePlugin (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/@babel/parser/lib/index.js:8981:18)
    at Parser.parseExprAtom (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/@babel/parser/lib/index.js:10276:22)
    at Parser.parseExprSubscripts (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/@babel/parser/lib/index.js:9844:23)
    at Parser.parseUpdate (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/@babel/parser/lib/index.js:9824:21)
    at Parser.parseMaybeUnary (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/@babel/parser/lib/index.js:9813:17)
    at Parser.parseExprOps (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/@babel/parser/lib/index.js:9683:23)
    at Parser.parseMaybeConditional (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/@babel/parser/lib/index.js:9657:23)
    at Parser.parseMaybeAssign (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/@babel/parser/lib/index.js:9620:21)
 @ ./node_modules/react-cosmos/dist/plugins/webpack/client/userDeps.js 7:46-140
 @ ./node_modules/react-cosmos/dist/plugins/webpack/client/index.js
 @ multi ./node_modules/react-cosmos/dist/plugins/webpack/client/reactDevtoolsHook.js ./node_modules/@skidding/webpack-hot-middleware/client.js?reload=true&overlay=false ./node_modules/react-cosmos/dist/plugins/webpack/client/index.js

If you run cosmos with that config, either as configPath or overridePath I get back

[Cosmos] See you at http://localhost:5000
[Cosmos] Using webpack config found at node_modules/gatsby/dist/utils/webpack.config.js
[Cosmos] Server crashed...

  (╯°□°)╯︵ ┻━┻

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at validateString (internal/validators.js:107:11)
    at Object.resolve (path.js:978:7)
    at Object.findConfig (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/browserslist/node.js:302:17)
    at getBrowsersList (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/gatsby/src/utils/browserslist.ts:25:31)
    at createWebpackUtils (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/gatsby/src/utils/webpack-utils.ts:134:29)
    at module.exports (/Users/eliot/Desktop/cosmos-gatsby-example/node_modules/gatsby/src/utils/webpack.config.js:44:39)
    at processTicksAndRejections (internal/process/task_queues.js:85:5)
error Command failed with exit code 1.

I'm pretty sure I've got that path right so I'm really not sure where I'm going wrong. And even if I didn't use the gatsby webpack config, it's so weird that it's throwing an error that the experimental feature JSX isn't enabled?

I just really don't know enough about babel and webpack to know what I'm doing, if anyone could get that repo working with cosmos I'd love to take a look at how it was done.

[ovidiuch]

Thanks for providing this.

At first glance, it's pretty clear that Gatsby's webpack config isn't a standard webpack config. It requires a few arguments (program, directory, suppliedStage, port, parentSpan) that are specific to Gatsby, so it cannot be used as a regular webpack config, unless you know what to pass in into those arguments.

There are two options:

1. Figure out what those arguments need to be, and use webpack config override in Cosmos to import the Gatsby webpack config manually and call it with its required arguments.
2. Figure out if the pre-computed webpack config can be retrieved from Gatsby, after all those arguments were passed in and the webpack config was generated.

For both you need Gatsby knowledge, which I don't have. If you can find someone with the Gatsby knowledge I can continue to offer assistance on the Cosmos side.