Storybook: konflik babel-loader dengan create-react-app 2.1.3

+1

Apakah ini berarti kita tidak boleh menginstal babel-loader untuk aplikasi CRA?

Hmm ketika saya menghapus babel-loader dep maka buku cerita rusak ... 😕

Memiliki masalah yang sama 😕

Masalah yang sama ... belum ada solusi?

@ ayoola-moore Ya, solusinya adalah mengubah baris di package.json menjadi:

"babel-loader": "8.0.4"

Dengan cara ini, react-scripts dan storybook akan berfungsi. Masih mencari solusi yang lebih baik. :bingung:

cc @artisologic @YoannDelpierre @ovionlogis @patricknick @mrmckeb @ivnkld @viniciusreiss @dlevs @Jipperism @euskonadox @fuadajip @AMTourky @greatermeans @tmeasday @ Eugene-Sviridov @nerfologist

@shilman , saya juga memikirkan hal ini. Kami dapat mempertimbangkan untuk mengekspos babel-loader dari react-scripts ... yang mungkin bisa membantu. Ada PR baru-baru ini yang melakukan hal serupa untuk chalk (https://github.com/facebook/create-react-app/pull/6150).

Atau, apakah akan lebih mudah jika ini adalah ketergantungan @storybook/react ? Daripada ketergantungan sebaya. Saya menyadari itu mungkin menyebabkan masalah bagi pengguna non-CRA.

Atau, kita bisa, ketika react-scripts ada, langsung impor babel-loader dari react-scripts/node_modules/babel-loader . Kami sudah memuat konfigurasi dari folder react-scripts .

@ igor-dv @ndelangen @tmeasday ada opini tentang opsi-opsi yang telah diuraikan oleh

Solusi ini sepertinya tidak berhasil untuk saya. Saya masih melihat konflik setelah mencoba solusi tersebut.

Solusi ini sepertinya tidak berhasil untuk saya. Saya masih melihat konflik setelah mencoba solusi tersebut.

Pastikan Anda menghapus awalan "^" jika tidak, Anda masih akan mendapatkan 8.0.5

Saya pikir kita mungkin bisa meminta babel-loader dari mana pun react-scripts menemukannya (menggunakan requireFrom atau sejenisnya, meskipun jika react-scripts mengekspornya, itu akan membuatnya lebih mudah ) jika kita menggunakan konfigurasi webpack CRA.

Sebuah preset akan membuatnya lebih bagus tapi saya pikir kita sudah memiliki kode kasus khusus untuk CRA (untuk menggunakan konfigurasinya) jadi mungkin akan relatif mudah untuk melakukan ini di sana?

Solusi ini sepertinya tidak berhasil untuk saya. Saya masih melihat konflik setelah mencoba solusi tersebut.

Pastikan Anda menghapus awalan "^" jika tidak, Anda masih akan mendapatkan 8.0.5

Inilah yang saya miliki di package.json saya: "babel-loader": "8.0.4"

Apakah ada langkah lain yang perlu diambil untuk menyiasatinya?

@jlmelis , versi "react-scripts" apa yang diinstal? Saya dapat mengonfirmasi bahwa untuk "react-scripts": "2.1.3" solusi tampaknya berfungsi dengan baik

@vsubbotskyy - Saya menjalankan create-react-app dengan npx. Versi yang ditampilkannya adalah 2.1.3. Sesuatu yang mungkin aneh dengan pengaturan saya. Saya hanya akan mengawasi ini untuk melihat apakah perbaikan berhasil. Terima kasih!

Saya bisa menyelesaikan pekerjaan saya. Terima kasih

Saya telah melihat-lihat, dan saya pikir pada tahap ini akan lebih mudah untuk meminta loader dari CRA (saat CRA digunakan). Saya akan membuat PR sekarang.

@tmeasday ,

Saya telah melalui masalah yang sama dan akhirnya memperbaikinya. Saya mengubah babel-loader kembali ke "8.0.4" di file package.json saya dan perlu menghapus file json kunci-paket dan saya kemudian dapat memulai dan menguji dengan buku cerita. Semoga bermanfaat.

"_Saya mengubah babel-loader kembali ke" 8.0.4 "di package.json_" saya
Saya harap itu bukan solusinya dan akan segera diperbaiki karena itu memblokir kami untuk memperbarui skrip-react: /
Terima kasih

+1

Maaf semua, saya keluar dari tindakan selama 1,5 minggu dan tidak mengejar review ini. Melakukannya sekarang.

Masih mengalami masalah yang sama

Terima kasih @oscargws , kami secara aktif menyelidiki ini dan # 5308 diangkat untuk menyelesaikannya. @ndelangen , bisa lihat PR itu?

@mrckeb ah sangat bagus. Bagi siapa pun yang mengalami masalah, mengubah versi babel-loader di package.json secara manual telah memperbaikinya untuk saya!

Apakah ada yang tahu persis apa yang rusak di sana? Ini adalah versi patch benjolan, tampaknya aneh bagi saya.

@ igor-dv, masalahnya adalah bahwa CRA mengharapkan versi yang sama persis - dan jika sesuatu diinstal ke package.json yang bertentangan, itu membuat kesalahan. Jadi, kapan pun CRA ada satu atau dua versi di belakang (bahkan jika versi patch), pengguna dapat melihat kesalahan ini setelah menginstal Storybook.

Solusinya di sini adalah menggunakan versi CRA babel-loader saat bekerja dengan CRA, sehingga masalah ini tidak terjadi.

Solusi berikut berhasil untuk saya:

Mengubah baris di package.json menjadi "babel-loader": "8.0.4" sepertinya sudah memperbaikinya.

Ada pembaruan tentang yang satu ini? tidak dapat menyelesaikannya hanya dengan menambahkan "babel-loader": "8.0.4" atau langkah lainnya

Ada pembaruan tentang yang satu ini? tidak dapat menyelesaikannya hanya dengan menambahkan "babel-loader": "8.0.4" atau langkah lainnya

Saya dapat menyelesaikannya dengan menambahkan babel-loader 8.0.4 sebagai dependensi dan dependensi peer.

Saya dapat menyelesaikannya dengan menambahkan babel-loader 8.0.4 sebagai dependensi dan dependensi peer.

Unfournatatley bukan untuk saya, milik saya meminta saya untuk babel-loader": "8.0.5 , tidak yakin apakah itu membuat perbedaan, juga, ketika saya menjalankan npm ls babel-loader itu melempar ini:

├── [email protected] 
└─┬ [email protected]
  ├── [email protected]  deduped
  └─┬ [email protected]
    └── [email protected]

@ Rolando-Barbella Coba pin versi melalui bidang resolution di package.json Anda ke 8.0.4

Saya mengubah versi dari 2.1.2 menjadi 2.1.5 kemudian terselesaikan

Ya, ini adalah solusi yang bagus untuk saat ini @nguyentuandat , tetapi hanya sementara sampai kami mengetahui cara menanganinya dengan benar.

Memperbarui skrip reaksi berhasil untuk saya (thx, @nguyentuandat). Saya menggunakan 2.1.1, diperbarui dengan instruksi dari changelog :

yarn add --exact [email protected]

Setelah mencoba semuanya di sini, saya menemukan solusinya.

Cukup buka .profil di editor teks (tersembunyi di direktori Beranda jadi tekan Ctrl + H)

Cukup tempel baris ini di bagian bawah profil

ekspor PATH = $ HOME / .node_modules_global / bin: $ PATH

dan Voila .... berhasil

Menggunakan "react-scripts": "2.1.8" dan storybook v5, saya mendapatkan kesalahan yang sama.
Seperti yang dinyatakan oleh orang lain, menambahkan "babel-loader": "8.0.4" secara manual sebagai devDependency memperbaikinya.

Menginstal "react-scripts": "2.1.5", dan "@storybook/react": "^4.1.4", menggunakan Yarn .

The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.0.5"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree: babel-loader (version: 8.0.4)

Menjalankan npm ls babel-loader melempar ini:
├─┬ UNMET DEPENDENCY [email protected]
│ └── UNMET DEPENDENCY [email protected]
└─┬ UNMET DEPENDENCY [email protected]
└── UNMET DEPENDENCY [email protected]

babel-loader tidak ada di package.json saya. Dan menambahkan versi 8.0.4 sebagai devDependency tidak memperbaiki masalah saya.

npm i berfungsi seperti yang diharapkan. Tetapi ketika mencoba npm start saya menemukan masalah yang sama:

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.0.5"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
.../node_modules/babel-loader (version: 8.0.4)

Astaga !! Saya baru saja merilis https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.25 berisi PR # 5308 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.

Saya baru saja mencoba versi beta terbaru. Kami menggunakan buku cerita dengan [email protected] dan pengaturan Ketikan yang dijelaskan di sini: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

Ini gagal karena Requirement tidak dapat menemukan CRA babel-loader. Apakah sudah ada solusi untuk itu?

@mrmckeb tahu sesuatu tentang ini?

Saya baru saja mencoba versi beta terbaru. Kami menggunakan buku cerita dengan [email protected] dan pengaturan Ketikan yang dijelaskan di sini: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

Ini gagal karena Requirement tidak dapat menemukan CRA babel-loader. Apakah sudah ada solusi untuk itu?

Ya, saya mendapat masalah yang sama juga dengan "react-scripts": "3.0.1"

Inilah yang saya dapatkan setelah menambahkan buku cerita ke basis kode:

* The react-scripts package provided by Create React App requires a dependency:

  "babel-jest": "24.7.1"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-jest was detected higher up in the tree:

  /xxx/node_modules/babel-jest (version: 24.8.0) 

• devDependencies

"typescript": "3.4.5",
"@storybook/react": "^5.0.11",
"@storybook/addon-actions": "^5.0.11",
"@storybook/addon-links": "^5.0.11",
"@storybook/addons": "^5.0.11",
"@babel/core": "^7.4.4",
"babel-loader": "^8.0.6"

• npm ls babel-jest

└─┬ [email protected]
  ├── [email protected] 
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected] 

