मेरे पास एक साधारण स्टोरीबुक प्रोजेक्ट है जिसे इस प्रकार संरचित किया गया है:

├── .storybook
├── .babelrc
├── package.json
├── node_modules
├── stories
│   ├── index.js

और मैं अपना कॉन्फिगरेशन start-storybook -p 6006 के साथ चला सकता हूं

// .storybook/config.js
import { configure } from '@storybook/react'

function loadStories() {
  require('../stories/index.js')
}

configure(loadStories, module)

अब मैं कुछ घटकों को शामिल करना चाहता हूं जो पीछे एक निर्देशिका हैं। तो नई फ़ाइल संरचना होगी:

├── storybook
│   ├── .storybook
│   ├── .babelrc
│   ├── package.json
│   ├── node_modules
├── stories
│   ├── index.js

और मेरी कॉन्फ़िगरेशन अब कहानियों को एक निर्देशिका से वापस बुलाती है:

// ./storybook/.storybook/config.js
import { configure } from '@storybook/react'

function loadStories() {
  require('../../stories/index.js')
}

configure(loadStories, module)

लेकिन ऐसा लगता है कि स्टोरीबुक अब फाइल को पार्स करने में असमर्थ है, भले ही एकमात्र बदलाव यह है कि कहानी को फाइल पर वापस ले जाया गया है। मुझे निम्नलिखित त्रुटि मिलती है:

ERROR in ../admin-components/components/Button/Button.js 40:26
Module parse failed: Unexpected token (40:26)
You may need an appropriate loader to handle this file type.
| import React from "react"
|
> const Button = (props) => <button>Click Me!!!</button>
|
| export default Button
 @ ../admin-components/components/Button/index.js 1:0-29 3:15-21
 @ ../admin-components/components/index.js
 @ ./stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

क्या मुझे अपने .babelrc में कुछ कस्टम पार्सर कॉन्फ़िगरेशन की आवश्यकता है या यह डिफ़ॉल्ट स्टोरीबुक कॉन्फ़िगरेशन के साथ संघर्ष करेगा। शायद इस निर्देशिका संरचना को संभालने में सक्षम होने के लिए स्टोरीबुक के लिए कुछ सेटिंग है?

संपादित करें JSX की पार्सिंग की अनुमति देने के लिए मेरे वेबपैक कॉन्फ़िगरेशन में और कॉन्फ़िगरेशन जोड़ने का प्रयास किया है लेकिन इसका कोई फायदा नहीं हुआ है।

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.resolve.alias = {
    'prop-types$': path.join(__dirname, '../node_modules/axe-prop-types')
  };

  storybookBaseConfig.module.rules.push({
        test: /\.(js|jsx)$/,
        exclude: [/bower_components/, /node_modules/, /styles/],
        loader: 'babel-loader',
        include: path.resolve(__dirname, '../stories'),
        query: {
      presets: ['@babel/react']
    }
  });

  storybookBaseConfig.plugins.push(new CopyWebpackPlugin([{ from: '.storybook/fonts', to: 'fonts' }]))
  if (configType === 'PRODUCTION') {
    config.optimization.minimize = false;
  }

  return storybookBaseConfig;
}

निम्न त्रुटि प्राप्त करना:

ERROR in ./stories/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
15
Stretch0 3 सितंबर 2018, 14:21
ऐसा इसलिए है क्योंकि प्रीसेट को @babel/preset-react कहा जाता है। इसके अलावा - आपका दृष्टिकोण ठीक काम करना चाहिए, क्योंकि मैं src फ़ोल्डर के बाहर बेबेल द्वारा मॉड्यूल को संसाधित करने के लिए एक बहुत ही समान सेटअप का उपयोग कर रहा हूं।
 – 
Pavel Denisjuk
7 सितंबर 2018, 14:38
1
आप इसका समाधान कहां कर सकते हैं?
 – 
Pouya Sanooei
15 अगस्त 2019, 16:59
मैंने yarn storybook --debug-webpack (या npm run storybook --debug-webpack) चलाने की सिफारिश की, क्योंकि इससे यह देखने में मदद मिलेगी कि चीजें कैसे सेट की जाती हैं।
 – 
Luke H
27 अगस्त 2019, 06:17
मुझे बिल्कुल वही समस्या हो रही है। किसी भी मौके पर आपको यह हल मिल गया?
 – 
y_nk
27 जून 2021, 11:36

2 जवाब

आप प्रत्येक कहानी को उसी फ़ोल्डर में क्यों नहीं रखते जहां घटक घोषित किया गया हो❔

और फिर स्टोरीबुक config.js फ़ाइल में उन्हें शामिल करें:

import {configure} from '@storybook/react'

function loadStories() {
  const req = require.context(`../src`, true, /\.stories\.jsx?$/)
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

एक कहानी का उदाहरण:

import Icon from './index'
import React from 'react'
import {storiesOf} from '@storybook/react'

storiesOf(`Icons`, module)
  .add(`Bell`, () => (
    <Icon src="bell"/>
  ))
  .add(`Settings`, () => (
    <Icon src="settings"/>
  ))
  .add(`User`, () => (
    <Icon src="user"/>
  ))
1
sultan 29 अगस्त 2019, 09:14

इसे storybook/.storybook/webpack.config.js में जोड़ें

const path = require('path');

module.exports = async ({ config, mode }) => {
  config.module.rules.push({
    test: /\.js?$/,
    include: path.resolve(__dirname, '../../stories'),
    use: [
      {
        loader: 'babel-loader',
        options: {
          cacheDirectory: './node_modules/.cache/storybook',
          presets: [
            [ './node_modules/@babel/preset-env/lib/index.js',
              {
                shippedProposals: true, useBuiltIns: 'usage', corejs: '3'
              }
            ],
            './node_modules/@babel/preset-react/lib/index.js',
            './node_modules/@babel/preset-flow/lib/index.js',
          ],
          plugins: [],
        },
      },
    ],
  });

  config.resolve.modules = [
    ...config.resolve.modules,
    path.resolve(process.cwd(), 'node_modules'),
  ]

  // Return the altered config
  return config;
};

आपके पास .babelrc होने की आवश्यकता नहीं है।

व्याख्या: इस लिंक में: डिफ़ॉल्ट कॉन्फ़िगरेशन, आप डिफ़ॉल्ट कॉन्फ़िगरेशन देख सकते हैं और मैं बस वहां कुछ कॉन्फ़िगरेशन की प्रतिलिपि बनाई। यह आपके जेएस/जेएसएक्स के लिए उपयुक्त लोडर को संभालेगा।

जहां तक ​​config.resolve.modules का संबंध है, आपको वेबपैक को बताना होगा कि आपका नोड_मॉड्यूल फोल्डर स्टोरीज में रूट डायरेक्टरी में नहीं है, ताकि जब आप स्टोरीबुक के बाहर मॉड्यूल का उपयोग करें फ़ोल्डर, यह मॉड्यूल देखेगा।

उम्मीद है ये मदद करेगा।

0
Jojo Tutor 30 अगस्त 2019, 04:49