Storybook: Buku Cerita 5.0.0 tema emosi dan bug pemuat React

@ afrankel-sfdo Dapatkah Anda menghapus node_modules dan yarn.lock dan mencoba lagi? Kami telah melihat banyak keanehan seputar hal-hal seperti ini, misalnya https://github.com/storybooks/frontpage/pull/28#issuecomment -468666553

@shilman bahkan pada 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'

Itu sangat aneh. Bisakah Anda memberikan repro? Tidak melihatnya di aplikasi uji CRA saya atau di aplikasi uji Gatsby saya

Saya memiliki hal yang sama dengan @storybook/[email protected]

edit: 3 kali menghapus package-lock.json & node_modules melakukan trik untuk saya

Memiliki masalah yang sama di sini di @ storybook / [email protected] yang berjalan di Mac OSX
Namun menghapus file yarn.lock bukanlah pilihan dalam proses kami

masalah yang sama pada 5.0.0 dan saya juga melihat rendah ...

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",

Instalasi buku cerita baru berfungsi dengan baik, belum melacak apa dalam proyek kami yang mungkin menyebabkan masalah ini.

@ afrankel-sfdo Saya melihat masalah yang sama. Teori saya saat ini adalah kurangnya @emotion/core menyebabkan ModuleParseError . Saya menjalankan npm i @emotion/core @emotion/styled yang sepertinya menyelesaikan masalah. Anehnya, saya perhatikan bahwa kedua deps tersebut dihapus dari package-lock.json , meskipun saya tidak tahu mengapa. Saya menghapusnya dari package.json dan meninggalkan package-lock.json dengan mereka, dan saya pikir saya kembali berbisnis, meskipun itu tidak benar-benar menjelaskan apa yang terjadi.

Pembaruan: Perhatikan ini ketika menjalankan npm ls @emotion/core setelah langkah-langkah di atas:

