Storybook: Вебпак 4 поддерживает?

Storybook использует webpack как прямую зависимость. Таким образом, вы не можете заменить его версию на своей стороне. Вместо этого вы можете разветвить наш репозиторий и попытаться обновить соответствующие пакеты до бета-версии. Если все пойдет хорошо, мы сможем сделать обновление, как только оно станет стабильным.

Кто-нибудь еще этим занимается?

Я сделаю это, и это будет кардинальное изменение в сборнике рассказов. Дело в том, что пользовательские конфигурации веб-пакетов могут содержать плагины, а плагины, предназначенные для веб-пакета 4, в большинстве случаев (если не всегда) не совместимы с веб-пакетом 3.

Отлично, большое спасибо!

В настоящее время он не работает, так как, хотя сборник рассказов явно требует webpack==3.11.0 и получает частную копию Webpack 3 в своем подкаталоге node_modules , он также требует dotenv-webpack .

Теперь dotenv-webpack перечисляет одноранговую зависимость webpack==^1 || ^2 || ^3 || ^4 , что заставляет npm считать хорошей идеей установить его в основной node_modules рядом с Webpack 4 вместо следующего на Webpack 3 под @storybook/react/node_modules .

Теперь, как только сборник рассказов загружает dotenv-webpack , он, в свою очередь, вызывает вызов Webpack 4.

Я считаю, что вышеизложенное вызвано ошибкой в npm : https://github.com/npm/npm/issues/19944 .

Контрольный список вещей, которые блокируют миграцию с нашей стороны, сейчас перенесен на https://github.com/storybooks/storybook/pull/3148 .

Я получаю следующую ошибку при запуске Storybook с проектом, использующим Webpack 4;

node_modules/webpack/lib/DefinePlugin.js:42
        compiler.hooks.compilation.tap(
                       ^

TypeError: Cannot read property 'compilation' of undefined

Это мешает нам продолжить работу с Webpack 4.

Вы можете подписаться на обновления https://github.com/storybooks/storybook/pull/3148 .

@TomFoyster У меня была такая же проблема, я временно работал над ней, используя yarn вместо npm install . Кажется, исправить это в моем случае.

Выпущено как v4.0.0-alpha.0

@Hypnosphi после обновления до v4.0.0-alpha.0 моя компиляция сборника рассказов останавливается и зависает на плагине compat , никогда не продвигаясь дальше 95%:

⚡️ frontend@feature/data-integration ~ npm run storybook

> [email protected] storybook /Users/will/projects/frontend
> start-storybook -p 6006 -s ./assets

info @storybook/react v4.0.0-alpha.0
info
info => Loading static files from: /Users/will/projects/frontend/assets .
info => Loading custom .babelrc
info => Loading custom webpack config (extending mode).
 10% building modules 2/2 modules 0 activeℹ ｢wdm｣: wait until bundle finished:
(node:85321) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
 95% emitting unnamed compat plugin

Перед обновлением до альфа-сборки я столкнулся с проблемой @TomFoyster .

Я все еще могу заставить его скомпилироваться, используя yarn вместо npm , но новейшая сборка, похоже, не устранила проблему.

v4.0.0-alpha.0 не работает, используйте более позднюю альфа-версию (например, v4.0.0-alpha.3 )

Сделайте rm -rf node_modules а затем используйте yarn install . Он работает с storybook v3.4.1 и webpack v4.6.0

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

Я также пробовал v4.0.0-alpha.3 , но @storybook/[email protected] , похоже, не работает с ним.

Какую ошибку вы получаете @ankibalyan ? Этот аддон работает нормально в наших официальных примерах

Решение @danmakenoise работает для меня, кажется, с пряжей все в порядке, а не с npm.

К вашему сведению, если кто-то еще пытается установить с помощью npm вместо yarn , v4.0.0-alpha.3 теперь работает 👍

Получение той же ошибки, что и TomFoyster в 4.6.0 и рабочих пространствах пряжи

@AlastairTaft , какая версия сборника рассказов в вашем случае?

К сожалению, меня нет в книгах рассказов, это был единственный поиск Google по ошибке.

Обновление: в моем случае я сталкивался с ошибкой TomFoyster при запуске webpack в консоли. Вместо этого запуск npx webpack позволяет обойти это.

Довольно глупо, что yarn является зависимостью для этого.

РЕДАКТИРОВАТЬ: npm i -g @storybook/cli@alpha решает эту проблему 👍

Подтверждение того, что использование @storybook/cli@alpha и @storybook/react@alpha (при использовании React) помогает устранить проблемы с загрузкой сборника рассказов.

@Hypnosphi Я пытаюсь использовать v4.0.0-alpha.3 с веб-пакетом ^4.8.1 .
Я получаю ниже упомянутую ошибку
Error: Cannot find module '@storybook/react/dist/server/config/defaults/webpack.config.js'
Любые указатели?

@anujparikh Я могу ошибаться, но я считаю, что теперь его заменили на

const { createDefaultWebpackConfig } 
 = require('@storybook/core/dist/server/config/defaults/webpack.config.js');

Является ли @storybook/react устаревшим из-за @storybook/core? @pollen8

Мы столкнулись с той же проблемой, о которой @TomFoyster упоминает в https://github.com/storybooks/storybook/issues/3044#issuecomment -371071093 при попытке использовать webpack.DefinePlugin() в конфигурации Webpack для Storybook, но столкнулись с куча новых проблем, которые мы не смогли решить при обновлении до v4.0.0-alpha.14 .

Несколько уродливое решение заключалось в том, чтобы потребовать зависимость Storybook от Webpack 3 в .storybook/webpack.config.js вместо нашей зависимости от Webpack 4:

// .storybook/webpack.config.js

const webpack = require('webpack');
// ^ Causes the TypeError: Cannot read property 'compilation' of undefined

const webpack = require('../node_modules/@storybook/core/node_modules/webpack');
// ^ Works (for us...)

@hanshenrik -- Не могли бы вы показать пример полного файла webpack.config.js ? Я не уверен, как ваша строка впишется в мою конфигурацию:

const path = require("path");

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test:  /\.(ts|tsx)$/,
    use: [
      require.resolve("awesome-typescript-loader"),
      require.resolve("react-docgen-typescript-loader"),
    ],
  },
  {
    test: /\.scss$/,
    use: [
      "style-loader", "css-loader", "sass-loader"
    ]
  });

  config.resolve.extensions.push(".ts", ".tsx");

  return config;
};

