Storybook: वेबपैक 4 सपोर्ट?

स्टोरीबुक वेबपैक का उपयोग प्रत्यक्ष निर्भरता के रूप में करता है। इसलिए आप इसके संस्करण को अपनी तरफ से नहीं बदल सकते। इसके बजाय, आप हमारे रेपो को फोर्क कर सकते हैं और संबंधित पैकेजों को बीटा संस्करण में अपडेट करने का प्रयास कर सकते हैं। अगर चीजें ठीक रहती हैं, तो हम अपग्रेड के स्थिर होते ही इसे करने में सक्षम होंगे

अभी तक कोई ऐसा कर रहा है?

मैं वह करूँगा, और यह कहानी की किताब में एक महत्वपूर्ण बदलाव होगा। बात यह है कि कस्टम वेबपैक कॉन्फ़िगरेशन में प्लगइन्स हो सकते हैं, और वेबपैक 4 के लिए लक्षित प्लगइन्स ज्यादातर बार (यदि हमेशा नहीं) वेबपैक 3 के साथ पीछे की ओर संगत नहीं होते हैं

बढ़िया, बहुत बहुत धन्यवाद!

वर्तमान में यह टूटा हुआ है क्योंकि भले ही स्टोरीबुक को स्पष्ट रूप से webpack==3.11.0 की आवश्यकता होती है और इसकी node_modules उपनिर्देशिका में वेबपैक 3 की एक निजी प्रति प्राप्त होती है, इसके लिए dotenv-webpack की भी आवश्यकता होती है।

अब dotenv-webpack webpack==^1 || ^2 || ^3 || ^4 एक सहकर्मी निर्भरता को सूचीबद्ध करता है जो npm बनाता है इसे अगले के बजाय वेबपैक 4 के बगल में मुख्य node_modules में स्थापित करना एक अच्छा विचार है। @storybook/react/node_modules के तहत वेबपैक 3 के लिए।

अब जैसे ही स्टोरीबुक dotenv-webpack लोड होती है, यह बदले में वेबपैक 4 को लागू करने का कारण बनता है।

मेरा मानना ​​है कि उपरोक्त npm में एक बग के कारण होता है: https://github.com/npm/npm/issues/19944

उन चीज़ों की चेकलिस्ट जो अभी हमारी ओर से प्रवास को अवरुद्ध करती हैं https://github.com/storybooks/storybook/pull/3148 पर ले जाया गया है

वेबपैक 4 का उपयोग कर प्रोजेक्ट के साथ स्टोरीबुक चलाते समय मुझे नीचे त्रुटि मिल रही है;

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

TypeError: Cannot read property 'compilation' of undefined

यह हमें वेबपैक 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 अब काम करता प्रतीत होता है

4.6.0 और यार्न कार्यक्षेत्र पर टॉमफॉयस्टर के समान त्रुटि प्राप्त करना

@AlastairTaft आपके मामले में कौन सा स्टोरीबुक संस्करण है?

ओह क्षमा करें, मैं कहानी की किताबों पर नहीं हूं, त्रुटि के लिए यह एकमात्र Google हिट था।

अद्यतन: कंसोल में webpack चलाते समय मेरे मामले के लिए मैं टॉमफॉयस्टर की त्रुटि को मार रहा था। इसके बजाय, npx webpack चलाना इसके आसपास हो जाता है।

काफी मूर्खतापूर्ण है कि yarn इसके लिए एक निर्भरता है।

संपादित करें: npm i -g @storybook/cli@alpha इस समस्या को ठीक करता है

पुष्टि करना कि @storybook/cli@alpha और @storybook/react@alpha (यदि प्रतिक्रिया का उपयोग कर रहे हैं) का उपयोग करने से स्टोरीबुक लोड करने के मुद्दों को ठीक करने में मदद मिलती है।

@Hypnosphi मैं वेबपैक $#$ ^4.8.1 $#$ के साथ v4.0.0-alpha.3 का उपयोग करने का प्रयास कर रहा हूं।
मुझे नीचे उल्लिखित त्रुटि मिल रही है
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');

क्या @स्टोरीबुक/रिएक्शन अब @स्टोरीबुक/कोर की वजह से बहिष्कृत हो गया है? @ पराग8

