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] 와 같은 것을 가지고 있습니다.

편집 : 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 를 실행했습니다. 이상하게도 그 두 가지 deps가 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 찾을 수 없습니다.

@storybook/ui 에서 찾고 있으므로 @emotion/{core,styled} 를 @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 다운 그레이드하면 문제가 해결되었으므로 내 프로젝트에서 스토리 북 / 리 액트와 스토리 북 / 리 액트 네이티브가 서로 다른 버전과 호환되지 않을 수 있습니다.

으아 아

나는 또한이 문제가 발생했습니다 (하지만 @storybook/vue ).
그리고 package.json 의 패키지 중 하나가 이전 @emotion/* 패키지에 내부적으로 종속 된 이전 @storybook/addons 패키지에 종속 된 것을 발견했습니다.

해결 방법으로 해당 라이브러리에 대해 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'

해결책은 @ storybook / ui가 찾고 있기 때문에 @ emotion / {core, styled}를 @ 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에 @ emotion / core를 추가하는 것이 도움이되었고 Storybook이 작동합니다. @ storybook / react와 함께 패키지 종속성이 누락 된 것 같습니다.

여기에 PR을 넣었습니다 : # 6435

Egads !! 방금이 문제를 참조하는 PR # 6435가 포함 된 https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.23 을 릴리스했습니다. 지금 업그레이드하여 사용해보세요!

출시 전 버전이므로 @next NPM 태그에서 찾을 수 있습니다.

이 문제를 마무리합니다. 할 일이 더 많다고 생각되면 다시여십시오.

알파 버전이 문제를 해결했습니다. @shilman 에게 감사

문제는 5.0.10에서 여전히 지속됩니다 (npm 로그에 의해 alpha.23 이후 버전 임).

에러 메시지:

사전 설정로드 실패 : "/.../node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! 오류 : '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 릴리스 브랜치에 있으며 현재 알파 버전 ( 5.1.0-alpha.33 )입니다.

@BrendanAnnable @alexlafroscia @devrelm 수정 사항을 5.0.x 다시 패치해야합니까?

@shilman 스토리 북 출시 일정이 무엇인지 확실하지 않지만 (예 : 5.1.x), 이로 인해 스토리 북 5로 업그레이드하는 여러 프로젝트가 차단되므로 가능하면이 수정이 일부 비 알파 출시 버전에 적용되기를 바랍니다 🙂

여기서 문제는 실 (또는 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 얀 작업 공간과 최상위 수준의 nohoisting을 조합하는 것도이 문제를 일으키는 요인이 될 수 있다고 생각합니다.

"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로 업데이트했습니다.

즉, @ emotion / core (10.0.10) 버전 하나만 받고 있습니다.

@alasdairhurst 나는 또한이 문제에 뛰어 들었습니다.

이 데모 프로젝트에서 CRA로 볼 수 있습니다.
https://github.com/marco-silva0000/cra-test-pnp-storybook

@storybook/theming 를 명시 적 종속성으로 추가하기 위해 노력했습니다.

왜 도움이되었는지 이해 했습니까? 그것은 우리에게도 도움이 되었기 때문입니다. 그러나 나는 이유를 이해하지 못한다 : P

이것이 누구에게나 도움이 될 수 있다면-나도이 오류가 발생했으며 웹 사이트 폴더 외부에 패키지를 설치하고 있음을 깨닫는 데 시간이 오래 걸렸습니다 ... 그래서 package.json을 찾지 못했습니다 ...