storybookjs / mdx2-csf

MDX to CSF compiler using MDXv2

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Upgrade package(s) that use caniuse-lite

garycourt opened this issue · comments

Describe the bug

I'm getting the following errors when running the latest version of Storybook (v7.5.3).

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
WARN 🚨 Unable to index ./src/lib/common/stories/_Introduction.stories.mdx:
WARN   BrowserslistError: Unknown version 118 of chrome
WARN     at Function.select (.\node_modules\@storybook\mdx2-csf\dist\index.js:65202:21)
WARN     at .\node_modules\@storybook\mdx2-csf\dist\index.js:64471:33
WARN     at Array.reduce (<anonymous>)
WARN     at resolve (.\node_modules\@storybook\mdx2-csf\dist\index.js:64464:39)
WARN     at browserslist (.\node_modules\@storybook\mdx2-csf\dist\index.js:64552:25)
WARN     at resolveTargets (.\node_modules\@storybook\mdx2-csf\dist\index.js:68332:24)
WARN     at resolveTargetsCached (.\node_modules\@storybook\mdx2-csf\dist\index.js:68345:18)
WARN     at getTargets (.\node_modules\@storybook\mdx2-csf\dist\index.js:68382:31)
WARN     at resolveTargets (.\node_modules\@storybook\mdx2-csf\dist\index.js:68469:54)
WARN     at loadPrivatePartialConfig (.\node_modules\@storybook\mdx2-csf\dist\index.js:70138:53)
WARN     at loadPrivatePartialConfig.next (<anonymous>)
WARN     at loadFullConfig (.\node_modules\@storybook\mdx2-csf\dist\index.js:70255:50)
WARN     at loadFullConfig.next (<anonymous>)
WARN     at transform2 (.\node_modules\@storybook\mdx2-csf\dist\index.js:79639:49)
WARN     at transform2.next (<anonymous>)
WARN     at step (.\node_modules\@storybook\mdx2-csf\dist\index.js:61356:44)
WARN     at evaluateAsync (.\node_modules\@storybook\mdx2-csf\dist\index.js:61377:9)
WARN     at .\node_modules\@storybook\mdx2-csf\dist\index.js:61190:13
WARN     at new Promise (<anonymous>)
WARN     at async (.\node_modules\@storybook\mdx2-csf\dist\index.js:61189:18)
WARN     at stopHiding - secret - don't use this - v1 (.\node_modules\@storybook\mdx2-csf\dist\index.js:61999:16)
WARN     at transformAsync2 (.\node_modules\@storybook\mdx2-csf\dist\index.js:79666:81)
WARN     at transformJSXAsync (.\node_modules\@storybook\mdx2-csf\dist\index.js:102178:65)
WARN     at compile2 (.\node_modules\@storybook\mdx2-csf\dist\index.js:102308:10)
WARN     at async Object.createIndex (.\node_modules\@storybook\addon-docs\dist\preset.js:40:1004)
WARN     at async StoryIndexGenerator.extractStories (.\node_modules\@storybook\core-server\dist\index.js:55:316)
WARN     at async .\node_modules\@storybook\core-server\dist\index.js:54:2020
WARN     at async Promise.all (index 0)
WARN     at async Promise.all (index 0)
WARN     at async StoryIndexGenerator.updateExtracted (.\node_modules\@storybook\core-server\dist\index.js:54:1653)
WARN     at async StoryIndexGenerator.ensureExtracted (.\node_modules\@storybook\core-server\dist\index.js:54:2474)
WARN     at async StoryIndexGenerator.initialize (.\node_modules\@storybook\core-server\dist\index.js:54:1580)

I believe the first error explains what the problem is. The caniuse-lite package that is (indirectly) referenced by this package is out of date and requires updating. Because Storybook precompiles all of these files together, it's not possible to override caniuse-lite's version using the resolutions directive in package.json anymore since v7.

I believe the packages that need to be upgraded are:

  • core-js-compat
  • webpack

To Reproduce
Steps to reproduce the behavior:

  1. Setup a new Storybook project (v7.5.3). Ensure @storybook/addon-docs has been installed.
  2. Set "browserslist": ["chrome 118"] in package.json.
  3. Add a new MDX file, and load that from Storybook.

Expected behavior
These error messages should not be reported.

Screenshots
N/A

Additional context
N/A

An alternative and long term solution would be to setup Storybook to not precompile and bundle caniuse-lite into the NPM package. This way, developers can upgrade this package separately from all other dependencies using the resolutions directive in package.json.