afterQuery conflicts with storybook

Adding afterQuery function to a cell file seems to make errors while starting storybook.

ERROR in ./src/components/PostCell/PostCell.mock.js
Module not found: Error: Can't resolve './' in '/Users/kjh/play/_ground/redwood/check-after-query/web/src/components/PostCell'
 @ ./src/components/PostCell/PostCell.mock.js 1:0-32 2:24-34
 @ ./src sync .+(mock).(js|ts)$
 @ ../node_modules/@redwoodjs/core/dist/storybook/StorybookProvider.js
 @ ../node_modules/@redwoodjs/core/config/storybook/preview.js
 @ multi ../node_modules/@storybook/core/dist/server/common/polyfills.js ../node_modules/@storybook/core/dist/server/preview/globals.js ../node_modules/@redwoodjs/core/config/storybook/preview.js ../node_modules/@redwoodjs/core/config/storybook/generated-entry.js ../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

I tried following the source code, but couldn’t figure out beyond @redwood/core/src/storybook/StorybookProvider.tsx.
It seems the require is done via webpack (require.context).

Stopping & restarting storybook, removing node_modules/ directory and reinstalling everything doesn’t seem to help.
Tested on v0.23.0 (macos 10.15.7, node v14.15.3).

Here is a minimum code to repeat (github repo)

  yarn create redwood-app check-after-query
  cd check-after-query
  yarn rw g cell post
  echo 'export const afterQuery = (data) => ({...data})' >> web/src/components/PostCell/PostCell.js
  yarn rw storybook 

The inserted line is directly from the Cell document#afterQuery.
Simply commenting out the afterQuery function makes the storybook to start.

Any ideas?

2 Likes

Here’s a 60s animated gif image showing the process:
(initial yarn process trimmed)

redwood_after_query_storybook_conflict - trimmed

Thanks for sharing. Got same error on my local.

1 Like

Gah, looks like a :bug: for sure. Would you be able to open an Issue on GitHub and loop in @peterp?

1 Like

Looks like it’s being reviewed now in issues/1673. Thanks!

3 Likes