Storybook: Buku cerita tidak kompatibel dengan kait React

Adakah saran saya mendapatkan kesalahan yang sama?

Saya memiliki masalah yang sama tetapi berhasil.

• Pertama saya mengalami kesalahan karena fungsi saya tidak menggunakan huruf besar misalnya example => Example
• Kedua, saya lupa cara Bereaksi dan mencoba memanggil fungsi tersebut, alih-alih meneruskannya sebagai elemen JSX
  
  
  
  • Jadi untuk menggunakan contoh ilias-t, render komponen fungsi seperti <ColorChanger /> dan bukan ColorChanger()
  
  
• Terakhir, setelah merender fungsi saya sebagai elemen JSX, dikatakan bahwa saya perlu mengimpor React dalam kode contoh saya dari dokumen React.
  
  
  
  • Dan sekarang berhasil.
  
  

Saya juga memperbarui paket react-dom ke 16.7.0-alpha.0 sebelum saya mencoba semua ini, jadi mungkin, jika Anda belum melakukannya, cobalah juga.

@Amolang Cukup yakin saya melakukan semua langkah yang sama. Pesan kesalahan spesifik yang saya lihat membuat saya percaya bahwa kesalahan tersebut bukan akibat dari salah satu kasus tersebut.

Pemikiran bagus mengenai react-dom — Saya pikir mungkin itu, tapi saya memperbaruinya dan masih melakukan kesalahan yang sama 😕

@Amolang Saya melakukan semua hal yang sama seperti yang Anda jelaskan dan mendapatkan kesalahan yang sama seperti yang disarankan @ ilias-t.
Penyelidikan lebih lanjut membawa saya ke fungsi ResolDispatcher () di perpustakaan react tempat pemanggilannya
ReactCurrentOwner.currentDispatcher;
dan yang diset seperti di bawah ini di atas suatu tempat di file react.development.js

var ReactCurrentOwner = {
  /**
   * <strong i="11">@internal</strong>
   * <strong i="12">@type</strong> {ReactComponent}
   */
  current: null,
  currentDispatcher: null
};

dan itulah mengapa saya mendapatkan Hooks can only be called inside the body of a function component
seperti pada kode di bawah ini

function resolveDispatcher() {
  var dispatcher = ReactCurrentOwner.currentDispatcher;
  !(dispatcher !== null) ? invariant(false, 'Hooks can only be called inside the body of a function component.') : void 0;
  return dispatcher;
}

Mungkin pertanyaan yang konyol, tetapi apakah kedua paket React Anda juga diperbarui ke 16.7.0-alpha.0 ?

Itu adalah satu-satunya hal yang telah saya lakukan, yang tidak saya sebutkan di atas.

Iya. Sepertinya ada hubungannya dengan ini: https://github.com/facebook/react/issues/13972#issuecomment -433538714, yang terkait dengan https://github.com/facebook/react/ masalah / 14022

Sepertinya buku cerita tidak menggunakan ReactDOMServer , tapi mungkin mencoba melakukan traversal react-tree kustom, seperti yang disebutkan @theKashey .

Saya pikir Anda akan lebih beruntung menemukan jawaban dalam masalah itu. Pengetahuan saya sangat terbatas.

@Amolang Jangan khawatir! Maukah Anda mengunggah proyek yang membuat Anda berhasil, jadi saya bisa membandingkan? Ini pasti bisa menjadi masalah dengan beberapa konfigurasi saya. Saya mencoba melakukannya dalam paket repo lerna'ed, yang menambahkan lapisan kerumitan 😬

Kode dapat ditemukan di proyek saya .
Contohnya ada di App.js di bawah src / client. :)

@Amolang apakah saya melewatkan sesuatu? Sepertinya Anda tidak memasang buku cerita di proyek itu 😕

Bukan saya. Saya menemukan masalah ini dengan pencarian Google, berharap menemukan jawaban.

Saya kemudian mencoba apa yang saya sebutkan di atas dan berhasil. Pikir itu akan berhasil untuk Anda berdua juga.

