Storybook: babel-loader конфликтует с create-react-app 2.1.3

+1

Означает ли это, что нам не следует устанавливать babel-loader для приложений CRA?

Хм, когда я удаляю babel-loader dep, сборник рассказов ломается ... 😕

Имея ту же проблему 😕

Та же проблема ... есть ли решение?

@ ayoola-moore Да, обходной путь - изменить строку в package.json на:

"babel-loader": "8.0.4"

Таким образом, будут работать как react-scripts и storybook . Все еще ищу лучшее решение. :смущенный:

cc @artisologic @YoannDelpierre @ovionlogis @patricknick @mrmckeb @ivnkld @viniciusreiss @dlevs @Jipperism @euskonadox @fuadajip @AMTourky @greatermeans @tmeasday @ Евгений-Свиридов @nerfologist

@shilman , я тоже об этом думаю. Мы могли бы рассмотреть возможность раскрытия babel-loader из сценариев реакции ... это может помочь. Недавно был PR, который сделал нечто подобное для chalk (https://github.com/facebook/create-react-app/pull/6150).

В качестве альтернативы, было бы проще, если бы это была зависимость @storybook/react ? Вместо взаимозависимости. Однако я понимаю, что это может вызвать проблемы у пользователей, не являющихся CRA.

Или мы могли бы, когда react-scripts существует, напрямую импортировать babel-loader из react-scripts/node_modules/babel-loader . Мы уже загружаем конфиг из папки react-scripts .

@ igor-dv @ndelangen @tmeasday есть какие-нибудь мнения о вариантах, которые @mrmckeb изложил выше? Мы можем справиться с этим с помощью предустановки CRA?

Мне кажется, что обходной путь не работает. Я все еще вижу конфликты после попытки обходного пути.

Мне кажется, что обходной путь не работает. Я все еще вижу конфликты после попытки обходного пути.

Убедитесь, что вы удалили ведущий "^", иначе вы все равно получите 8.0.5

Я думаю, нам, вероятно, может потребоваться babel-loader везде, где react-scripts найдет его (используя requireFrom или подобное, хотя, если бы react-scripts экспортировал его, это упростило бы ), если мы используем конфигурацию веб-пакета CRA.

Предустановка сделает это лучше, но я думаю, что у нас уже есть специальный код для CRA (для использования его конфигурации), поэтому, может быть, было бы относительно легко сделать это там?

Мне кажется, что обходной путь не работает. Я все еще вижу конфликты после попытки обходного пути.

Убедитесь, что вы удалили ведущий "^", иначе вы все равно получите 8.0.5

Вот что у меня есть в package.json: "babel-loader": "8.0.4"

Есть ли другие шаги, которые необходимо предпринять для решения этой проблемы?

@jlmelis , какая версия "

@vsubbotskyy - я запускаю приложение create-response-app с npx. Показанная версия - 2.1.3. Возможно, что-то еще не так с моей настройкой. Я просто буду следить за этим, чтобы увидеть, удастся ли исправить. Благодаря!

Я смог заставить работу работать. благодаря

Я осмотрелся, и думаю, что на данном этапе будет проще потребовать загрузчик от CRA (когда используется CRA). Сделаю пиар сейчас.

@tmeasday , было бы здорово, если бы вы могли взглянуть на PR № 5308 и оставить свой отзыв.

Я столкнулся с той же проблемой и, наконец, исправил ее. Я изменил загрузчик babel обратно на «8.0.4» в моем файле package.json, и мне нужно было удалить файл json с блокировкой пакетов, после чего я смог запустить и протестировать с помощью сборника рассказов. Надеюсь, это поможет.

"_Я изменил загрузчик babel обратно на" 8.0.4 "в моем package.json_"
Я надеюсь, что это не решение, и скоро мы его исправим, потому что это не позволяет нам обновлять сценарии реакции: /
благодаря

+1

Извините всех, я выбыл из строя на 1,5 недели и не гонялся за обзором по этому поводу. Сделаю это сейчас.

Все еще та же проблема

Спасибо @oscargws , мы активно исследуем эту проблему, и для ее решения был поднят номер 5308. @ndelangen , можешь взглянуть на этот пиар?

@mrmckeb ах, очень мило. Для всех, у кого есть проблема, ручное изменение версии babel-loader в package.json исправило ее для меня!

Кто-нибудь знает, что именно там сломалось? это шишка версии патча, мне кажется странным.

@ igor-dv, проблема в том, что CRA ожидает точного совпадения версии - и если что-то установлено в package.json что конфликтует, это выдает ошибку. Таким образом, в любое время, когда CRA отстает на одну или две версии (даже если версия исправлена), пользователи могут увидеть эту ошибку после установки Storybook.

Решением здесь является использование версии CRA babel-loader при работе с CRA, чтобы эта проблема не возникала.

Для меня работает следующий обходной путь:

Изменение строки в package.json на "babel-loader": "8.0.4" похоже, исправляет.

Есть обновления об этом? не могу решить эту проблему, просто добавив "babel-loader": "8.0.4" или любой другой шаг

Есть обновления об этом? не могу решить эту проблему, просто добавив "babel-loader": "8.0.4" или любой другой шаг

Мне удалось решить эту проблему, добавив babel-loader 8.0.4 как зависимость, так и зависимость от однорангового узла.

Мне удалось решить эту проблему, добавив babel-loader 8.0.4 как зависимость, так и зависимость от однорангового узла.

Unfournatatley не для меня, мой спрашивает меня о babel-loader": "8.0.5 , не уверен, что это имеет значение, также, когда я запускаю npm ls babel-loader он выдает это:

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

@ Rolando-Barbella Попытайтесь закрепить версию через поле resolution в вашем package.json на 8.0.4

Я изменил версию с 2.1.2 на 2.1.5 после чего она разрешилась

Да, на данный момент это хороший обходной путь @nguyentuandat , но только временно, пока мы не

У меня сработало обновление сценариев реакции (спасибо, @nguyentuandat). Я был на 2.1.1, обновлен инструкциями из журнала изменений :

yarn add --exact [email protected]

Перепробовав все здесь, я нашел решение.

Просто откройте .profile в текстовом редакторе (он скрыт в домашнем каталоге, поэтому нажмите Ctrl + H)

Просто вставьте эту строку в конец .profile

экспорт PATH = $ HOME / .node_modules_global / bin: $ PATH

и вуаля .... работает

Используя "react-scripts": "2.1.8" и storybook v5, я получаю ту же ошибку.
Как утверждали другие, ручное добавление "babel-loader": "8.0.4" как devDependency исправило это.

Установка "react-scripts": "2.1.5", и "@storybook/react": "^4.1.4", с использованием 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)