हमें उसी समस्या का सामना करना पड़ा जिसका उल्लेख @TomFoyster ने https://github.com/storybooks/storybook/issues/3044#issuecomment -371071093 में किया है, जब स्टोरीबुक के लिए वेबपैक कॉन्फ़िगरेशन में webpack.DefinePlugin() का उपयोग करने का प्रयास किया गया था, लेकिन एक में भाग गया नई समस्याओं का एक समूह जिसे हम v4.0.0-alpha.14 में अपग्रेड करते समय हल करने में असमर्थ थे।

कुछ हद तक बदसूरत समाधान के लिए हमारे वेबपैक 4 निर्भरता के बजाय .storybook/webpack.config.js में स्टोरीबुक की वेबपैक 3 निर्भरता की आवश्यकता थी:

// .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 फ़ोल्डर के अंदर हो।

मैंने @स्टोरीबुक/ रिएक्ट@अल्फा पैकेज में अपग्रेड करने का प्रयास किया है और सर्वर शुरू करने का प्रयास करते समय अन्य मुद्दों की एक विशाल सूची देख रहा हूं। अधिक दिलचस्प लोगों में से एक:

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)

मैंने सत्यापित किया है कि उसी प्रोजेक्ट को यार्न में स्वैप करने से सब कुछ बिना किसी समस्या के काम करने की अनुमति देता है।

इस सुधार को Vue-CLI 3 प्रोजेक्ट में कैसे लागू किया जाए?

@ davek1979 npm install @storybook/vue@alpha चाल चल रहा है!

कल मैंने यार्न फिक्स को फिर से सत्यापित किया, फिर मेरे नोड_मॉड्यूल्स फ़ोल्डर को मिटा दिया और कोशिश की npm install । DefinePlugin पर त्रुटि वापस आ गई। मैंने अपना नोड_मॉड्यूल फ़ोल्डर फिर से मिटा दिया, और संस्करण को @ स्टोरीबुक/ रिएक्ट @ अल्फा में बदल दिया और फिर npm install को फिर से कर दिया। यही चाल है। मेरे लिए काम करने वाले अल्फ़ा का संस्करण v4.0.0-alpha.16 . था

@ अनुजपारिख @ पराग 8 को हमारे डिफ़ॉल्ट कॉन्फ़िगरेशन की आवश्यकता है सीधे बहिष्कृत है, इसका उपयोग करते समय आपको एक बहिष्करण संदेश देखना चाहिए। तीसरे तर्क का उपयोग करने का सही तरीका है: https://storybook.js.org/configurations/custom-webpack-config/#full -control-mode--default

@Melocaster नहीं, @storybook/core एक आंतरिक पुस्तकालय है जिसे विभिन्न रूपरेखाओं के लिए स्टोरीबुक द्वारा साझा किया जाता है। आपको अभी भी @storybook/react का उपयोग करना चाहिए

@hanshenrik

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 के साथ ठीक काम कर रहा है। मेरी परियोजना यार्न के कार्यक्षेत्रों का उपयोग कर रही है और ऐसा लगता है कि स्टोरीबुक रूट नोड_मॉड्यूल में स्थापित हो गई है। उस फ़ोल्डर को हटाने और सभी पैकेजों को पुनर्स्थापित करने के बाद, यह काम करता है।

"webpack": "^4.17.2" . के साथ "webpack": "^4.17.2" "@storybook/react": "^4.0.0-alpha.21" में अपग्रेड करने के बाद मैं इसे काम करने में सक्षम था

मुझे DefinePlugin समस्या के साथ भी समस्या आ रही है। मैंने बिना किसी किस्मत के अनुशंसित अल्फा फिक्स के ऊपर कोशिश की है। मैं इस ट्यूटोरियल का अनुसरण कर रहा हूं: https://www.valentinog.com/blog/react-webpack-babel/ , जो सभी सूचीबद्ध निर्भरता के नवीनतम संस्करणों के साथ ठीक काम करता है।

getstorybook ठीक काम करता है, लेकिन npm run storybook अपवाद फेंकता है, कई अन्य लोगों को एक या दूसरे रूप में सामना करना पड़ता है।

[email protected] स्टोरीबुक C:\work\reactProject\
स्टार्ट-स्टोरीबुक -पी 6006

जानकारी @स्टोरीबुक/रिएक्शन v3.4.11
जानकारी
निष्पादन: घातक: गिट भंडार नहीं (या मूल निर्देशिकाओं में से कोई भी): .git

निष्पादन: घातक: गिट भंडार नहीं (या मूल निर्देशिकाओं में से कोई भी): .git