Tetapi berdasarkan masalah yang Anda tautkan, bagi saya sepertinya itu terjadi pada render server, yang tidak saya gunakan.

@Amolang 😄 gotcha, ya masalah ini hanya terjadi pada saya ketika menggunakan hook dengan buku cerita, itulah sebabnya saya mengajukan masalah ini ke buku cerita secara khusus. Akan memperbarui judul untuk membuatnya lebih jelas bahwa itu khusus buku cerita.

Mencoba:

import { setConfig } from 'react-hot-loader';
setConfig({ pureSFC: true });

di file .config Anda.

Ini seharusnya berhasil - untuk saat ini.

@phaistonian Mencoba ini dan masih ini

Terima kasih @phaistonian yang benar-benar berhasil!

import { setConfig } from 'react-hot-loader';
setConfig({ pureSFC: true });

Ini tidak berhasil untuk saya, saya mendapatkan kesalahan yang sama persis dengan atau tanpa itu.

Adakah yang bisa memberikan keluaran yang lebih bertele-tele?
pureSFC seharusnya berfungsi, dan mudah untuk memeriksanya - _hooked_ harus dipanggil dari fungsi bernama ProxyFacade , bukan hotComponentRender

@theKashey Bagaimana Anda memeriksa fungsi mana yang memanggil _ hooked _?