@adyz Конечно!

const path = require('path');
const webpack = require('../node_modules/@storybook/core/node_modules/webpack');

module.exports = {
  module: {
    rules: [
      // ...
    ],
  },

  plugins: [
    new webpack.DefinePlugin({ // <-- Uses DefinePlugin from the imported webpack library
      HELLO: 'world',
    }),
  ],

  resolve: {
    // ...
  },
};

Однако вам это нужно только в том случае, если вам нужно использовать плагин из библиотеки веб-пакетов. Нам нужно было использовать DefinePlugin .

Я столкнулся с той же проблемой, связанной с DefinePlugin, но мой файл .storybook/webpack.config.js по-прежнему лишен каких-либо ссылок на DefinePlugin, эти ссылки находятся только в файле webpack.config.js моего основного проекта. Я не уверен, почему Storybook будет обращаться к основному файлу, если у него есть собственный внутри папки .storybook.

Я попытался перейти на пакет @storybook/ act@alpha и вижу огромный список других проблем при попытке запустить сервер. Один из самых интересных:

ERROR in ./node_modules/@company/styled-theme/build/index.js Module build failed (from ../node_modules/babel-loader/lib/index.js): TypeError: Plugin 2 specified in "C:\\sources\\demoapp\\node_modules\\@company\\styled-theme\\.babelrc" was expected to return a function but returned "undefined" at Function.normalisePlugin (C:\sources\demoapp\node_modules\babel-core\lib\transformation\file\options\option-manager.js:148:15)

Я убедился, что при замене того же проекта на Yarn все работает без проблем.

Как можно применить это исправление к проекту Vue-CLI 3?

@davek1979 npm install @storybook/vue@alpha делает свое дело!

Вчера я перепроверил исправление Yarn, затем стер папку node_modules и попробовал npm install . Ошибка на DefinePlugin вернулась. Я снова стер папку node_modules и изменил версию на @storybook/ act@alpha , а затем переделал npm install . Это делает свое дело. У меня работала версия альфы v4.0.0-alpha.16.

@anujparikh @pollen8, требующий нашей конфигурации по умолчанию напрямую, устарел, при его использовании вы должны увидеть сообщение об устаревании. Правильный способ - использовать третий аргумент: https://storybook.js.org/configurations/custom-webpack-config/#full -control-mode--default

@Melocaster нет, @storybook/core — это внутренняя библиотека, совместно используемая сборниками рассказов для разных фреймворков. Вы все равно должны использовать @storybook/react

@ханшенрик

столкнулись с кучей новых проблем, которые не смогли решить при обновлении до v4.0.0-alpha.14

Не могли бы вы попробовать еще раз с 4.0.0-alpha.20 и рассказать о проблемах, с которыми вы столкнулись, если таковые имеются?

Пробовал с 4.0.0-alpha.20 и webpack4.10.2 DefinePlugin не работает.

@nerdmax , не могли бы вы привести пример воспроизведения? Мы сами используем этот плагин, и он работает для нас

@Hypnosphi Спасибо за ваш ответ. Мне очень жаль, я только что проверил, он отлично работает с 4.0.0-alpha.20 . В моем проекте используются рабочие пространства пряжи, и кажется, что сборник рассказов установлен в корневом модуле node_module. После удаления этой папки и переустановки всех пакетов все работает.

Я смог заставить это работать после обновления до "@storybook/react": "^4.0.0-alpha.21" с "webpack": "^4.17.2"