Запуск npm ls babel-loader вызывает это:
├─┬ UNMET DEPENDENCY [email protected]
│ └── UNMET DEPENDENCY [email protected]
└─┬ UNMET DEPENDENCY [email protected]
└── UNMET DEPENDENCY [email protected]

babel-loader отсутствует в моем package.json. И добавление версии 8.0.4 в качестве devDependency не решает проблему для меня.

npm i работает как положено. Но при попытке npm start я обнаружил ту же проблему:

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)

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

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

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

Я только что попробовал последнюю бета-версию. Мы используем сборник рассказов с [email protected] и настройкой Typescript, описанной здесь: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

Однако это не удается, поскольку требование не может найти загрузчик бабел CRA. Есть ли уже решение для этого?

@mrmckeb что-нибудь об этом знает?

Я только что попробовал последнюю бета-версию. Мы используем сборник рассказов с [email protected] и настройкой Typescript, описанной здесь: https://storybook.js.org/docs/configurations/typescript-config/#setting -up-typescript-with-babel-loader

Однако это не удается, поскольку требование не может найти загрузчик бабел CRA. Есть ли уже решение для этого?

Да, у меня такая же проблема с "react-scripts": "3.0.1"

Вот что я получил после добавления сборника рассказов в кодовую базу:

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

Привет, @patricknick и @wxqee , у вас не должно быть специальной конфигурации, если вы используете CRA :) TypeScript работает "из коробки". Попробуйте новую установку, без специальной конфигурации, и дайте мне знать, если она вам не подходит.

@shilman - может быть, нам стоит обновить документацию, чтобы отразить это?

Проблема babel-jest должна быть решена в последней версии CRA @ummahusla - если нет, поднимите ее на https://github.com/facebook/create-react-app/issues.

Привет, @mrmckeb , спасибо за помощь! Я просто попробовал ваше решение и удалил свой собственный webpack.config.js:

// @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;
};

К сожалению, это приводит к следующей ошибке:

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>

Это мой config.tsx:

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);

Не могли бы дать мне намек на это? Благодаря!

У меня такая же проблема. Вроде очень недоволен разбором JSX .