Nvm, saya menggunakan kait di dalam bagian .add('with ...', () => { ... return (<Component></Component>) } yang tidak boleh, saya buruk. Sebaliknya saya membuat fungsi di luarnya dan menggunakannya seperti .add('with ...', () => (<ComponentWithHooks></ComponentWithHooks>)) untuk mengujinya dengan kait.

Dan itu berhasil?

@theKashey ya itu berfungsi dengan baik dengan baris setConfig({ pureSFC: true }); .

Silakan coba ReactHotLoader @ next .
Ini berpotensi dapat menyelesaikan masalah apa pun, tetapi akan membutuhkan react-dom untuk diproses oleh RHL webpack-loader . Yaitu dapat menyebabkan masalah dengan konfigurasi webpack khusus, dan tidak akan berfungsi untuk konfigurasi dari CRA.

@theKashey Adakah cara untuk mengatasi masalah ini saat menggunakan konfigurasi webpack khusus ?

Cukup gunakan alias webpack untuk mengubah react-dom menjadi hot-loader/react-dom - lihat utas ini - https://github.com/gaearon/react-hot-loader/issues/1088#issuecomment -440624088

Jadi saya mengalami masalah ini menggunakan CRA 2.1.1 dengan skrip jenis pada versi 4.1.0-alpha.8 dari @storybook/react dan kait dan akhirnya sampai pada fakta bahwa paket tersebut menyertakan salinan lokalnya sendiri dari Bereaksi sehingga ketika hook dipanggil, ia tidak dapat menemukan instance ReactSharedInternals.ReactCurrentOwner.currentDispatcher .
Konyol rasanya, saya baru saja memperbarui skrip npm saya menjadi berikut:

"storybook": "rm -rf ./node_modules/@storybook/react/node_modules/react && rm -rf ./node_modules/@storybook/react/node_modules/react-dom && start-storybook -p 9009",

Dan semuanya tampak berhasil. Mungkin react / react-dom perlu peer-dependencies @storybook/react daripada deps biasa?

Saya mencoba hal react-hot-loader setConfig hanya untuk menemukan bahwa react-hot-loader tidak diinstal di tempat pertama. Mungkin ini adalah perubahan dengan 4.1 alpha tetapi saya baru mengenal buku cerita secara umum jadi saya tidak akan tahu.

Itu dilakukan untuk mendukung berbagai versi React. Satu untuk manager dan satu lagi untuk client . Adakah cara agar kami dapat menyediakan pengait di luar kotak 🤔?

Halo,

Saya mencoba versi terakhir react-hot-loader (4.5.2) dan saya masih tidak dapat membuat buku cerita berfungsi dengannya.

Saya mengalami kesalahan ini:

Hooks can only be called inside the body of a function component.
    Invariant Violation: Hooks can only be called inside the body of a function component.
    at invariant (http://localhost:9009/vendors~main.fefa65282a203b643a70.bundle.js:562315:15)
    at resolveDispatcher (http://localhost:9009/vendors~main.fefa65282a203b643a70.bundle.js:563614:28)
    at useState (http://localhost:9009/vendors~main.fefa65282a203b643a70.bundle.js:563637:20)
    at TestHook (http://localhost:9009/main.06d0c0c7c39d71512ee0.hot-update.js:28:73)
    at ProxyFacade (http://localhost:9009/vendors~main.fefa65282a203b643a70.bundle.js:369810:20)
    at mountIndeterminateComponent (http://localhost:9009/vendors~main.fefa65282a203b643a70.bundle.js:281585:13)
    at beginWork (http://localhost:9009/vendors~main.fefa65282a203b643a70.bundle.js:282085:16)
    at performUnitOfWork (http://localhost:9009/vendors~main.fefa65282a203b643a70.bundle.js:284842:12)
    at workLoop (http://localhost:9009/vendors~main.fefa65282a203b643a70.bundle.js:284882:24)
    at renderRoot (http://localhost:9009/vendors~main.fefa65282a203b643a70.bundle.js:284968:7)

Saya menggunakan plugin webpack:

// .storybook/webpack.config.js
module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.jsx?$/,
    include: /node_modules/,
    use: ['react-hot-loader/webpack']
  })

  return defaultConfig
}

Saya mengatur konfigurasi ke pureSFC:

// .storybook/config.js
import { setConfig } from 'react-hot-loader'
import { configure } from '@storybook/react'

setConfig({ pureSFC: true })

let req = require.context('../src', true, /\.stories\.js$/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

Dan berikut ini cerita minimal menggunakan hook yang memicu kesalahan:

import { useState } from 'react'
import { storiesOf } from '@storybook/react'

function TestHook() {
  let [state, setState] = useState(0)
  return (
    <button onClick={() => setState(state + 1)}>clicked {state} times</button>
  )
}

storiesOf('Test', module)
  .add('test', () => <TestHook />)

Selama Anda menggunakan webpack loader - tambahkan ' ignoreSFC: true ' ke konfigurasi.
Tapi sebenarnya itu harus bekerja bahkan tanpa itu. Mungkin pengaturannya tidak benar-benar disetel.

@theKashey Saya mencoba dengan cara yang lebih manual dengan aliasing react-dom dan menginstal @hot-loader/react-dom dan berhasil!

Saya lebih suka menggunakan plugin webpack tetapi melakukan:

// .storybook/webpack.config.js
module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.jsx?$/,
    include: /node_modules/,
    use: ['react-hot-loader/webpack']
  })
  return defaultConfig
}

sepertinya tidak berhasil.

Saya tidak memiliki masalah lain dengan memanipulasi konfigurasi webpack buku cerita dengan plugin lain.

React-Hot-Loader 4.6.0 harus bekerja dengan kait di luar kotak.
https://medium.com/@antonkorzunov/react -hot-loader-4-6-41f3ce76fb08

Perbaikan yang akhirnya saya temukan adalah memaksa versi tertentu dari @ hot-loader / react-dom selama instalasi tambalan.

Versi saya saat ini dari react-dom adalah 16.7.0-alpha.2 , jadi saya baru saja melakukan:

yarn add @hot-loader/[email protected]

dan .storybook / webpack.config.js saya adalah:

module.exports = (baseConfig, env, defaultConfig) => {

  // you can add more configs here...

  defaultConfig.resolve.alias['react-dom'] = '@hot-loader/react-dom';
  return defaultConfig;
};

Dan sekarang hook bekerja dengan baik di dalam buku cerita!

React-Hot-Loader 4.6.0 harus bekerja dengan kait di luar kotak.
https://medium.com/@antonkorzunov/react -hot-loader-4-6-41f3ce76fb08

Saya menggunakan 4.6.1 dan jika saya tidak menggunakan alias react-dom , itu tidak berfungsi di luar kotak.

Menggunakan plugin webpack tidak berfungsi, saya mendapatkan kesalahan Hooks can only be called inside the body of a function component .

Saya menggunakan 4.6.1 dan jika saya tidak alias react-dom, itu tidak berfungsi di luar kotak.

@jgoux - beri saya contoh, dan saya akan memperbaikinya. pureSFC berfungsi dengan baik dalam contoh saya, tetapi mungkin saya melewatkan kasus Anda.

PS: loader webpack harus berfungsi, itu hal aneh lainnya.

@theKashey Contoh saya tepat di atas ☝️: https://github.com/storybooks/storybook/issues/4691#issuecomment -445244958

4.6.1 hanya bekerja dengan aliasing react-dom dan tidak melakukan apa-apa, dan itu bagus! Tetapi saya tidak dapat membuatnya berfungsi menggunakan plugin webpack dengan buku cerita.

@theKashey Contoh saya tepat di atas ☝️: # 4691 (komentar)

4.6.1 hanya bekerja dengan aliasing react-dom dan tidak melakukan apa-apa, dan itu bagus! Tetapi saya tidak dapat membuatnya berfungsi menggunakan plugin webpack dengan buku cerita.

coba tambahkan alias di dalam webpack.config seperti di sini https://github.com/storybooks/storybook/issues/4691#issuecomment -447570189

defaultConfig.resolve.alias['react-dom'] = '@hot-loader/react-dom';

Saya tidak yakin mengapa Anda memperumit hal-hal seperti ini. Saya telah memaksa paket react ke versi 16.7.0-alpha.2 dan itu bekerja dengan baik. Jika Anda adalah pengguna Yarn yang beruntung, masukkan saja ini ke package.json Anda. Tidak perlu mengubah konfigurasi apa pun atau mengacaukan hot loader.

  "resolutions": {
    "react": "16.7.0-alpha.2",
    "react-dom": "16.7.0-alpha.2"
  }

Anda dapat melihat penyebab yang jelas di sini. Karena React kompatibel ke belakang, tidak ada salahnya memaksakan versi alpha untuk semuanya.

[1/4] Why do we have the module "react"...?
=> Found "[email protected]"
info Has been hoisted to "react"
info This module exists because it's specified in "dependencies".
=> Found "@storybook/react#[email protected]"
info This module exists because "@storybook#react" depends on it.
=> Found "react-split-pane#[email protected]"
info This module exists because "@storybook#addon-info#@storybook#components#react-split-pane" depends on it.

@FredyC - masalahnya tentang - Anda __dapat__ menggunakan hook, tetapi mereka tidak akan berfungsi karena _masalah ini_.

@ theKashey Saya memiliki masalah yang sama persis seperti di OP dan dengan memaksa versi react itu hilang. Saya berasumsi itu karena Storybook menggunakan versi React tanpa hook untuk mendorong rendering. Namun, saat Anda mengimpor mis. useState , ini adalah React 16.7 dan mencari operator yang kemungkinan besar berada di ruang yang berbeda. Saya tidak terlalu tahu bagian dalam.

Dari semua komentar ini, solusi ini paling masuk akal bagi saya. Saya tidak mengerti mengapa hot loader terlibat sama sekali. Saya menggunakan Storybook 4.1.2 dan react-hot-loader bahkan tidak diinstal sebagai dependensi . Jika beberapa orang memilikinya di node_modules itu kemungkinan besar karena alasan yang berbeda sehingga segala jenis konfigurasi webpack peretasan diragukan dapat bekerja.

Anda beruntung, kalau begitu :)

@FredyC berhasil untuk saya alhamdulillah! Terima kasih

@ domenico-ruggiano Ya, saya tahu bahwa aliasing berfungsi, itulah yang saya gunakan juga.
Saya hanya ingin menunjukkan bahwa pendekatan plugin webpack tidak berfungsi dengan buku cerita. 👍

@jgoux - maaf, masih belum punya cukup waktu untuk mereproduksi contoh Anda, tetapi bisakah Anda mencoba menggunakan unshift daripada push ?

@theKashey Tidak yakin apa yang terjadi tetapi tidak berfungsi lagi, bahkan dengan solusi alias.
Lingkungan Hidup :

• storybook v4.2.0-alpha.5 (juga mencoba dengan v4.1.3, kesalahan yang sama)
• react-hot-loader v4.6.3
• @ hot-loader / react-dom 16.7.0
• react-dom 16.7.0
• bereaksi 16.7.0

Object(...) is not a function
    TypeError: Object(...) is not a function
    at TestHook (http://localhost:9009/main.f5798b722fe2ceddc6c1.bundle.js:88:73)
    at mountIndeterminateComponent (http://localhost:9009/vendors~main.f5798b722fe2ceddc6c1.bundle.js:16891:13)
    at beginWork (http://localhost:9009/vendors~main.f5798b722fe2ceddc6c1.bundle.js:17395:16)
    at performUnitOfWork (http://localhost:9009/vendors~main.f5798b722fe2ceddc6c1.bundle.js:20152:12)
    at workLoop (http://localhost:9009/vendors~main.f5798b722fe2ceddc6c1.bundle.js:20192:24)
    at renderRoot (http://localhost:9009/vendors~main.f5798b722fe2ceddc6c1.bundle.js:20278:7)
    at performWorkOnRoot (http://localhost:9009/vendors~main.f5798b722fe2ceddc6c1.bundle.js:21169:7)
    at performWork (http://localhost:9009/vendors~main.f5798b722fe2ceddc6c1.bundle.js:21081:7)
    at performSyncWork (http://localhost:9009/vendors~main.f5798b722fe2ceddc6c1.bundle.js:21055:3)
    at requestWork (http://localhost:9009/vendors~main.f5798b722fe2ceddc6c1.bundle.js:20924:5)

Saya menggunakan contoh minimal ini:

import { useState } from 'react'
import { storiesOf } from '@storybook/react'

function TestHook() {
  let [state, setState] = useState(0)
  return (
    <button onClick={() => setState(state + 1)}>clicked {state} times</button>
  )
}

storiesOf('Test', module)
  .add('test', () => <TestHook />)

@jgoux Ya, ini gotcha terbaru: D React 16.7.0 dirilis tanpa kait dan jika Anda tidak berhati-hati, itu dapat merusak aplikasi. Lihat info lebih lanjut di sini: https://reactjs.org/blog/2018/12/19/react-v-16-7.html#why -is-this-bugfix-a-minor-bukannya-of-a-patch

@FredyC Wow aku benar-benar melewatkannya! Jadi itu berarti kita harus tetap menggunakan 16.7.0-alpha untuk mempertahankan kait?

Ya alpha.2 versi atau __16.7.0-alpha.2.4__ dalam hal hot-loader/react-dom

@theKashey Maaf atas kebisingannya, baru saja diuji dengan react 16.7.0-alpha.2 dan @hot-loader/react-dom v16.7.0-alpha.2.4 dan storybook v4.2.0-alpha.5 dan berfungsi di kedua kasus (alias + paket web)! 👏

EDIT : Bahkan, ini bahkan berfungsi tanpa aliasing atau menggunakan plugin webpack. 😮

React-Hot-Loader 4.6.0 harus bekerja dengan kait di luar kotak.

@theKash Memang! Saya bingung dengan ini: https://github.com/gaearon/react-hot-loader# -hot-labs-:

(wajib) gunakan plugin webpack agar RHL menambal React-DOM untuk Anda.

Anda akan mendapat masalah dengan memo dan forwardRef - mereka mungkin memperbarui komponen yang dibungkus hanya pada render kedua (~ buffering ganda).

Halo semuanya! Sepertinya tidak banyak yang terjadi dalam masalah ini belakangan ini. Jika masih ada pertanyaan, komentar, atau bug, silahkan lanjutkan pembahasannya. Sayangnya, kami tidak punya waktu untuk membahas setiap masalah. Kami selalu terbuka untuk kontribusi, jadi silakan kirim permintaan tarik jika Anda ingin membantu. Masalah yang tidak aktif akan ditutup setelah 30 hari. Terima kasih!

Saya tidak memiliki konfigurasi webpack khusus untuk buku cerita.
Saya tidak memiliki hot-loader terpasang.

saya bisa membuatnya bekerja dengan memaksa:
"@ storybook / react": "4.2.0-alpha.5", di devDependencies
dan
"react": "16.7.0-alpha.2",
"react-dom": "16.7.0-alpha.2" dalam ketergantungan

@ gaurav5430 , apakah Anda menggunakan create-react-app?

FYI: Ada alpha baru dari React dengan hooks: https://www.npmjs.com/package/react/v/16.8.0-alpha.1

Tidak, saya tidak menggunakan aplikasi buat-reaksi.

Mengenai alfa baru dengan kait, bagus, saya akan mencobanya.

Ini harus bekerja dengan rilis 4.1. Menurut catatan rilis , Storybook sekarang menggunakan versi React dari proyek untuk pratinjau aktual (dan apa pun yang digunakannya secara internal untuk manajer).

Artinya, jika Anda memperbarui Storybook ke 4.1 atau yang lebih baru, dan React + React-DOM ke 16.8.0-alpha.1, Anda harus memiliki Hooks yang berfungsi di Storybook.

Halo semuanya! Sepertinya tidak banyak yang terjadi dalam masalah ini belakangan ini. Jika masih ada pertanyaan, komentar, atau bug, silahkan lanjutkan pembahasannya. Sayangnya, kami tidak punya waktu untuk membahas setiap masalah. Kami selalu terbuka untuk kontribusi, jadi silakan kirim permintaan tarik jika Anda ingin membantu. Masalah yang tidak aktif akan ditutup setelah 30 hari. Terima kasih!

Bagi saya, ini berhasil:

const MyComponent = () => {
    const [number, setNumber] = useState(0);
    return (
        <div>
            <button onClick={() => setNumber(number + 1)}>Inc</button>
            <div>{number}</div>
        </div>
    )
};

storiesOf('MyStoreOf', module)
    .add('myComponent', () => (<MyComponent /> ));

bereaksi e react-dom: 16.8.1.

Saya kira ini harus ditutup kemudian @ ilias-t

Saya bisa mendapatkan pengait yang berfungsi, tetapi sayangnya tombol addon berhenti bekerja dan addon jsx baru saja menunjukkan komponen wadah cerita. Lebih buruk lagi, alangkah baiknya bisa mengelola negara demi contoh.

@JasonTheAdams cukup yakin @hipstersmoothie memiliki sesuatu yang berfungsi dengan addon jsx - mungkin dia bisa berpadu di sini?

@JasonTheAdams Di sini saya menjelaskan cara sederhana untuk menggunakan hook dan tetap mempertahankan jsx. Ini hanya berfungsi untuk komponen anak

https://mobile.twitter.com/HipsterSmoothie/status/1107182717467156484

Rekan kerja saya membangun perpustakaan kecil dengan kait seperti API yang baru saja dia rilis yang juga ramah jsx. Ini mungkin pilihan terbaik Anda untuk mendapatkan jsx dan interaktivitas

https://github.com/adierkens/storybook-addon-state

Terima kasih, @hipstersmoothie! Dalam contoh Anda, ini tidak hanya menampilkan <InputState /> di Sumber Cerita Anda? Apakah itu menunjukkan komponen <Input /> di dalamnya atau hanya itu?

Saya sangat suka perpustakaan rekan kerja Anda, tetapi saya enggan menggunakan rekreasi lengkap useState , karena dia tidak menggunakan React useState kapan pun, yang berarti dia harus menggunakannya perbarui fungsi ini untuk mencerminkan perubahan apa pun yang dibuat oleh React di masa mendatang.

Saya benar-benar berharap Storybook memperlakukan fungsi yang diteruskan ke story sebagai komponen fungsional, memungkinkannya untuk memanfaatkan React sepenuhnya.

Edit: Untuk memperjelas, saya beralih dari addon JSX ke addon info, yang melakukan hal yang sama.

Dalam contoh Anda, itu tidak hanya ditampilkan di Sumber Cerita Anda? Apakah itu menunjukkan komponen di dalam atau hanya itu?

addon jsx harus menampilkan Input dan InputState . Anda dapat menggunakan parameter lewati untuk mendapatkan status lewati.

karena dia tidak menggunakan React useState kapan pun, yang berarti dia harus memperbarui fungsi ini untuk mencerminkan perubahan yang dibuat React di masa mendatang.

Saya benar-benar berharap Storybook memperlakukan fungsi yang diteruskan ke story sebagai komponen fungsional, memungkinkannya untuk memanfaatkan React sepenuhnya.

Anda benar tentang uang di sini. IDK jika akan berhasil tetapi mungkin ada beberapa perubahan pada @ storybook / react yang dapat mendukung ini. Ini adalah alasan ketika perpustakaan rekan kerja saya tidak menggunakan react.useState

Saya mengalami masalah yang sama menggunakan komponen berbasis kait, dan setelah beberapa eksperimen menemukan penyebabnya ...

Markup cerita saya terlihat seperti ini

<div style={{maxWidth: '280px'}}>
  <MyComponent/>
</div>

Tampaknya tag <div> normal yang membingungkan masalah ini, dan solusinya adalah memastikan bahwa komponen pembungkus adalah komponen React, dan bukan hanya tag html biasa. Jadi saya mendefinisikan komponen Wrapper seperti ini:

const Wrapper = props => <div style={{maxWidth: '280px'}}>{props.children}</div>

dan kemudian mengubah markup cerita saya menjadi seperti ini

<Wrapper>
  <MyComponent>
</Wrapper>

Masalah terpecahkan, dan tidak perlu mengimpor perpustakaan khusus untuk membuatnya berfungsi.

Saya juga mengalami masalah ini, dan melacaknya (seperti yang dikatakan orang lain sebelumnya) ke fakta bahwa Storybook menggunakan contoh React yang berbeda (satu di ruang kerja saya node_modules, dan satu di buku cerita node_modules, saya menggunakan Yarn Workspaces, monorepo ).

Saya mencoba trik resolusi package.json, tetapi tidak berhasil.

Saya membuatnya berfungsi dengan mengubah webpack.config dengan menggunakan alias dan memaksa react dan react-dom untuk digunakan dari root node_modules:

const aliases = {
react: path.resolve(__dirname, '../../../node_modules', 'react'),
 'react-dom': path.resolve(__dirname, '../../../node_modules', 'react-dom'),
};

dan kemudian di konfigurasi Anda:

config.resolve.alias = aliases;

Semoga membantu.

Hei, jadi ini adalah masalah yang diketahui dengan hooks, saya yakin mereka telah mendokumentasikannya di sisi React - Anda juga dapat melakukan symlink react (jika Anda menghubungkan sebuah paket ke dalam proyek Anda - Anda menyambungkan React dari proyek ke paket Anda) .

Membungkus cerita dalam div berhasil untuk saya

storiesOf("Hooks", module)
  .add(
    "Hook",
    () => (
      <div>
        <Hook/>
      </div>
    ),
  );

Saya masih menghadapi masalah ini di buku cerita. Apakah keluaran dari npm ls ini benar atau tidak?

Dalam kasus saya, masalahnya disebabkan oleh modul why-did-you-update .

Hooks didukung penuh di 5.2. Tingkatkan versi untuk mencobanya. Inilah PR: https://github.com/storybookjs/storybook/pull/7571

Saran @mikkelking berhasil untuk saya. Hanya memiliki komponen perantara menyelesaikan masalah hook.

@helsont Anda tidak perlu melakukan itu lagi jika Anda menggunakan versi beta 5,2 terbaru berkat # 7571

Mencoba menggunakan hook di addon kustom tidak berhasil untuk saya di 5.2.8
Itu berhasil dalam cerita.