У меня тоже проблема с DefinePlugin. Я пробовал выше рекомендуемые альфа-исправления без везения. Я следую этому руководству из коробки: https://www.valentinog.com/blog/react-webpack-babel/ , которое с последними версиями всех перечисленных зависимостей работает нормально.

getstorybook работает нормально, но npm run storybook выдает исключение, с которым в той или иной форме столкнулись многие другие.

сборник рассказов [email protected] C:\work\reactProject\
начало сборника рассказов -p 6006

информация @рассказ/реагировать v3.4.11
Информация
exec: фатальный: не репозиторий git (или какой-либо из родительских каталогов): .git

exec: фатальный: не репозиторий git (или какой-либо из родительских каталогов): .git

info => Загрузка пользовательского .babelrc
info => Загрузка пользовательской конфигурации веб-пакета (режим расширения).
C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93
компилятор.hooks.compilation.tap(
^

TypeError: не удается прочитать «компиляцию» свойства неопределенного
в DefinePlugin.apply (C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93:18)
в Compiler.apply (C:\work\reactProject\node_modules\@storybook\corenode_modules\tapable\lib\Tapable.js:375:16)
в веб-пакете (C:\work\reactProjectnode_modules\@storybook\corenode_moduleswebpack\libwebpack.js:33:19)
в exports.default (C:\work\reactProjectnode_modules\@storybook\core\dist\server\middleware.js:29:40)
в buildDev (C:\work\reactProjectnode_modules\@storybook\core\dist\server\build-dev.js:163:36)
на Объект.(C:\work\reactProjectnode_modules\@storybook\react\dist\server\index.js:23:22)
в Module._compile (module.js:652:30)
в Object.Module._extensions..js (module.js:663:10)
в Module.load (module.js:565:32)
в tryModuleLoad (module.js:505:12)
в Function.Module._load (module.js:497:3)
в Module.require (module.js:596:17)
при необходимости (внутренний/module.js:11:18)
на Объект.(C:\work\reactProjectnode_modules\@storybook\react\bin\index.js:3:1)
в Module._compile (module.js:652:30)
в Object.Module._extensions..js (module.js:663:10)
нпм ОШИБКА! код ELIFECYCLE
нпм ОШИБКА! ошибка 1
нпм ОШИБКА! сборник рассказов [email protected] : start-storybook -p 6006
нпм ОШИБКА! Выход из состояния 1
нпм ОШИБКА!
нпм ОШИБКА! Сбой сценария сборника рассказов [email protected] .
нпм ОШИБКА! Вероятно, это не проблема с npm. Вероятно, выше приведен дополнительный вывод журнала.

Я бы хотел попробовать Storybook, но похоже, что в этом случае мне мешает использование html-webpack-plugin.

Я смог заставить это работать после обновления до "@storybook/react": "^4.0.0-alpha.21" с "webpack": "^4.17.2"

@ridhoq - не могли бы вы поделиться своими config.js и webpack.config.js для сборника рассказов. У меня те же версии, и я все еще получаю следующую ошибку:

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12)

Кроме того, вы используете npm или пряжу?

Конечно - https://gist.github.com/ridhoq/bfeb7688994cb8fe25f481671bf4d3b4. Я не знаю, насколько это будет полезно для вас, поскольку у нас могут быть разные требования к сборке. Я использую npm для этого проекта

У меня была такая же проблема после обновления create-react-app до 2.0.3 , и эта проблема была решена путем обновления @storybook/react до ^4.0.0-alpha.21 .

Я создал рабочую версию со следующими (последними) версиями:

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

также добавлен аддон, надеюсь, этот пример кому-то поможет.

e../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15) в __webpack_require__ (bootstrap:724) в fn (bootstrap:101) в Module../ node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1) в __webpack_require__ (bootstrap:724) в fn (bootstrap:101) в модуле. ./node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1) в __webpack_require__ (bootstrap:724) в fn (bootstrap:101) в Object../node_modules/@storybook/components

@relaxed-tomato ты решил это? У меня такая же проблема. Благодарность

Я создал рабочую версию со следующими (последними) версиями:

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

также добавлен аддон, надеюсь, этот пример кому-то поможет.

Спасибо, это помогло мне. Но мне также пришлось установить babel-core и babel-loader .

Я создал рабочую версию со следующими (последними) версиями:

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

также добавлен аддон, надеюсь, этот пример кому-то поможет.

Спасибо, это помогло мне. Но мне также пришлось установить babel-core и babel-loader .

То же самое. Мне пришлось использовать следующие версии ядра и загрузчика babel:

"babel-core": "^6.26.3",
"babel-loader": "^7.0.4",

Я случайно столкнулся с этой проблемой, когда обновился до новейшего веб-пакета. Версия 4.20.2 работает нормально.

"@babel/cli": "7.1.2", // babel 7
"webpack": "4.20.2", // webpack 4
"@storybook/react": "^3.4.11", // storybook 3

Тоже получил ошибку. Ручная установка webpack 4.20.2, как упоминалось выше, на данный момент помогает.