@mrmckeb Я только что выпустил @storybook/preset-typescript и мне все равно нужно обновить документы машинописного текста. Если вы дадите мне знать, что я должен сказать о Typescript и CRA, я буду рад включить это в обновление. Благодаря! 🙇

Спасибо @shilman. Предустановка CRA использует конфигурацию CRA под капотом, поэтому она поддерживает все, что CRA может делать - TypeScript, модули CSS, Sass и т. Д. По сути, для этого ничего не требуется, просто установите и работайте!

Пробежавшись по вышеуказанной проблеме babel-loader как уже упоминалось, добавление настройки Storybook взорвало мой CRA. Я установил выпуск @storybook/[email protected] . Storybook будет создан и запущен, но ни один из моих рассказов / компонентов не будет отображаться в пользовательском интерфейсе. И stdout все мои истории бросают эти предупреждения.

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} />)

Пробовал другие варианты, но ничего не работает ...

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

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

Возвращаясь к 5.0.11 он снова работает для сборок Storybook и больше не выдает предупреждений. И мой CRA снова работает ... Мне нужно что-то еще делать для пути обновления? Просто установите сборник рассказов вчера, так что это новость для проекта.

Прямо сейчас все снова работает ... но меня беспокоит состояние моей среды в связи с выпуском 5.1.x .

На всякий случай, если кто-то еще окажется в той же ситуации, что и я: я не мог, хоть убей, заставить работать интеграцию Storybooks + CRA, где Storybooks использует настройку сборки CRA. Однако затем я попытался переместить свои истории в каталог src/ моего проекта CRA, и внезапно это сработало. Я не знаю, почему, и было ли это рекомендовано или требовалось все время, но это исправило это для меня.

У меня тоже есть эта проблема с новым приложением CRA typescript. Самый последний CRA от мастера и сборника рассказов 5.0.11

@revmischa ваши истории под src/ ?

Да @shilman - я просто запускаю CRA, затем sb init: https://github.com/jetbridge/create-react-app/pull/1/files#diff -0ae46a2383dedcac5f5e369f5ca5f169R35

Истории находятся внутри 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

Если я удалю его из 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

Похоже, у меня была другая версия в проекте во вложенной папке.

