Storybook: 故事书5.0.0情绪主题和React loader错误

@ afrankel-sfdo您可以删除node_modules和yarn.lock并重试吗？ 我们已经看到很多类似这样的东西，例如https://github.com/storybooks/frontpage/pull/28#issuecomment -468666553

@shilman甚至在info @storybook/react v5.0.0-rc.10 ：

rm yarn.lock; rm -Rf node_modules/; yarn; yarn storybook

Error: Cannot find module 'emotion-theming/package.json'

真是奇怪您能提供一个复制品吗？ 在我的CRA测试应用程序或Gatsby测试应用程序中没有看到

我对@storybook/[email protected]有同样的看法

编辑：第三次删除package-lock.json和node_modules对我有用

在Mac OSX上运行的@ storybook / [email protected]中有相同的问题
但是，在我们的过程中，不能选择删除yarn.lock文件

5.0.0上的同一问题，我还注意到低价位...

ModuleParseError: Module parse failed: Unexpected token (20:24)
You may need an appropriate loader to handle this file type.
|       console.info('HMR Configured');
|       module.hot.accept('layouts/App', () => {
>         ReactDOM.render(<App />, document.getElementById('root'));
|       });
|     }

    "@storybook/addon-a11y": "5.0.0",
    "@storybook/addon-actions": "5.0.0",
    "@storybook/addon-console": "^1.1.0",
    "@storybook/addon-info": "5.0.0",
    "@storybook/addon-knobs": "5.0.0",
    "@storybook/addon-links": "5.0.0",
    "@storybook/addon-notes": "5.0.0",
    "@storybook/addon-storyshots": "5.0.0",
    "@storybook/addon-viewport": "5.0.0",
    "@storybook/addons": "5.0.0",
    "@storybook/core": "5.0.0",
    "@storybook/react": "5.0.0",

全新安装的故事书效果很好，还没有找到项目中可能导致这些问题的原因。

@ afrankel-sfdo我看到了同样的问题。 我目前的理论是，缺少@emotion/core会导致ModuleParseError 。 我运行了npm i @emotion/core @emotion/styled ，这似乎可以解决问题。 奇怪的是，我确实注意到这两个部门已从package-lock.json中删除，尽管我不知道为什么。 我从他们删除package.json ，离开了package-lock.json他们，我觉得我回到了业务，虽然它并没有真正解释发生了什么。

更新：在执行上述步骤后运行npm ls @emotion/core时，请注意：

[email protected] /Users/jamesdigioia/Code/compiq/web
├── @emotion/[email protected]  extraneous
└─┬ @storybook/[email protected]
  └─┬ @storybook/[email protected]
    └── @emotion/[email protected]

npm ERR! extraneous: @emotion/[email protected] /Users/jamesdigioia/Code/compiq/web/node_modules/@emotion/core

@emotion/core没有被提升到构建所期望的根（这是多余的，因为它不再位于我的package.json ）。 require.resolve在@storybook/ui/paths.js require.resolve被调用，但是它仅安装在@storybook/theming ，因此它嵌套在该文件夹中的node_modules中，这意味着require.resolve @storybook/ui找不到。

我想说的解决方案是将@emotion/{core,styled}作为依赖添加到@storybook/ui ，因为@storybook/ui正在寻找它。

另一个更新：如果您不想删除package-lock.json ，则npm dedupe似乎已经为我解决了这个问题。

@ FrAgFo0d如果删除yarn.lock吗？ 您无需签入更改，但是了解该解决方案是否对您有用。 最终，我们将深入研究它的底部，但就目前而言，它似乎像个毛线虫……

我有同样的问题，无法通过删除yarn.lock来解决

yarn add @emotion/core @emotion/styled立即解决了

我遇到了一些非常奇怪的与情感有关的错误。 在安装之前删除node_modules，yarn.lock并运行yarn cache clean解决此问题。

可能是因为故事书/核心和故事书/主题使用了两种不同的情感版本。 这一切都很怪异，我就是无法超越。 当我手动安装情感库时，它会生成，但是在浏览器中出现错误（ Cannot read property 'Consumer' of undefined at ThemeProvider ），并且没有任何呈现。

它可以在原始的CRA应用程序中工作，但在我的自定义Webpack设置中却不能。 我正在尝试为我们的React Native Web组件库设置故事书。 这是我的测试仓库： https :

