Storybook: Storybook 5.0.0 - ошибка в загрузчике эмоций и React

@ 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]

edit: 3-й раз удаление package-lock.json и node_modules помогло мне

У вас такая же проблема здесь, в @ storybook /
Однако удаление файла 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 , но устанавливается только в @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. Вот мое тестовое репо: https://github.com/MrLoh/universal-react-storybook

Переход на сборник рассказов 4.1.13 решил проблему, так что, возможно, это несовместимость в моем проекте между сборником рассказов / реагировать и сборником рассказов / реагировать-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 : 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"
ERR! Ошибка: не удается найти модуль @ Emotion / core / package.json

Добавление @ эмоции / ядра в DevDependencies помогло, и Storybook работает. Похоже, его нет в зависимостях пакетов с @ storybook / react.

Я поставил для этого пиар здесь: # 6435

Эгадс !! Я только что выпустил https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.23, содержащий PR # 6435, который ссылается на эту проблему. Обновите сегодня, чтобы попробовать!

Поскольку это предварительный выпуск, вы можете найти его в теге @next NPM.

Закрытие этого вопроса. Пожалуйста, откройте снова, если вы считаете, что еще многое предстоит сделать.

Альфа-версия устранила проблему для меня, спасибо

Проблема все еще сохраняется в 5.0.10 (по журналам npm это версия после альфа.23)

сообщение об ошибке:

Не удалось загрузить предустановку: "/.../node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Ошибка: не удается найти модуль «эмоциональная тема / 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, которая в настоящее время все еще находится в альфа-версии ( 5.1.0-alpha.33 ).

@BrendanAnnable @alexlafroscia @devrelm Должен ли я исправить исправление обратно в 5.0.x ?

@shilman Не уверен, каков график выпуска сборника рассказов (например, для 5.1.x), но это блокирует ряд проектов, обновляющихся до сборника рассказов 5, поэтому я бы хотел, чтобы это исправление попало в неальфа-версию, если это возможно 🙂

Проблема здесь в том, что yarn (или 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 , который нужно поднять до root, но это не так: он дублирует пакет в 4 местах в разных пакетах. Я не уверен, что это ошибка пряжи / npm. Может быть, сочетание зависимостей dependencies и peerDependencies вызывает такое странное поведение? Моя установка сборника рассказов не выполняется, когда у меня есть разные основные версии пакетов сборников рассказов, например @storybook/[email protected] и @storybook/[email protected] рядом.

Я также думаю, что наша комбинация наличия рабочего пространства пряжи monorepo и отсутствия подъема верхнего уровня также может быть факторами, вызывающими эту проблему:

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

Я также испытываю те же проблемы, но кажется, что большинство из вышеперечисленных решений не устранили проблему для меня.
Я также пробовал альфа-версию и все еще получаю ошибку.
Проблема для меня все еще выглядит так, как будто два разных пакета ищут две разные версии @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 с точно такой же проблемой.

Тем не менее, я получаю только одну версию @ эмоции / ядра (10.0.10)

@alasdairhurst Я тоже столкнулся с этой проблемой.

вы можете увидеть это в этом демонстрационном проекте с CRA
https://github.com/marco-silva0000/cra-test-pnp-storybook

Нам помогли добавить @storybook/theming в качестве явной зависимости

Вы когда-нибудь понимали, почему это помогло? Потому что это помогло и нам, и это здорово! Но не понимаю почему: P

Если это может кому-то помочь - я тоже получил эту ошибку, и мне потребовалось некоторое время, чтобы понять, что я устанавливаю пакет вне папки веб-сайта ... Вот почему он не нашел package.json ...