Я переместил все свои истории из ./stories/* в ./src/stories/* и обновил .storybook/config.js и теперь все работает с @storybook/[email protected] . Просто настроив это на днях, руководство по документации / настройке для React будет устаревшим для тех, кто приходит с новой настройкой CRA.

В противном случае проблема будет решена 👍

Привет всем, да, обязательно удалите свой babel-loader и сделайте быструю выборочную проверку, чтобы увидеть, не указан ли он где-то еще.

Вы также можете сказать CRA пропустить эту проверку, если хотите, но это сделано для безопасности ...

У меня все еще проблема с @ storybook / react 5.0.11 и последним приложением create-response-app от мастера.
Проблема в том, что CRA требует babel-loader 8.0.5, а запуск sb init добавляет "babel-loader": "^8.0.6" в мои packages.json.
Так что насчет определения того, что CRA уже требует babel-loader, и добавления этого? или просто пропустите добавление babel-loader в package.json в sb init, если обнаружен CRA? синхронизация двух точных версий между сборником рассказов и CRA не является решением ни для чего, судя по истории этой проблемы.

Пожалуйста, мне действительно нужна помощь.

я пробую все, но все работает.

`Возможно, возникла проблема с деревом зависимостей проекта.
Скорее всего, это не ошибка в приложении Create React, а то, что вам нужно исправить локально.

Пакет response-scripts, предоставляемый приложением Create React, требует зависимости:

"бабель-погрузчик": "8.0.5"

Не пытайтесь установить его вручную: ваш менеджер пакетов делает это автоматически.
Однако выше в дереве была обнаружена другая версия babel-loader:

c: \ Users \ Z-Dra \ node_modulesbabel-loader (версия: 8.0.6)

Известно, что ручная установка несовместимых версий вызывает затруднения при отладке.

Если вы предпочитаете игнорировать эту проверку, добавьте SKIP_PREFLIGHT_CHECK = true в файл .env в своем проекте.
Это навсегда отключит это сообщение, но вы можете столкнуться с другими проблемами.

Чтобы исправить дерево зависимостей, попробуйте выполнить следующие шаги в точном порядке:

1. Удалите package-lock.json (не package.json!) И / или yarn.lock в папке вашего проекта.
2. Удалите node_modules в папке проекта.
3. Удалите "babel-loader" из зависимостей и / или devDependencies в файле package.json в папке вашего проекта.
4. Запустите npm install или yarn, в зависимости от того, какой менеджер пакетов вы используете.

В большинстве случаев этого должно быть достаточно для устранения проблемы.
Если это не помогло, вы можете попробовать еще несколько вещей:

1. Если вы использовали npm, установите yarn (http://yarnpkg.com/) и вместо этого повторите с ним вышеуказанные шаги.
   Это может помочь, поскольку в npm есть известные проблемы с подъемом пакетов, которые могут быть решены в будущих версиях.

2. Убедитесь, что c: \ Users \ Z-Dra \ node_modulesbabel-loader находится вне каталога вашего проекта.
   Например, вы могли случайно установить что-то в свою домашнюю папку.

3. Попробуйте запустить npm ls babel-loader в папке вашего проекта.
   Это расскажет вам, какой еще пакет (кроме ожидаемых сценариев реакции) установил babel-loader.

Если ничего не помогает, добавьте SKIP_PREFLIGHT_CHECK = true в файл .env вашего проекта.
Это навсегда отключит эту предполетную проверку, если вы все равно захотите продолжить.

PS Мы знаем, что это сообщение длинное, но, пожалуйста, прочтите приведенные выше шаги :-) Надеемся, вы найдете их полезными!

npm ERR! код ELIFECYCLE
npm ERR! ошибка 1
npm ERR! [email protected] начало: react-scripts start
npm ERR! Статус выхода 1
npm ERR!
npm ERR! Ошибка при запуске скрипта [email protected] .
npm ERR! Вероятно, это не проблема npm. Вероятно, выше есть дополнительный вывод журнала.

npm ERR! Полный журнал этого запуска можно найти в:
npm ERR! C: \ Users \ Z-Dra \ AppData \ Roaming \ npm-cache_logs \ 2019-05-29T12_53_58_726Z-debug.log`

Пожалуйста, кто-нибудь может мне помочь?

Я обнаружил, что babel-loader 8.0.6 установлен глобально в моем домашнем каталоге /home/user/node_modules , поэтому в моем каталоге проекта был установлен babel-loader 8.0.5, поэтому я удаляю npm remove babel-loader в моем доме каталог (8.0.6), чем все работает нормально.

Я уверен, что это глупый вопрос, но ...
Если я использую машинописный текст, зачем мне babel?

Спасибо @shilman , но предварительный выпуск, похоже, не исправляет проблему с загрузчиком babel.

Предпринятые шаги:

1. Установите последнюю версию Typescript. CRA (сценарий реакции 3.0.1) через npx create-react-app my-app --typescript
2. npx -p @storybook/cli sb init --type react
3. Настройте сборник рассказов для TS, используя инструкции в https://storybook.js.org/docs/configurations/typescript-config/ и демо https://github.com/johot/storybook4-cra2-typescript-react-docgen-typescript-demo (примечание: webpack.config.js в демонстрации устарел и исправлен здесь: https://github.com/storybookjs/storybook/issues/5877#issuecomment-470186882)
4. Удалите папку модулей yarn.lock & node.
5. Удалите зависимости @babel/core & babel-loader dev из package.json
6. yarn add -D @storybook/react@next
7. yarn
8. yarn storybook - Ошибка: 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"
  },

Базовая установка без машинописного текста у меня даже не работает

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

CRA ожидает "babel-loader": "8.0.5" но находит 8.0.6 . Однако сгенерированные packages.json hsa перечислены следующие devDependencies:

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

Установка версии на "babel-loader": "8.0.5" действительно решает эту проблему.

Также у меня есть аналогичная проблема в другом проекте, где CRA (3.0.1) ожидает "webpack": "4.29.6" но находит 4.32.2 . Это не определено в моем иждивенце внутри package.json
npm ls webpack показывает:

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

[email protected] предоставляет более новую версию webpack, но CRA хочет более старую версию.
Добавление [email protected] в зависимости исправляет это. Не совсем уверен, что это проблема в сборнике рассказов.

@vipyoshi Пара комментариев:

• Вы не должны передавать --type react . Пусть вместо этого он использует шаблон CRA.
• Это исправлено в последней версии @storybook/cli@next и мы выпускаем ее как стабильную в следующие 24 часа.

А если серьезно, зачем нужен babel, если я использую TypeScript?

@shilman @mrmckeb с последней версией:

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

Синтаксис JSX не преобразуется в .storybooks/config.js и start-storybook завершается с синтаксической ошибкой (на первом < ).

Использование предыдущего обходного пути установки babel-loader, но с версией, синхронизированной с CRA, работает нормально.

Я попытался проверить, использует ли CRA babel-preset-react в некоторых, но не во всех папках, но ничего не добился.

Для контекста я использую CRA 3.0.1 и не выбросил.

В чем еще может быть проблема (я должен открыть ее)?
Чем я могу помочь?

_{PS: Кстати, я использую декоратор для глобальных стилей.}

Синтаксис JSX не преобразуется в .storybooks / config.js, и start-storybook завершается с ошибкой синтаксиса (при первом <).

@ rlecaro2 Здесь точно

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);

(объявление babel-loader v8.0.5 в devDependencies также устраняет эту проблему)

@revmischa Babel - это то, как вы можете использовать TypeScript. Команда TS предлагает два пути - компилятор TypeScript или плагин Babel.

@ rlecaro2 и @Akaryatrh , мы внесли изменение несколько месяцев назад, когда в последних выпусках Storybook, babel-loader не устанавливается вместе с CRA, а вместо этого находится в CRA.

Насколько я понимаю, у вас вообще нет проблем - за исключением того, что файлы в .storybook обрабатываются некорректно. Это связано с тем, что конфигурация приложения Create React игнорирует файлы вне исходного кода.

Мы внесли небольшое изменение, чтобы разрешить TypeScript внутри каталога .storybook здесь , и можем сделать то же самое для остальной части конфигурации. Я предполагаю, что вы оба не используете TypeScript, поэтому это исправление у вас не сработало.

Я немного сбит с толку, почему это исправление devDependencies работает ... Думаю, это тоже требует расследования.

Также обратите внимание, что это новая проблема, не связанная с вышеизложенным. Поскольку комментарии здесь предупреждают всех пользователей, я создал здесь новый тикет: # 7201. Добавьте сюда подробности.

Большой! Я попытаюсь понять, что заставляет работать зависимость dev. Просто для всех, проблема # 7201 (небольшая опечатка).

@ ramonex1

Да для меня это просто глупая мысль.

Это еще один модуль узла в моих папках

Это все еще не работает для меня, я видел эту проблему несколько раз, но, похоже, не могу найти окончательного пути исправления / обновления или рекомендаций о том, как исправить.

К вашему сведению, у нас есть работа по изменению игры по поддержке CRA от @mrmckeb - надеюсь, это упростит рассуждение об этих проблемах

Я тоже столкнулся с той же проблемой, и тоже исправил ее. Мой проект называется idash2, и я устанавливаю его на

код / ​​веб / интерфейс / idash2

Но проблема в том, что я случайно установил node_modules в этот каталог

код / ​​веб / интерфейс

После того, как я удалю code / web / frontend / node_modules и снова переустановлю приложение React, проблема решена.

Кредит для этого решения: Паринья Онсуван

У меня такая же проблема, и, похоже, ничего не работает ... есть ли постоянное рабочее решение для этой проблемы?

@isenese Я считаю, что это часть https://www.npmjs.com/package/@storybook/preset -create-response-app или скоро будет

@isenese , извини, я недавно выбыл из строя.

Это решено в новых версиях Storybook или, по крайней мере, должно быть решено - пожалуйста, предоставьте сведения о версии, если вы все еще сталкиваетесь с этим, и мы можем помочь.

Здравствуйте, я пользователь CRA и столкнулся с этой проблемой, когда инициализировал сборник рассказов с помощью следующей команды, описанной в документе для React .

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

Затем я решил проблему, выполнив инициализацию следующим образом.

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

(И автоматическое определение без опции --type тоже прошло успешно. Круто!)

Я думаю, что это недостаток документации и я могу допускать подобные ошибки.
Добавьте объяснение о --type react_scripts на страницу Storybook for React или создайте отдельный учебник для CRA.

Благодаря!

Мы также тестируем новую предустановку для CRA, которая заменит встроенную предустановку для CRA. Это должно упростить настройку в будущем.

Здравствуйте, я пользователь CRA и столкнулся с этой проблемой, когда инициализировал сборник рассказов с помощью следующей команды, описанной в документе для React .

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

Затем я решил проблему, выполнив инициализацию следующим образом.

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

(И автоматическое определение без опции --type тоже прошло успешно. Круто!)

Я думаю, что это недостаток документации и я могу допускать подобные ошибки.
Добавьте объяснение о --type react_scripts на страницу Storybook for React или создайте отдельный учебник для CRA.

Благодаря!

Спасибо огромное! Я собирался с этим справиться.

Спасибо, ребята, я сделаю заметку, чтобы обновить эту документацию.

@mrmckeb все еще сталкивается с той же проблемой (CRA 3.3 + Storybook 5.2.8), и в документации ничего не может быть найдено о флаге react_scripts - было бы здорово, если бы он был там, чтобы другим не пришлось идти через вопросы GH, чтобы найти это ... 🎉

@aericson , извините за неудобства. Посмотрю сегодня.

Обратите внимание, это в расширенной конфигурации. Он говорит:

Возможно, вы пытались использовать наше краткое руководство, чтобы настроить свой проект для Storybook. Если это не удалось, потому что он не смог обнаружить, что вы используете React, вы можете попробовать заставить его использовать React.

Я также обновлю упоминание CRA.

@mrmckeb Я думаю, что это больше всего лишь поиск

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

но нет

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

в документации при просмотре:

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

поэтому вы думаете, что делаете все правильно, используя --type react когда у вас есть репо CRA.

использование --type react привело к Cannot find module 'babel-jest' ошибкам - --type react_scripts работает "из коробки".

Разобрался, и теперь документы обновлены @pkyeck :)

Я думаю, что в целом эта часть документации должна быть более ясной ... Я надеюсь, что исправление в # 9182 есть. Думаю , скоро выйдет

Если у вас есть babel-loader на package.json, вы не сможете собрать приложение. Лучшее решение, которое я получил:
`

"devDependencies": {
"@ babel / core": "^ 7.12.3",
"@ storybook / addon-actions": "^ 6.0.28",
"@ storybook / addon-essentials": "^ 6.0.28",
"@ storybook / addon-links": "^ 6.0.28",
"@ storybook / 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",
"@ типы / стили-компоненты": "^ 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",
"компоненты-шутки": "^ 7.0.3",
"json-server": "^ 0.16.2",
"msw": "^ 0.21.3",
"красивее": "^ 2.1.2",
"react-docgen-typescript-plugin": "^ 0.6.0",
"react-is": "^ 17.0.1",
"реагировать-тест-рендерер": "^ 17.0.1"
},
"разрешения": {
" / response-scripts / / babel-loader": "^ 8.1.0"
}

`

Разрешение атрибута с использованием той же библиотеки babel-loader.

Подтверждаем, что это все еще проблема с последними версиями creat-react-app и сборника рассказов.

Изменить: приложение create-react-app будет жаловаться на неправильную версию загрузчика babel в node_modules. Мне удалось решить проблему с помощью yarn add -D --exact [email protected] , той версии, которая требовалась CRA.

Могу подтвердить, что я тоже сталкиваюсь с этим. Можем ли мы снова открыть эту проблему? Я действительно не хочу включать в свой пакет babel-loader, если я не использую его сам?
Я могу подтвердить, что исправление

мы больше не устанавливаем babel-loader в приложения CRA, поэтому я не думаю, что нам нужно повторно открывать проблему @eglavin

у вас все еще не получается при новой установке?

такая же проблема здесь

мы больше не устанавливаем babel-loader в приложения CRA, поэтому я не думаю, что нам нужно повторно открывать проблему @eglavin

у вас все еще не получается при новой установке?

Та же проблема, если ваше приложение должно работать со сборником рассказов, вам все равно нужно включить babel-loader .

Babel-loader уже включен в CRA, и сборник рассказов может просто использовать его. Нет?

Это все еще проблема при свежих установках последних версий CRA / SB (4.0.1 и 6.1.18 соответственно на момент написания этой статьи).

Также столкнулся с этим при установке CRA v4 с SB v6.1:

Здесь такая же проблема: React 4.0.1 и

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: Стоит ли открывать новую проблему, поскольку она касается другой версии одной и той же проблемы?

Большое спасибо, yarn add -D --exact [email protected] действительно сработало!

У меня есть Monorepo, и я добавил babel-loader в свой пакет React web , как указано выше (8.1.0). Он устранил ошибку babel-loader но создал новые ошибки:

../../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>'.

Мне удалось решить эту проблему, обновив версию @types/react-dom до «17.0.0».

Решение @DylanCulfogienis исправило это и для меня после https://github.com/storybookjs/storybook/issues/12408 , но это настройка, которая меня подтолкнула:

# 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

дубликат # 4764