Hi @patricknick dan @wxqee, Anda tidak harus memiliki konfigurasi kustom jika Anda menggunakan CRA :) naskah bekerja out-of-the-box. Cobalah dengan penginstalan baru, tanpa konfigurasi khusus, dan beri tahu saya jika tidak berhasil untuk Anda.

@shilman - mungkin kita harus memperbarui dokumen untuk mencerminkan ini?

Masalah babel-jest harus diselesaikan di versi terbaru CRA @ummahusla - jika tidak, silakan angkat ke https://github.com/facebook/create-react-app/issues.

Hai @mrmckeb , terima kasih atas bantuan Anda! Saya baru saja mencoba solusi Anda dan menghapus webpack.config.js khusus saya:

// @ts-check

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]],
    },
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

Sayangnya, ini menghasilkan kesalahan berikut:

ERROR in ./.storybook/config.tsx 22:32
Module parse failed: Unexpected token (22:32)
You may need an appropriate loader to handle this file type.
 addDecorator(story => {
   const DefaultRoute = props => <div id="router">{story()}</div>;
   return (
    <BrowserRouter>

Ini config.tsx saya:

import { withOptions } from '@storybook/addon-options';
import { addDecorator, configure } from '@storybook/react';
import { Grommet } from 'grommet';
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import GlobalStyle from '../src/globalStyles';
import '../src/i18n';
import { theme } from '../src/theme/index';

// automatically import all files ending in *.stories.tsx
const req = require.context('../src', true, /\.stories\.tsx$/);

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

withOptions({
  addonPanelInRight: true,
});

addDecorator(story => {
  const DefaultRoute = props => <div id="router">{story()}</div>;
  return (
    <BrowserRouter>
      <DefaultRoute default />
    </BrowserRouter>
  );
});
addDecorator(story => (
  <>
    <GlobalStyle />
    {story()}
  </>
));
addDecorator(story => <Grommet theme={theme}>{story()}</Grommet>);

configure(loadStories, module);

Bisakah memberi saya petunjuk tentang ini? Terima kasih!

Saya mendapatkan masalah yang sama. Sepertinya sangat tidak senang mengurai JSX .

@mrmckeb Saya baru saja merilis @storybook/preset-typescript dan tetap perlu memperbarui dokumen ketikan. Jika Anda memberi tahu saya apa yang harus saya katakan tentang Typecript dan CRA, saya akan dengan senang hati mengerjakannya ke dalam pembaruan. Terima kasih! 🙇

Terima kasih @shilman. Preset CRA menggunakan konfigurasi CRA di bawah tenda, sehingga memiliki dukungan untuk semua yang dapat dilakukan CRA - TypeScript, modul CSS, Sass, dll. Pada dasarnya, tidak ada yang diperlukan agar ini berfungsi, cukup instal dan mulai!

Berlari ke masalah babel-loader atas seperti yang disebutkan, dengan tambahan pengaturan Storybook itu meledakkan CRA saya. Saya telah menginstal rilis @storybook/[email protected] . Buku Cerita akan dibangun dan dijalankan, tetapi tidak ada Cerita / Komponen saya yang terisi di UI. Dan stdout semua cerita saya membuang peringatan ini.

WARNING in ./stories/core.stories.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /project-ui/stories/core.stories.js: Unexpected token (14:47)
  13 | storiesOf('core/component', module)
> 14 |   .add('standard text', () => <Component block={FIXTURE} />)

Mencoba variasi lain dan tidak ada yang berhasil ...

const FIXTURE = {..some-data...}

storiesOf('core/component', module)
   .add('standard text', () => (<Component block={FIXTURE} />))

Mengembalikan ke 5.0.11 ini berfungsi lagi untuk pembuatan Storybook dan tidak lagi melempar peringatan. Dan CRA saya berfungsi kembali ... Apakah saya perlu melakukan sesuatu yang lain untuk jalur peningkatan? Baru mengatur buku cerita kemarin jadi baru untuk proyek ini.

Saat ini semuanya berfungsi lagi ... tetapi khawatir tentang keadaan lingkungan saya terkait rilis 5.1.x .

Untuk berjaga-jaga jika ada orang lain yang berada dalam situasi yang sama dengan saya: Saya tidak bisa seumur hidup saya mendapatkan integrasi Storybooks + CRA, di mana Storybooks menggunakan setup build CRA. Namun, saya kemudian mencoba memindahkan cerita saya ke direktori src/ dari proyek CRA saya, dan tiba-tiba berhasil. Saya tidak tahu mengapa, atau jika telah direkomendasikan atau diwajibkan selama ini, tetapi ini memperbaikinya untuk saya.

Saya mengalami masalah ini juga, dengan aplikasi ketikan CRA baru. CRA terbaru dari master dan buku cerita 5.0.11

@revmischa apakah cerita Anda di bawah src/ ?

Ya @shilman - Saya pada dasarnya hanya menjalankan CRA lalu sb init: https://github.com/jetbridge/create-react-app/pull/1/files#diff -0ae46a2383dedcac5f5e369f5ca5f169R35

Ceritanya ada di dalam src /.

=> Found "[email protected]"
info Has been hoisted to "babel-loader"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "92KB"
info Disk size with unique dependencies: "520KB"
info Disk size with transitive dependencies: "1.28MB"
info Number of shared dependencies: 18
=> Found "jetbridge-react-scripts#[email protected]"
info This module exists because "jetbridge-react-scripts" depends on it.
info Disk size without dependencies: "76KB"
info Disk size with unique dependencies: "536KB"
info Disk size with transitive dependencies: "2.4MB"
info Number of shared dependencies: 29
=> Found "babel-preset-react-app#[email protected]"
info This module exists because "@storybook#react#babel-preset-react-app" depends on it.
info Disk size without dependencies: "1020KB"
info Disk size with unique dependencies: "1.45MB"
info Disk size with transitive dependencies: "3.32MB"
info Number of shared dependencies: 29

Jika saya menghapusnya dari devDependencies:

=> Found "[email protected]"
info Reasons this module exists
   - "jetbridge-react-scripts" depends on it
   - Hoisted from "jetbridge-react-scripts#babel-loader"
   - Hoisted from "@storybook#react#babel-preset-react-app#babel-loader"
info Disk size without dependencies: "92KB"
info Disk size with unique dependencies: "552KB"
info Disk size with transitive dependencies: "2.41MB"
info Number of shared dependencies: 29

Sepertinya saya memiliki versi berbeda dalam sebuah proyek di folder terlampir.

Saya memindahkan semua cerita saya dari ./stories/* ke ./src/stories/* dan memperbarui .storybook/config.js dan sekarang semuanya berfungsi dengan @storybook/[email protected] . Karena baru saja menyiapkannya beberapa hari yang lalu, panduan dokumen / penyiapan untuk React akan menjadi kedaluwarsa bagi mereka yang datang dengan penyiapan CRA baru.

Jika tidak, masalah tampak sudah diperbaiki 👍

Halo semuanya, ya, pastikan untuk menghapus babel-loader dan lakukan pemeriksaan cepat untuk melihat apakah terdaftar di tempat lain.

Anda juga dapat memberi tahu CRA untuk melewati pemeriksaan itu jika Anda mau, tetapi itu ada untuk keamanan ...

Saya masih mengalami masalah ini dengan @ storybook / react 5.0.11 dan aplikasi create-react terbaru dari master.
Masalahnya adalah CRA menginginkan babel-loader 8.0.5 dan menjalankan sb init menambahkan "babel-loader": "^8.0.6" ke package.json saya
Jadi bagaimana dengan mendeteksi babel-loader yang sudah dibutuhkan CRA dan menambahkannya? atau lewati saja penambahan babel-loader ke package.json di sb init jika CRA terdeteksi? Menyinkronkan dua versi yang tepat antara buku cerita dan CRA bukanlah solusi untuk apa pun, berdasarkan sejarah masalah ini.

Tolong saya sangat membutuhkan bantuan.

Saya mencoba segalanya kecuali semuanya berhasil.

`Mungkin ada masalah dengan pohon ketergantungan proyek.
Ini mungkin bukan bug di Create React App, tetapi sesuatu yang perlu Anda perbaiki secara lokal.

Paket react-scripts yang disediakan oleh Create React App membutuhkan ketergantungan:

"babel-loader": "8.0.5"

Jangan mencoba menginstalnya secara manual: manajer paket Anda melakukannya secara otomatis.
Namun, versi berbeda dari babel-loader terdeteksi lebih tinggi di pohon:

c: \ Users \ Z-Dra \ node_modulesbabel-loader (versi: 8.0.6)

Menginstal versi yang tidak kompatibel secara manual diketahui menyebabkan masalah hard-to-debug.

Jika Anda lebih suka mengabaikan pemeriksaan ini, tambahkan SKIP_PREFLIGHT_CHECK = true ke file .env dalam proyek Anda.
Itu akan menonaktifkan pesan ini secara permanen tetapi Anda mungkin mengalami masalah lain.

Untuk memperbaiki pohon ketergantungan, coba ikuti langkah-langkah di bawah ini dengan urutan yang tepat:

1. Hapus package-lock.json (bukan package.json!) Dan / atau yarn.lock di folder proyek Anda.
2. Hapus node_modules di folder proyek Anda.
3. Hapus "babel-loader" dari dependensi dan / atau devDependencies di file package.json di folder project Anda.
4. Jalankan npm install atau utas, tergantung pada pengelola paket yang Anda gunakan.

Dalam kebanyakan kasus, ini seharusnya cukup untuk memperbaiki masalah.
Jika ini tidak membantu, ada beberapa hal lain yang dapat Anda coba:

1. Jika Anda menggunakan npm, instal benang (http://yarnpkg.com/) dan ulangi langkah-langkah di atas dengannya.
   Ini dapat membantu karena npm memiliki masalah umum dengan pengangkatan paket yang dapat diselesaikan di versi mendatang.

2. Periksa apakah c: \ Users \ Z-Dra \ node_modulesbabel-loader berada di luar direktori proyek Anda.
   Misalnya, Anda mungkin tidak sengaja menginstal sesuatu di folder utama Anda.

3. Coba jalankan npm ls babel-loader di folder proyek Anda.
   Ini akan memberi tahu Anda paket lain mana (selain dari skrip-react yang diharapkan) yang menginstal babel-loader.

Jika tidak ada yang membantu, tambahkan SKIP_PREFLIGHT_CHECK = true ke file .env dalam proyek Anda.
Itu akan menonaktifkan pemeriksaan preflight ini secara permanen jika Anda ingin melanjutkan.

NB Kami tahu pesan ini panjang tetapi harap baca langkah-langkah di atas :-) Kami harap Anda merasa terbantu!

npm ERR! kode ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] mulai: react-scripts start
npm ERR! Status keluar 1
npm ERR!
npm ERR! Gagal di skrip start [email protected] .
npm ERR! Ini mungkin bukan masalah dengan npm. Kemungkinan ada hasil penebangan tambahan di atas.

npm ERR! Log lengkap proses ini dapat ditemukan di:
npm ERR! C: \ Users \ Z-Dra \ AppData \ Roaming \ npm-cache_logs \ 2019-05-29T12_53_58_726Z-debug.log`

Tolong ada yang bisa membantu saya?

Saya menemukan bahwa saya memiliki babel-loader 8.0.6 diinstal secara global di direktori home saya /home/user/node_modules , jadi di bawah direktori proyek saya telah terinstal babel-loader 8.0.5, jadi saya menghapus npm remove babel-loader di rumah saya direktori (8.0.6), dari semua bekerja dengan baik.

Ini adalah pertanyaan bodoh yang saya yakin tapi ...
Jika saya menggunakan skrip ketikan, untuk apa saya memerlukan babel?

Terima kasih @shilman , tetapi pra-rilis tampaknya tidak memperbaiki masalah babel-loader.

Langkah-langkah yang diambil:

1. Instal Ketikan ver. CRA (react-script 3.0.1) melalui npx create-react-app my-app --typescript
2. npx -p @storybook/cli sb init --type react
3. Konfigurasikan buku cerita untuk TS menggunakan petunjuk di https://storybook.js.org/docs/configurations/typescript-config/ & demo https://github.com/johot/storybook4-cra2-typescript-react-docgen-typescript-demo (catatan: webpack.config.js dalam demo sudah usang dan diperbaiki di sini: https://github.com/storybookjs/storybook/issues/5877#issuecomment-470186882)
4. Hapus yarn.lock & folder modul node.
5. Hapus @babel/core & babel-loader dev depedency dari package.json
6. yarn add -D @storybook/react@next
7. yarn
8. yarn storybook - Kesalahan: Cannot find module 'babel-loader'

Package.json deps:

  "dependencies": {
    "@types/jest": "24.0.13",
    "@types/node": "12.0.4",
    "@types/react": "16.8.19",
    "@types/react-dom": "16.8.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "styled-components": "^4.2.1",
    "typescript": "3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5", // I added this back the first time I got babel-loader missing error, but this still doesn't solve it.
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-info": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@storybook/react": "^5.1.0-rc.3",
    "@testing-library/react": "^8.0.1",
    "@types/storybook__addon-actions": "^3.4.2",
    "@types/storybook__addon-info": "^4.1.1",
    "@types/storybook__addon-links": "^3.3.4",
    "@types/storybook__addons": "^4.1.0",
    "@types/storybook__react": "^4.0.1",
    "husky": "^2.3.0",
    "jest-dom": "^3.4.0",
    "lint-staged": "^8.1.7",
    "prettier": "^1.17.1",
    "react-docgen-typescript-loader": "^3.1.0"
  },

Penyetelan Dasar tanpa Skrip Ketik bahkan tidak berfungsi untuk saya

1. npx create-react-app my-app
2. cd my-app
3. npx -p @storybook/cli sb init --type react

CRA mengharapkan "babel-loader": "8.0.5" tetapi menemukan 8.0.6 . Namun yang dihasilkan packages.json hsa berikut devDependency terdaftar:

  "devDependencies": {
    "@storybook/react": "^5.0.11",
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@babel/core": "^7.4.5",
    "babel-loader": "^8.0.6"
  }

Menyetel versi ke "babel-loader": "8.0.5" tidak menyelesaikan masalah ini.

Juga saya memiliki Masalah serupa di proyek lain di mana CRA (3.0.1) mengharapkan "webpack": "4.29.6" tetapi menemukan 4.32.2 . Itu tidak ditentukan dalam dependecird saya di dalam package.json
npm ls webpack acara:

+-- @storybook/[email protected]
| +-- @storybook/[email protected]
| | `-- [email protected]  deduped
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
`-- [email protected]
  `-- [email protected]  deduped

[email protected] menyediakan versi webpack yang lebih baru, tetapi CRA menginginkan versi yang lebih lama.
Menambahkan [email protected] ke dependensi tidak memperbaikinya. Tidak begitu yakin apakah ini masalah dengan buku cerita Anda ..

@vipyoshi Beberapa komentar:

• Anda tidak boleh melewatkan --type react . Biarkan saja menggunakan template CRA.
• Ini diperbaiki di versi terbaru @storybook/cli@next dan kami merilisnya sebagai stabil dalam 24 jam berikutnya.

Serius meskipun mengapa babel diperlukan jika saya menggunakan TypeScript?

@shilman @mrmckeb dengan versi terbaru:

"@storybook/addon-actions": "^5.1.1",
"@storybook/addon-links": "^5.1.1",
"@storybook/addons": "^5.1.1",
"@storybook/react": "^5.1.1",

Sintaks JSX tidak diubah dalam .storybooks/config.js dan start-storybook gagal dengan kesalahan sintaks (pada < ).

Menggunakan solusi sebelumnya dengan menginstal babel-loader tetapi dengan versi yang disinkronkan dengan CRA berfungsi dengan baik.

Saya mencoba memeriksa apakah CRA menggunakan babel-preset-react di beberapa folder tetapi tidak semua folder tetapi tidak berhasil.

Untuk konteksnya, saya menggunakan CRA 3.0.1 dan belum mengeluarkan.

Apa lagi masalahnya (haruskah saya membukanya)?
Bagaimana saya bisa membantu?

_{PS: Saya menggunakan dekorator untuk gaya global btw.}

Sintaks JSX tidak diubah di .storybooks / config.js dan start-storybook gagal dengan kesalahan sintaks (di <pertama).

@ rlecaro2 Masalah yang sama persis di sini!

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../Documents/pro/workshop/workshop-atomic-design/.storybook/config.js: Unexpected token (9:34)

>  9 | const themeDecorator = storyFn => <ThemeProvider theme={Theme}>{ storyFn() }</ThemeProvider>
     |                                   ^
  10 | addDecorator(themeDecorator);
  11 | configure(loadStories, module);

(mendeklarasikan babel-loader ke v8.0.5 di devDependencies juga memperbaiki masalah itu)

@revmischa Babel adalah bagaimana Anda dapat menggunakan TypeScript. Tim TS memberikan dua jalur - compiler TypeScript, atau plugin Babel.

@ rlecaro2 dan @Akaryatrh , kami membuat perubahan beberapa bulan yang lalu, di mana dalam rilis Buku Cerita terbaru, babel-loader tidak diinstal bersama CRA, dan malah ditemukan dari dalam CRA.

Seperti yang saya pahami, Anda tidak memiliki masalah sama sekali - selain fakta bahwa file dalam .storybook tidak diproses dengan benar. Ini karena konfigurasi Create React App mengabaikan file di luar sumber.

Kami membuat perubahan kecil untuk mengizinkan TypeScript di dalam direktori .storybook sini , dan dapat melakukan hal yang sama untuk konfigurasi lainnya. Saya berasumsi Anda berdua tidak menggunakan TypeScript, itulah sebabnya perbaikan itu tidak berhasil untuk Anda.

Saya sedikit bingung mengapa perbaikan devDependencies berfungsi ... Saya pikir itu juga perlu penyelidikan.

Perhatikan juga bahwa ini adalah masalah baru, tidak terkait dengan yang di atas. Saat komentar di sini mengingatkan semua pengguna, saya telah membuat tiket baru di sini: # 7201. Harap tambahkan detail di sana.

Bagus! Saya akan mencoba mencari tahu apa yang membuat ketergantungan dev berfungsi. Hanya untuk orang lain, masalahnya adalah # 7201 (kesalahan ketik kecil).

@ ramadhan

Ya bagi saya itu hanya pemikiran bodoh.

Ini adalah modul node lain di folder saya

Ini masih tidak berfungsi untuk saya, saya telah melihat masalah ini banyak tetapi tampaknya tidak dapat menemukan jalur perbaikan / peningkatan yang pasti atau pedoman tentang cara memperbaikinya.

FYI kami memiliki beberapa pekerjaan yang mengubah permainan pada dukungan CRA yang berasal dari @mrmckeb - semoga akan membuat alasan tentang masalah ini jauh lebih mudah

Saya juga menghadapi masalah yang sama, dan juga memperbaikinya. Nama proyek saya adalah 'idash2' dan saya menginstalnya

kode / web / frontend / idash2

Tetapi masalahnya adalah saya tidak sengaja menginstal node_modules di direktori ini

kode / web / frontend

Setelah saya menghapus kode / web / frontend / node_modules dan menginstal ulang aplikasi react lagi, masalah terpecahkan.

Penghargaan untuk solusi ini: Parinya Onsuwan

Saya mengalami masalah yang sama dan sepertinya tidak ada yang berhasil ... apakah ada solusi yang berfungsi permanen untuk masalah ini?

@isenese Saya yakin ini adalah bagian dari https://www.npmjs.com/package/@storybook/preset -create-react-app atau akan segera

@isenese , maaf saya telah keluar dari tindakan sedikit baru-baru ini.

Ini diselesaikan dalam versi baru Buku Cerita, atau setidaknya harus - berikan detail versi jika Anda masih menghadapi ini dan kami dapat membantu.

Halo, Saya pengguna CRA dan menghadapi masalah ini ketika saya menginisialisasi buku cerita dengan perintah berikut yang dijelaskan dalam dokumen untuk React .

npx -p @storybook/cli sb init --type react

Kemudian, saya memperbaiki masalah dengan menginisialisasi dengan yang berikut ini.

npx -p @storybook/cli sb init --type react_scripts

(Dan deteksi otomatis tanpa opsi --type juga berhasil. Keren!)

Saya pikir ini adalah kurangnya dokumentasi dan dapat membuat kesalahan semacam itu.
Tambahkan penjelasan tentang --type react_scripts ke halaman Buku Cerita untuk React atau buat tutorial terpisah untuk CRA.

Terima kasih!

Kami juga menguji coba preset baru untuk CRA, yang akan menggantikan preset bawaan untuk CRA. Ini akan mempermudah penyiapan di masa mendatang.

Halo, Saya pengguna CRA dan menghadapi masalah ini ketika saya menginisialisasi buku cerita dengan perintah berikut yang dijelaskan dalam dokumen untuk React .

npx -p @storybook/cli sb init --type react

Kemudian, saya memperbaiki masalah dengan menginisialisasi dengan yang berikut ini.

npx -p @storybook/cli sb init --type react_scripts

(Dan deteksi otomatis tanpa opsi --type juga berhasil. Keren!)

Saya pikir ini adalah kurangnya dokumentasi dan dapat membuat kesalahan semacam itu.
Tambahkan penjelasan tentang --type react_scripts ke halaman Buku Cerita untuk React atau buat tutorial terpisah untuk CRA.

Terima kasih!

Terima kasih banyak! Saya pergi pisang dengan ini.

Terima kasih teman-teman, saya akan membuat catatan untuk memperbarui dokumentasi itu.

@mrmckeb masih mengalami masalah yang sama (CRA 3.3 + Buku Cerita 5.2.8) dan tidak ada yang dapat ditemukan di dokumen tentang bendera react_scripts - akan sangat bagus untuk memilikinya di sana sehingga orang lain tidak perlu pergi melalui masalah GH untuk menemukan ini ... 🎉

@aericson , mohon maaf atas ketidaknyamanannya. Saya akan melihat hari ini.

Catatan, ini ada di konfigurasi lanjutan. Ia mengatakan:

Anda mungkin telah mencoba menggunakan panduan mulai cepat kami untuk menyiapkan proyek Anda untuk Buku Cerita. Jika gagal karena tidak dapat mendeteksi Anda menggunakan React, Anda dapat mencoba memaksanya untuk menggunakan React.

Saya akan memperbarui untuk menyebutkan CRA juga.

@mrmckeb Saya pikir ini lebih tentang hanya menemukan

npx -p @storybook/cli sb init --type react

tapi tidak

npx -p @storybook/cli sb init --type react_scripts

di dokumen saat melihat:

• https://storybook.js.org/docs/guides/quick-start-guide/
• https://storybook.js.org/docs/guides/guide-react/

jadi Anda pikir Anda melakukan semuanya dengan benar dengan menggunakan --type react saat Anda memiliki repo CRA.

menggunakan --type react menyebabkan kesalahan Cannot find module 'babel-jest' - --type react_scripts bekerja di luar kotak.

Dimengerti, dan dokumen sekarang diperbarui @pkyeck :)

Saya pikir secara keseluruhan, bagian dari dokumen itu harus lebih jelas ... Saya harap revisi # 9182 adalah. @ Saya pikir saya akan segera rilis.

Jika Anda memiliki babel-loader di package.json, Anda tidak dapat membangun aplikasi. Solusi terbaik yang saya dapatkan adalah:
`

"devDependencies": {
"@ babel / core": "^ 7.12.3",
"@ storybook / addon-actions": "^ 6.0.28",
"@ storybook / addon-essential": "^ 6.0.28",
"@ buku cerita / addon-links": "^ 6.0.28",
"@ buku cerita / node-logger": "^ 6.0.28",
"@ storybook / preset-create-react-app": "^ 3.1.5",
"@ storybook / react": "^ 6.0.28",
"@ testing-library / dom": "^ 7.26.5",
"@ testing-library / react-hooks": "^ 3.4.2",
"@ types / react": "^ 16.9.56",
"@ types / react-dom": "^ 16.9.9",
"@ types / styled-components": "^ 5.1.4",
"babel-loader": "8.1.0",
"babel-eslint": "^ 10.1.0",
"eslint-config-prettier": "^ 6.14.0",
"eslint-config-react-app": "^ 5.2.1",
"eslint-import-resolver-typescript": "^ 2.3.0",
"eslint-plugin-flowtype": "^ 4.7.0",
"eslint-plugin-import": "^ 2.22.1",
"eslint-plugin-jsx-a11y": "^ 6.3.1",
"eslint-plugin-prettier": "^ 3.1.4",
"eslint-plugin-react": "^ 7.21.5",
"eslint-plugin-react-hooks": "^ 4.2.0",
"jest-environment-jsdom-sixteen": "^ 1.0.3",
"komponen-gaya-lelucon": "^ 7.0.3",
"json-server": "^ 0.16.2",
"msw": "^ 0.21.3",
"lebih cantik": "^ 2.1.2",
"react-docgen-typescript-plugin": "^ 0.6.0",
"react-is": "^ 17.0.1",
"react-test-renderer": "^ 17.0.1"
},
"resolusi": {
" / react-scripts / / babel-loader": "^ 8.1.0"
}

`

Resolusi attibute menggunakan lib yang sama dari babel-loader.

Mengonfirmasi bahwa ini masih menjadi masalah dengan versi terbaru creat-react-app dan buku cerita.

Edit: create-react-app akan mengeluh tentang versi babel-loader yang salah di node_modules. Saya dapat menyelesaikan masalah ini menggunakan yarn add -D --exact [email protected] , yang merupakan versi yang diperlukan CRA.

Dapatkah mengonfirmasi bahwa saya juga mengalami masalah ini, Bisakah kita membuka kembali masalah ini? Saya tidak benar-benar ingin menyertakan babel-loader dalam paket saya jika saya tidak menggunakannya sendiri?
Saya dapat mengonfirmasi perbaikan @DylanCulfogienis berfungsi!

kami tidak lagi menginstal babel-loader ke dalam aplikasi CRA, jadi saya rasa kami tidak perlu membuka kembali masalah @eglavin

apakah masih gagal untuk Anda pada penginstalan baru?

masalah yang sama di sini

kami tidak lagi menginstal babel-loader ke dalam aplikasi CRA, jadi saya rasa kami tidak perlu membuka kembali masalah @eglavin

apakah masih gagal untuk Anda pada penginstalan baru?

Masalah yang sama di sini, jika aplikasi Anda perlu dijalankan dengan buku cerita maka Anda masih perlu menyertakan babel-loader .

Babel-loader sudah termasuk dalam CRA dan buku cerita bisa menggunakan yang satu itu. Tidak?

Ini masih menjadi masalah pada penginstalan baru versi CRA / SB terbaru (masing-masing 4.0.1 dan 6.1.18, pada saat penulisan ini).

Juga mengalami ini ketika menginstal CRA v4 dengan SB v6.1:

Masalah yang sama di sini: React 4.0.1 dan

yarn install @storybook/react 

front  | There might be a problem with the project dependency tree.
front  | It is likely not a bug in Create React App, but something you need to fix locally.
front  | The react-scripts package provided by Create React App requires a dependency:
front  |   "babel-loader": "8.1.0"
front  | Don't try to install it manually: your package manager does it automatically.
front  | However, a different version of babel-loader was detected higher up in the tree:
front  |   /path/to/front/node_modules/babel-loader (version: 8.2.2) 

PS: Haruskah kita membuka masalah baru karena menyangkut versi berbeda dari masalah yang sama?

Terima kasih banyak @DylanCulfogienis , Anda menyelamatkan hari saya !! Saya menghabiskan waktu berjam-jam untuk menghapus dan menginstal buku cerita dan bahkan menahan node_modules dir lagi dan lagi, dan yarn add -D --exact [email protected] berhasil!

Saya memiliki Monorepo dan saya menambahkan babel-loader ke paket React web seperti di atas (8.1.0). Ini menyelesaikan kesalahan babel-loader tetapi membuat kesalahan baru:

../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2982,14): error TS2300: Duplicate identifier 'LibraryManagedAttributes'.
../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2995,13): error TS2717: Subsequent property declarations must have the same type.  Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2996,13): error TS2717: Subsequent property declarations must have the same type.  Property 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2997,13): error TS2717: Subsequent property declarations must have the same type.  Property 'address' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

Saya dapat menyelesaikan masalah ini dengan mengupgrade versi @types/react-dom menjadi "17.0.0".

Solusi @DylanCulfogienis memperbaikinya untuk saya juga, setelah pertempuran setengah hari. Ada perintah lain dari https://github.com/storybookjs/storybook/issues/12408 yang dibungkus di sini, tetapi inilah pengaturan yang membuat saya melanjutkan:

# Create project
npx create-react-app my-project
cd my-project

# Add Storybook:
npx -p @storybook/cli sb init

# Update Storybook
npx sb<strong i="8">@next</strong> upgrade --prerelease

# Fix babel error
yarn add -D --exact [email protected]

# Start app
yarn start

# Start Storybook
yarn storybook

duplikat ke # 4764