降级为故事书4.1.13解决了此问题，因此在我的项目中，不同版本的故事书/ react和故事书/ react-native之间可能不兼容

@MrLoh

我也遇到了这个问题（虽然我使用@storybook/vue ）。
我发现package.json中的一个软件包依赖于旧的@storybook/addons软件包，而内部依赖于旧的@emotion/*软件包。

作为一种解决方法，我为该库编写了resolutions字段，这为我解决了这个问题。

  "resolutions": {
    "my-old-library/@storybook/addons":"^5.0.0"
  }

@ FrAgFo0d如果删除yarn.lock吗？ 您无需签入更改，但是了解该解决方案是否对您有用。 最终，我们将深入研究它的底部，但就目前而言，它似乎像个毛线虫……

我希望这样做，但是在执行此操作后，我不能说问题是由于其他项目安装的版本不匹配或故事书本身引起的。

我可以尝试yarn add @emotion/core @emotion/styled看看它是否解决了。 `
但是我宁愿不在自己的项目中添加更多的依赖关系；）

为我们添加了@storybook/theming作为显式依赖项

我刚在Mac OSX上遇到过同样的问题，在Windows上，一切在Mac上都可以正常运行，我必须运行npm i @emotion/core @emotion/styled才能使其正常运行

如果[email protected]遇到了同样的问题，homburg解决方案对我有用

删除yarn.lock文件不是我的选择（在大多数情况下，我建议不要这样做）。 我们能够通过修复它。

$ rm -rf node_modules
$ yarn cache clean
$ yarn remove @storybook/core @storybook/theming [all other storybook deps]
$ yarn add -D @storybook/core @storybook/theming ....

希望这可以帮助其他人遇到这个问题

为我们+1。 此线程中起作用的唯一解决方案是还原到故事书4

我也有这个问题
@storybook/react: 5.0.3
MacOs Mojave
解决：

yarn add --dev @emotion/core -W
yarn add --dev emotion-theming -W

从v5.0.3升级到v5.0.5后，我们遇到了相同的问题。

解决：
yarn add --dev @storybook/theming

我仍然遇到这个问题。 我有以下最新信息：

• @storybook/theming
• @emotion/core
• @emotion/styled

所有缓存清除均无效。 它仍在尝试查找旧的emotion-theming软件包：

info => Loading presets
WARN   Failed to load preset: "/Users/areardon/code/react-beautiful-dnd/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'

我安装了emotion-theming软件包，一切正常。

通过安装emotion-theming它，就像@alexreardon一样： https : //emotion.sh/docs/emotion-theming收到以下错误：

info @storybook/react v5.0.5
info 
info => Loading presets
WARN   Failed to load preset: "/Users/Felipe/Local_Projects/monorepo/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'

我想说的解决方案是将@ emotion / {core，styled}添加为对@ storybook / ui的依赖，因为@ storybook / ui正在寻找它。

我同意@mAAdhaTTah的观点，这将是正确的解决方案。 希望程序包管理器提升依赖关系是错误的。

@ storybook / react v5.0.6也存在相同的问题。

无法加载预设：“ / Users/vinkumar2/Documents/Projects/PatternLibs/ReactPatternLib/node_modules/@storybook/core/dist/server/manager/manager-preset.js”
呃！ 错误：找不到模块“ @ emotion / core / package.json”

在DevDependencies中添加@ emotion / core帮助，Storybook正常运行。 看起来它缺少@ storybook / react的程序包依赖项。

我在这里为此添加了PR：＃6435

哎呀！ 我刚刚发布了https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.23，其中包含引用此问题的PR＃6435。 立即升级以试用！

因为它是预发行版，所以您可以在@next NPM标签上找到它。

解决此问题。 如果您认为还有更多事情要做，请重新打开。

Alpha版本为我解决了该问题，谢谢@shilman ！

该问题在5.0.10中仍然存在（npm记录它是alpha.23之后的版本）

错误信息：

无法加载预设：“ /.../ node_modules/@storybook/core/dist/server/manager/manager-preset.js”
呃！ 错误：找不到模块'emotion-theming / package.json'

堆栈跟踪：

stack: 'Error: Cannot find module \'emotion-theming/package.json\'\n    
at Function.Module._resolveFilename (module.js:536:15)\n    
at Function.resolve (internal/module.js:18:19)\n   
at Object.<anonymous> (/.../node_modules/@storybook/ui/paths.js:16:38)\n    
at Module._compile (module.js:635:30)\n    
at Object.Module._extensions..js (module.js:646:10)\n    
at Module.load (module.js:554:32)\n    
at tryModuleLoad (module.js:497:12)\n    
at Function.Module._load (module.js:489:3)\n    
at Module.require (module.js:579:17)\n    
at require (internal/module.js:11:18)\n    
at Object.<anonymous> (/.../node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)\n    
at Module._compile (module.js:635:30)\n    
at Object.Module._extensions..js (module.js:646:10)\n    
at Module.load (module.js:554:32)\n    
at tryModuleLoad (module.js:497:12)\n    
at Function.Module._load (module.js:489:3)',

@Stralos此修复程序位于5.1.X版本分支中，该分支当前仍处于alpha（ 5.1.0-alpha.33 ）中。

@BrendanAnnable @alexlafroscia @devrelm是否应将修复程序修补到5.0.x ？

@shilman不确定故事书的发布时间表是什么（例如，对于5.1.x），但是这阻止了许多升级到故事书5的项目，因此，我希望此修复程序能够在可能的情况下发布一些非Alpha版本🙂

这里的问题是纱线（或npm）奇怪地（在这种情况下不是）提升卷装。 yarn list或yarn why输出也有问题：

% yarn why emotion-theming
yarn why v1.15.2
[1/4] 🤔  Why do we have the module "emotion-theming"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#some_project#@storybook#addon-actions#@storybook#theming" depends on it
   - Hoisted from "_project_#some_project#@storybook#addon-actions#@storybook#theming#emotion-theming"
✨  Done in 1.74s.

% yarn list emotion-theming
yarn list v1.15.2
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ [email protected]
✨  Done in 1.86s.

% find . -type d -name emotion-theming
./some_project/node_modules/@storybook/addon-actions/node_modules/emotion-theming
./some_project/node_modules/@storybook/theming/node_modules/emotion-theming
./node_modules/@storybook/ui/node_modules/emotion-theming
./node_modules/@storybook/router/node_modules/emotion-theming

如您所见，yarn报告只有一个emotion-theming软件包，应该将其吊起进行扎根，但事实并非如此：它在不同软件包中的4个地方复制了该软件包。 我不确定是毛线/ npm虫。 也许依赖项的dependencies和peerDependencies的组合导致了这种奇怪的行为？ 当我有不同主要版本的故事书包时，例如@storybook/[email protected]和@storybook/[email protected]并排放置，我的故事书设置将失败。

我还认为，将Monorepo纱线工作区与顶级吊装相结合，也可能是导致此问题的因素：

"workspaces": { "nohoist": [ "some_project/*", "some_project/@*/*", ], "packages": [ "some_project", ] },

