Portable Docs: Umbrella issue

[JReinhold]

This issue is a collection of all issues and bugs that we need to fix to make Portable Docs usable. As we continue to try it out we should add to this list.

Currently the last known version to work* with Next.js is v7.0.0-alpha.33. An example can be seen at this branch (currently private repo).

* still requires a very patchy next.config.js though

1. Storybook modules don't transpile lodash usage correctly

Currently our modules are set up to not prebundle lodash (among other modules) with tsup because we fear that it would introduce too much duplicate code. Unfortunately lodash isn't well suited for ESM, so we run into a lot of errors like this:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '..../node_modules/lodash/startCase' imported from .../node_modules/@storybook/csf/dist/index.mjs
Did you mean to import lodash/startCase.js?

With Next.js this is currently fixable in userland using https://github.com/martpie/next-transpile-modules to transpile Storybook modules like this in the next.config.js:

const withTM = require('next-transpile-modules')([
  '@storybook/blocks',
  '@storybook/react',
  '@storybook/docs-tools',
  '@storybook/store',
  '@storybook/csf',
  '@storybook/preview-web',
  '@storybook/components',
]);

module.exports = withTM(nextConfig);

But that shouldn't be necessary. Maybe we can replace our lodash usage with lodash-es (without causing other problems of course), or maybe we need to rethink our prebundling of lodash.

2. MutationObserver is not defined on the server

v7.0.0-alpha.34 introduced a call to MutationObserver, which is not safe to call on the server, Next.js will break when this happens. We have to create it inside a useEffect instead. It is most likely the one introduced here: https://github.com/storybookjs/storybook/pull/15472/files#diff-00fce8472f1edcf3c676cf488ae236daa3ea381a9a5223018db8783181c2c5ebR41

3. @storybook/theming breaks with Cannot read properties of null (reading 'registered')

This is an error we've run into a couple of times now in different places, and it's most likely related to emotion, and emotion either not being loaded correctly, or loaded multiple times, causing problems.
We still haven't triaged what causes this or which prerelease version introduced this.

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.59 containing PR #20083 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

@JReinhold please file separate issues next time 🙏

[Skaidon]

@shilman I'm still seeing issues with the first listed bug in the beta, 7.0.0-beta.53 - revealing the errors when trying to build. Not sure if this is the best place to raise this, but it's the only place I've found that makes mention of the related lodash issue I'm seeing.

ERROR in ./node_modules/@storybook/csf/dist/index.mjs 2:0-41
Module not found: Error: Can't resolve 'lodash/startCase'

----

ERROR in ./node_modules/@storybook/csf/dist/index.mjs 5:0-37
Module not found: Error: Can't resolve 'lodash/isEqual'

For each it adds:

Did you mean 'isEqual.js'?
BREAKING CHANGE: The request 'lodash/isEqual' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

is anyone aware of a resolution for use with webpack5?

Thanks!

[shilman]

@Skaidon we recently got rid of lodash in the csf library. Can you delete csf from your lockfile and reinstall to make sure you have the latest?

If that doesn't work, maybe you can do "yarn why" or "npm ls" to figure out which package is using the old version. If it's one of ours maybe we have some loose ends to clean up

[shilman]

Closing this. If anybody is encountering a lodash ESM issue, please open a new issue.