[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 tidak sedang diangkat ke root, di mana build mengharapkannya (itu asing karena tidak lagi di package.json ). require.resolve disebut dalam @storybook/ui/paths.js , tetapi hanya dipasang di bawah @storybook/theming , jadi itu bersarang di node_modules di folder itu, yang berarti require.resolve dalam @storybook/ui tidak dapat menemukannya.

Saya ingin mengatakan solusinya adalah menambahkan @emotion/{core,styled} sebagai ketergantungan ke @storybook/ui , karena @storybook/ui sedang mencarinya.

Pembaruan lain: Jika Anda tidak ingin menghapus package-lock.json , npm dedupe tampaknya telah memecahkan masalah untuk saya.

@ FrAgFo0d Apakah berfungsi jika Anda menghapus yarn.lock ? Anda tidak perlu memeriksa perubahan Anda, tetapi akan berguna untuk mengetahui apakah solusi itu berhasil untuk Anda. Kita akan sampai pada akhirnya, tetapi untuk saat ini rasanya seperti benang kusut ...

Saya memiliki masalah yang sama dan tidak dapat menyelesaikannya dengan menghapus yarn.lock

yarn add @emotion/core @emotion/styled segera menyelesaikannya

Saya mendapatkan beberapa kesalahan terkait emosi yang sangat aneh. Menghapus node_modules, yarn.lock dan menjalankan yarn cache clean sebelum menginstal memperbaiki masalah untuk saya.

Mungkin masalahnya terkait dengan dua versi emosi berbeda yang digunakan oleh buku cerita / inti dan buku cerita / tema. Ini semua sangat aneh, saya tidak bisa melewati ini. Ketika saya menginstal perpustakaan emosi secara manual, itu dibangun, tetapi saya mendapatkan kesalahan di browser ( Cannot read property 'Consumer' of undefined at ThemeProvider ) dan tidak ada yang merender.

Ini bekerja di aplikasi CRA asli, tetapi dalam pengaturan Webpack kustom saya tidak. Saya mencoba menyiapkan buku cerita untuk pustaka komponen Web React Native kami. Ini repo pengujian saya: https://github.com/MrLoh/universal-react-storybook

Menurunkan versi ke buku cerita 4.1.13 menyelesaikan masalah, jadi mungkin ini adalah ketidakcocokan dalam proyek saya antara buku cerita / reaksi dan buku cerita / react-native dengan versi yang berbeda

@Tokopedia

Saya juga mengalami masalah ini (meskipun saya menggunakan @storybook/vue ).
Dan saya menemukan bahwa salah satu paket di package.json bergantung pada paket @storybook/addons yang bergantung pada paket @emotion/* internal.

Sebagai solusinya, saya menulis bidang resolutions untuk perpustakaan itu, dan itu memecahkan masalah bagi saya.

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

@ FrAgFo0d Apakah berfungsi jika Anda menghapus yarn.lock ? Anda tidak perlu memeriksa perubahan Anda, tetapi akan berguna untuk mengetahui apakah solusi itu berhasil untuk Anda. Kita akan sampai pada akhirnya, tetapi untuk saat ini rasanya seperti benang kusut ...

Saya berharap demikian, tetapi setelah melakukan ini saya tidak dapat mengatakan bahwa masalahnya disebabkan oleh item lain yang diinstal dengan versi yang tidak cocok atau oleh buku cerita itu sendiri.

Saya dapat mencoba yarn add @emotion/core @emotion/styled untuk melihat apakah sudah terselesaikan. `
Namun saya lebih suka tidak menambahkan lebih banyak ketergantungan dalam proyek saya sendiri;)

Bekerja agar kita menambahkan @storybook/theming sebagai ketergantungan eksplisit

Saya baru saja mengalami masalah yang sama di Mac OSX, di Windows semuanya berfungsi dengan baik di Mac Saya harus menjalankan npm i @emotion/core @emotion/styled untuk membuatnya berfungsi

Memiliki masalah yang sama dengan [email protected] , solusi homburg berhasil untuk saya

Menghapus file yarn.lock bukanlah pilihan bagi saya (dan saya akan merekomendasikan untuk tidak melakukannya dalam banyak kasus). Kami dapat memperbaikinya dengan ..

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

harap ini membantu orang lain yang mengalami masalah ini

+1 sama untuk kami. Satu-satunya solusi di utas ini yang berhasil adalah kembali ke buku cerita 4

Saya juga mengalami masalah ini dengan
@storybook/react: 5.0.3
MacOs Mojave
Diselesaikan dengan:

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

Kami mengalami masalah yang sama setelah peningkatan dari v5.0.3 ke v5.0.5.

Diselesaikan dengan:
yarn add --dev @storybook/theming

Saya masih mendapatkan masalah ini. Saya memiliki yang terbaru dari yang berikut ini:

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

Semua pembersihan cache tidak berhasil. Itu masih mencoba menemukan paket 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'

Saya menginstal emotion-theming paket dan semuanya bekerja ..

Memperbaiki seperti @alexreardon , dengan menginstal emotion-theming : https://emotion.sh/docs/emotion-theming mendapatkan kesalahan berikut:

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'

Saya ingin mengatakan solusinya adalah dengan menambahkan @ emosi / {inti, gaya} sebagai dependensi ke @ storybook / ui, karena @ storybook / ui sedang mencarinya.

Saya setuju dengan @mAAdhaTTah bahwa ini akan menjadi solusi yang tepat. Salah berharap bahwa manajer paket akan mengangkat ketergantungan.

Masalah yang sama juga terjadi pada @ storybook / react v5.0.6.

Gagal memuat preset: "/Users/vinkumar2/Documents/Projects/PatternLibs/ReactPatternLib/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
BERBUAT SALAH! Kesalahan: Tidak dapat menemukan modul '@ emosi / core / package.json'

Menambahkan @ emosi / inti di DevDependencies membantu dan Storybook berfungsi. Sepertinya tidak ada dalam dependensi paket dengan @ storybook / react.

Saya telah memasukkan PR untuk ini di sini: # 6435

Aduh !! Saya baru saja merilis https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.23 berisi PR # 6435 yang mereferensikan masalah ini. Tingkatkan versi hari ini untuk mencobanya!

Karena ini adalah pra-rilis, Anda dapat menemukannya di tag @next NPM.

Menutup masalah ini. Harap buka kembali jika menurut Anda masih banyak yang harus dilakukan.

Versi alfa memperbaiki masalah untuk saya, terima kasih @shilman !

Masalahnya masih ada di 5.0.10 (menurut log npm, ini adalah versi setelah alpha.23)

pesan eror:

Gagal memuat preset: "/.../node_modules/@storybook/core/dist/server/manager/manager-preset.js"
BERBUAT SALAH! Kesalahan: Tidak dapat menemukan modul 'tema-emosi / package.json'

jejak tumpukan:

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 perbaikan ini ada di cabang rilis 5.1.X, yang saat ini masih dalam alfa ( 5.1.0-alpha.33 ).

@BrendanAnnable @alexlafroscia @devrelm Haruskah aku menambal kembali memperbaiki ke 5.0.x ?

@shilman Tidak yakin apa jadwal rilis buku cerita (misalnya untuk 5.1.x), tetapi ini memblokir sejumlah proyek yang meningkatkan ke buku cerita 5, jadi saya ingin perbaikan ini mencapai beberapa rilis non-alfa jika memungkinkan 🙂

Masalahnya di sini adalah bahwa benang (atau npm) anehnya (dalam hal ini, bukan) paket pengangkat. yarn list atau yarn why output juga rusak:

% 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

Seperti yang Anda lihat, yarn melaporkan bahwa hanya ada satu paket emotion-theming , yang harus diangkat ke root, tetapi tidak demikian: Ini menggandakan paket di 4 tempat di seluruh paket yang berbeda. Apakah itu bug benang / npm, saya tidak yakin. Mungkin kombinasi dependensi ' dependencies dan peerDependencies menyebabkan perilaku aneh ini? Setup buku cerita saya gagal ketika saya memiliki versi utama yang berbeda dari paket buku cerita, misalnya @storybook/[email protected] dan @storybook/[email protected] berdampingan.

Saya juga berpikir bahwa kombinasi kita memiliki ruang kerja benang monorepo dan nohoisting tingkat atas juga bisa menjadi faktor penyebab masalah ini:

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

Saya juga mengalami masalah yang sama tetapi tampaknya sebagian besar solusi di atas tidak memperbaiki masalah untuk saya.
Saya juga mencoba versi alfa dan masih mendapatkan kesalahan.
Masalahnya bagi saya masih terlihat seperti bahwa dua paket berbeda mencari dua versi berbeda dari @emotion/core sehingga instalasi manual berfungsi tetapi selalu ada salah satu dari dua paket yang mengeluh untuk versi yang hilang.

/[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]

Saya juga mencoba menambahkan npm i @storybook/theming secara manual tetapi masih tidak berhasil.

@ devrelm perbaikan Anda (# 6435) harus bekerja bahkan dengan npm, dan bukan hanya benang .. benar?

@whyayala yang berhasil untuk saya, terima kasih!

Diupgrade ke 5.x, mengalami bug dan saya baru saja memperbarui ke 5.1.9 dengan masalah yang persis sama.

Meskipun demikian, saya hanya mendapatkan satu versi @ emosi / inti (10.0.10)

@alasdairhurst Saya juga mengalami masalah ini.

Anda dapat melihatnya di proyek demo ini dengan CRA
https://github.com/marco-silva0000/cra-test-pnp-storybook

Bekerja agar kita menambahkan @storybook/theming sebagai ketergantungan eksplisit

Apakah Anda pernah mengerti mengapa itu membantu? Karena itu membantu kami juga, dan itu bagus! Tapi saya tidak mengerti kenapa: P

Jika ini dapat membantu siapa pun - Saya mendapatkan kesalahan ini juga, dan saya butuh beberapa saat untuk menyadari bahwa saya menginstal paket di luar folder situs web ... Itulah mengapa tidak menemukan package.json ...