More than 1 year has passed since last update.

button ゼロからReact コンポーネントライブラリ(2)

Last updated at 2024-01-21Posted at 2023-12-15

コンポーネントライブラリプロジェクト

classnamesが機能していない。

bind関数に変更する

buttonを導入し、オブジェクトがundefined

解決方法　webpack/common.js

outputlibrarytargetの説明

webpack/common.js

const path = require('path');
const TerserWebpack = require("terser-webpack-plugin");
const { createEntries } = require('./function');

module.exports = {
    entry: createEntries(),
    mode: "production",
    output: {
        path: path.join(__dirname, '../../lib'),
        filename: '[name].js',
        libraryTarget: 'umd' // 増加した点
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    { loader: 'sass-loader' },
                ],
            },
            {
                test: /\.tsx?$/,
                use: [
                    { loader: 'ts-loader' },
                ]
            }
        ]
    },
    plugins: [
        new TerserWebpack({
            extractComments: false,
        })
    ],
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
};

storybook

code

Button.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';

import { Button } from 'choas-react';
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export

const meta = {
  title: 'Button',
  component: Button,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: 'centered',
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['autodocs'],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    btnTxt: {
      control: 'string',
      table:{
        defaultValue: {
          summary: '',
        },
        type: { summary: 'タイトル(title)' },
        subcategory: 'basic'
      }
    },
    type: {
      control: 'select',
      options: ['primary', 'danger', 'ghost', 'link'],
      table:{
        defaultValue: {
          summary: 'primary',
        },
        type: { summary: 'タイプ(type)' },
        subcategory: 'basic'
      }
    }
  },
  args: {
    btnTxt: 'button',
    type: 'primary',
  },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Type: Story = {
  args: {
    btnTxt: 'button1',
    type: 'primary',
  },
};

クリクラのアニメを増加して、CSSアニメの効果が良くない。

コンポネントライブラリに react hooksを使えば、エーロが発生しました。

Cannot read properties of null (reading 'useState')
TypeError: Cannot read properties of null (reading 'useState')
at useState (http://localhost:3000/main.d3fb9ab8567e57014946.hot-update.js:1984:25)
at S (http://localhost:3000/main.d3fb9ab8567e57014946.hot-update.js:439:32)

問題原因

Hookが正常に動作するようにするには、アプリケーションコード内のReactの依存関係と、react-domパッケージ内部で使用されるReactの依存関係が同じモジュールとして解釈される必要があります。
これらのReactの依存関係が2つの異なるエクスポートオブジェクトとして解釈される場合、この警告が表示されます。これは、意図せずに2つのReactのパッケージのコピーを導入してしまった場合に発生する可能性があります。

Hooksを関数の外で呼び出さないようにするために、コンポーネントライブラリ内の ReactCurrentDispatcher.current が常に null になり、したがってエラーが発生します。

webpack/common.js

// useState
function useState(initialValue) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialValue);
}

// resolveDispatcher
function resolveDispatcher() {
  var dispatcher = ReactCurrentDispatcher.current; // ReactCurrentDispatcher.current が常に null になり、したがってエラーが発生します。

  if (!(dispatcher !== null)) {
    {
      throw Error( "Invalid hook call. ..." );
    }
  }
 ......
}