Monorepo package with storybook throws undefined error

[Codex-]

I've come across an issue with trying to use storybook in a monorepo with this builder, using emotion and trying to render docs.

The setup is:

• Monorepo / workspaces
  • components package
    • storybook with docs

I have created a minimum reproduction repository here: https://github.com/Codex-/monorepo-storybook-error

To see this error, pull the repository and run npm i && npm run components:storybook

Once built, in the browser you are met with a blank content box and this error in the console:

DocsPage.js?v=b6c8eae4:45 Uncaught TypeError: Cannot read properties of undefined (reading 'content')
    at DocsPage.js?v=b6c8eae4:45:34
    at handleInterpolation (emotion-serialize.browser.esm.js:137:24)
    at serializeStyles2 (emotion-serialize.browser.esm.js:251:15)
    at emotion-styled-base.…owser.esm.js:131:24
    at emotion-element-cbed…rowser.esm.js:36:12
    at renderWithHooks (react-dom.development.js:14985:18)
    at updateForwardRef (react-dom.development.js:17044:20)
    at beginWork (react-dom.development.js:19098:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
(anonymous)	@	DocsPage.js?v=b6c8eae4:45
handleInterpolation	@	emotion-serialize.browser.esm.js:137
serializeStyles2	@	emotion-serialize.browser.esm.js:251
(anonymous)	@	emotion-styled-base.browser.esm.js:131
(anonymous)	@	emotion-element-cbed…f.browser.esm.js:36
renderWithHooks	@	react-dom.development.js:14985
updateForwardRef	@	react-dom.development.js:17044
beginWork	@	react-dom.development.js:19098
callCallback2	@	react-dom.development.js:3945
invokeGuardedCallbackDev	@	react-dom.development.js:3994
invokeGuardedCallback	@	react-dom.development.js:4056
beginWork$1	@	react-dom.development.js:23964
performUnitOfWork	@	react-dom.development.js:22776
workLoopSync	@	react-dom.development.js:22707
renderRootSync	@	react-dom.development.js:22670
performSyncWorkOnRoot	@	react-dom.development.js:22293
scheduleUpdateOnFiber	@	react-dom.development.js:21881
updateContainer	@	react-dom.development.js:25482
(anonymous)	@	react-dom.development.js:26021
unbatchedUpdates	@	react-dom.development.js:22431
legacyRenderSubtreeIntoContainer	@	react-dom.development.js:26020
render	@	react-dom.development.js:26103
(anonymous)	@	renderDocs.js:100
_callee$	@	renderDocs.js:99
tryCatch	@	runtime.js:63
invoke	@	runtime.js:294
(anonymous)	@	runtime.js:119
asyncGeneratorStep	@	renderDocs.js:5
_next	@	renderDocs.js:7
Promise.then (async)		
asyncGeneratorStep	@	renderDocs.js:5
_next	@	renderDocs.js:7
(anonymous)	@	renderDocs.js:7
(anonymous)	@	renderDocs.js:7
_renderDocsAsync	@	renderDocs.js:110
renderDocsAsync	@	renderDocs.js:17
renderDocs	@	renderDocs.js:13
_callee9$	@	PreviewWeb.js:877
tryCatch	@	runtime.js:63
invoke	@	runtime.js:294
(anonymous)	@	runtime.js:119
asyncGeneratorStep	@	PreviewWeb.js:8
_next	@	PreviewWeb.js:10
Promise.then (async)		
asyncGeneratorStep	@	PreviewWeb.js:8
_next	@	PreviewWeb.js:10
(anonymous)	@	PreviewWeb.js:10
(anonymous)	@	PreviewWeb.js:10
render2	@	PreviewWeb.js:890
_callee11$	@	PreviewWeb.js:895
tryCatch	@	runtime.js:63
invoke	@	runtime.js:294
(anonymous)	@	runtime.js:119
asyncGeneratorStep	@	PreviewWeb.js:8
_next	@	PreviewWeb.js:10
Promise.then (async)		
asyncGeneratorStep	@	PreviewWeb.js:8
_next	@	PreviewWeb.js:10
(anonymous)	@	PreviewWeb.js:10
(anonymous)	@	PreviewWeb.js:10
renderDocs	@	PreviewWeb.js:940
_callee8$	@	PreviewWeb.js:785
tryCatch	@	runtime.js:63
invoke	@	runtime.js:294
(anonymous)	@	runtime.js:119
asyncGeneratorStep	@	PreviewWeb.js:8
_next	@	PreviewWeb.js:10
Promise.then (async)		
asyncGeneratorStep	@	PreviewWeb.js:8
_next	@	PreviewWeb.js:10
Promise.then (async)		
asyncGeneratorStep	@	PreviewWeb.js:8
_next	@	PreviewWeb.js:10
(anonymous)	@	PreviewWeb.js:10
(anonymous)	@	PreviewWeb.js:10
renderSelection	@	PreviewWeb.js:808
_callee3$	@	PreviewWeb.js:336
tryCatch	@	runtime.js:63
invoke	@	runtime.js:294
(anonymous)	@	runtime.js:119
asyncGeneratorStep	@	PreviewWeb.js:8
_next	@	PreviewWeb.js:10
(anonymous)	@	PreviewWeb.js:10
(anonymous)	@	PreviewWeb.js:10
selectSpecifiedStory	@	PreviewWeb.js:349
(anonymous)	@	PreviewWeb.js:289
(anonymous)	@	index.js:217
_runResolutions	@	index.js:214
then	@	index.js:67
initializeWithStoryIndex	@	PreviewWeb.js:282
(anonymous)	@	PreviewWeb.js:179
(anonymous)	@	index.js:217
_runResolutions	@	index.js:214
then	@	index.js:67
initializeWithProjectAnnotations	@	PreviewWeb.js:178
(anonymous)	@	PreviewWeb.js:120
(anonymous)	@	index.js:217
_runResolutions	@	index.js:214
then	@	index.js:67
initialize	@	PreviewWeb.js:119
configure	@	start.js:148
configure2	@	index.js:21
configStories	@	storybook-stories.js:14
(anonymous)	@	vite-app.js:75

This appears to be emitted by emotion, but this works perfectly when not in a monorepo structure. Any ideas or help is appreciated 🙏

[Codex-]

"Those who do not learn history are doomed to repeat it."

I resolved this, the same way I did before (almost):
#219 (comment)

const RELATIVE_PATH_TO_ROOT = '../../../';

  viteFinal: async (config) => {
    // This should be able to be removed pending the release of https://github.com/storybookjs/storybook/pull/17000
    config.resolve.alias = {
      ...config.resolve.alias,
      '@emotion/react': path.resolve(path.join(__dirname, RELATIVE_PATH_TO_ROOT, 'node_modules/@emotion/react')),
      '@emotion/styled': path.resolve(path.join(__dirname,RELATIVE_PATH_TO_ROOT, 'node_modules/@emotion/styled')),
      '@emotion/core':path.resolve(path.join(__dirname, RELATIVE_PATH_TO_ROOT, 'node_modules/@emotion/react')),
      'emotion-theming': path.resolve(path.join(__dirname, RELATIVE_PATH_TO_ROOT, 'node_modules/@emotion/react')),
    }

    return config
  }

Now the part I got wrong was assuming (boldly) that the resolve alias should point to the packages locations, i.e. emotion-theming to node_modules/emotion-theming but actually having these alias' set as above (mostly pointing to @emotion/react) is what makes this workaround work.

My mistake.