जानकारी => कस्टम लोड हो रहा है .babelrc
जानकारी => कस्टम वेबपैक कॉन्फ़िगरेशन लोड हो रहा है (विस्तार मोड)।
C:\work\reactProjectnode_moduleswebpack\lib\DefinPlugin.js:93
संकलक.हुक.संकलन.टैप(
^

लेखन त्रुटि: अपरिभाषित की संपत्ति 'संकलन' नहीं पढ़ सकता
DefinePlugin.apply पर (C:\work\reactProjectnode_moduleswebpack\lib\DefinPlugin.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)
एक्सपोर्ट्स डिफॉल्ट पर (C:\work\reactProjectnode_modules\@storybook\core\dist\server\middleware.js:29:40)
बिल्डडेव पर (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)
मॉड्यूल._कंपाइल पर (मॉड्यूल.जेएस:652:30)
Object.Module._extensions..js पर (module.js:663:10)
मॉड्यूल.लोड पर (मॉड्यूल.जेएस:565:32)
tryModuleLoad पर (module.js:505:12)
Function.Module._load पर (module.js:497:3)
मॉड्यूल.आवश्यकता पर (मॉड्यूल.जेएस:596:17)
आवश्यकता पर (आंतरिक/मॉड्यूल.जेएस:11:18)
वस्तु पर।(C:\work\reactProjectnode_modules\@storybook\react\bin\index.js:3:1)
मॉड्यूल._कंपाइल पर (मॉड्यूल.जेएस:652:30)
Object.Module._extensions..js पर (module.js:663:10)
एनपीएम ईआरआर! कोड ELIFECYCLE
एनपीएम ईआरआर! त्रुटि 1
एनपीएम ईआरआर! [email protected] स्टोरीबुक: start-storybook -p 6006
एनपीएम ईआरआर! बाहर निकलें स्थिति 1
एनपीएम ईआरआर!
एनपीएम ईआरआर! [email protected] स्टोरीबुक स्क्रिप्ट में विफल।
एनपीएम ईआरआर! यह शायद npm के साथ कोई समस्या नहीं है। ऊपर अतिरिक्त लॉगिंग आउटपुट होने की संभावना है।

मैं स्टोरीबुक को आजमाना पसंद करूंगा, लेकिन ऐसा लगता है कि इस उदाहरण में एचटीएमएल-वेबपैक-प्लगइन का उपयोग करके मुझे विफल कर दिया गया है।

"webpack": "^4.17.2" . के साथ "webpack": "^4.17.2" "@storybook/react": "^4.0.0-alpha.21" में अपग्रेड करने के बाद मैं इसे काम करने में सक्षम था

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

कुछ Addon भी जोड़ा, आशा है कि यह उदाहरण किसी की मदद करेगा।

e../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15) __webpack_require__ (बूटस्ट्रैप: 724) पर fn (बूटस्ट्रैप: 101) मॉड्यूल पर../ node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1) __webpack_require__ (बूटस्ट्रैप: 724) पर fn (बूटस्ट्रैप: 101) पर मॉड्यूल। ./node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1) __webpack_require__ (बूटस्ट्रैप: 724) पर fn (बूटस्ट्रैप: 101) पर Object../node_modules/@storybook/components पर

@ आराम से टमाटर क्या आपने इसका समाधान किया? मेरे साथ भी वही दिक्कत है। धन्यवाद

मैंने निम्नलिखित (नवीनतम) संस्करणों के साथ एक कार्यशील संस्करण बनाया है:

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

कुछ Addon भी जोड़ा, आशा है कि यह उदाहरण किसी की मदद करेगा।

धन्यवाद, इसने मेरे लिए चाल चली। लेकिन मुझे babel-core और babel-loader भी इंस्टॉल करना पड़ा।

मैंने निम्नलिखित (नवीनतम) संस्करणों के साथ एक कार्यशील संस्करण बनाया है:

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

कुछ Addon भी जोड़ा, आशा है कि यह उदाहरण किसी की मदद करेगा।

धन्यवाद, इसने मेरे लिए चाल चली। लेकिन मुझे babel-core और babel-loader भी इंस्टॉल करना पड़ा।

मेरा भी यही विचार है। मुझे निम्नलिखित बेबेल कोर और लोडर संस्करणों का उपयोग करना था:

"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

त्रुटि भी मिली। वेबपैक 4.20.2 को मैन्युअल रूप से स्थापित करना जैसा कि ऊपर बताया गया है, अभी के लिए चाल है।