我也遇到同样的问题，但似乎以上大多数解决方案都无法解决我的问题。
我还尝试了Alpha版本，但仍然出现错误。
对我来说，问题仍然是，两个不同的软件包正在寻找@emotion/core两个不同版本，因此可以手动安装，但是始终有两个软件包在抱怨缺少的版本。

/[email protected] /repos/ui
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └── @emotion/[email protected]  deduped
├─┬ @storybook/[email protected]
│ └── @emotion/[email protected]
└─┬ @storybook/[email protected]
  └─┬ @storybook/[email protected]
    └─┬ @storybook/[email protected]
      └── UNMET PEER DEPENDENCY @emotion/[email protected]

npm ERR! peer dep missing: @emotion/core@^10.0.0, required by [email protected]

我也尝试手动添加npm i @storybook/theming但还是没有运气。

@devrelm您的修复程序（＃6435）即使在npm下也应该有效，而不仅仅是yarn ..对吗？

对我有用的@whyayala ，谢谢！

升级到5.x，遇到了错误，而我刚刚更新到5.1.9，却遇到了完全相同的问题。

就是说，我只得到一个版本的@ emotion / core（10.0.10）

@alasdairhurst我也遇到了这个问题。

您可以在这个带有CRA的演示项目中看到它
https://github.com/marco-silva0000/cra-test-pnp-storybook

为我们添加了@storybook/theming作为显式依赖项

您知道它为什么有帮助吗？ 因为它对我们也有帮助，这太棒了！ 但是我不明白为什么：P

如果这可能对任何人都有帮助-我也遇到了这个错误，我花了一段时间才意识到我是在网站文件夹之外安装软件包的。这就是为什么它找不到package.json的原因。