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

### コンポーネントライブラリ プロジェクト
::: note alert
classnamesが機能していない。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/74c14cfc-d999-e5ab-095e-aa0135ebca73.png)

bind関数に変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/b2e3fdc8-bfd4-f961-8f02-f8b3a6b0f38f.png)

::: note alert
buttonを導入し、オブジェクトがundefined
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/704ad9f8-83d5-a092-9bec-a9dfa1d1acf5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/cda2c45a-ca34-b7d9-c0c2-6644297a7cbd.png)

解決方法　webpack/common.js
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/983c9642-a2d8-536c-62f6-6f67b5603555.png)
[outputlibrarytargetの説明](https://webpack.js.org/configuration/output/#outputlibrarytarget)
<details><summary>webpack/common.js</summary>

```javascript: 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'],
    },
};
```
</details>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/ff33b7e0-ccd5-204f-817c-35921dc0a034.png)


### storybook 
<details><summary>code</summary>

```typescript: 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',
  },
};

```
</details>

--------
クリクラのアニメを増加して、CSSアニメの効果が良くない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/761ed788-ff68-42c3-4d82-a0a41080b764.png)
![1705249151235.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/ac942179-9733-78b4-02ad-b5324e153275.png)

### コンポネント ライブラリに react hooksを使えば、エーロが発生しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/eaa41f92-e7e5-78d1-488a-b4a28dcf2c63.png)

::: note alert
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)
:::

#### 問題原因
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/81e68f3a-89d5-d394-2671-c378d1e42505.png)

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

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

```javascript: 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. ..." );
    }
  }
 ......
}

```
[Duplicate React](https://react.dev/warnings/invalid-hook-call-warning)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/3b527cea-b6e4-75df-688d-0b8c3f8982ae.png)

#### 解決の方
[resolve-alias](https://webpack.js.org/configuration/resolve/#resolve-alias)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/77acd34e-52db-8106-7f53-9a8cb94a68ca.png)

コンポーネントライブラリに peerDependencies 設定を追加して、プロジェクトと同じ React および React DOM 依存関係のバージョンを使用できるようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/e595e716-acff-c57e-1c4e-188770a4bd84.png)

::: note warn
この問題の解決方法は、ローカルパッケージのデバッグプロセスです。もし既に公開されたコンポーネントライブラリを使用している場合は、この設定を削除する必要があります。
そうでないと、モジュールが見つからないエラーが発生します。
:::



他の問題
既に公開されたコンポーネントライブラリを使用している場合。

::: note alert
Cannot find module 'classnames/bind' or its corresponding type declarations.
:::

::: note alert
Cannot find module 'classnames' or its corresponding type declarations.
:::
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/40f846b4-97e1-efa8-1d3c-f4e04c6acfd9.png)

::: note info
devDependencies から dependenciesまで移入します。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/44932b4a-19f8-4bcb-e0f1-cea3719644b4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/da90bd52-0085-8406-4b2e-464c1bbfcea4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/697afdb3-795e-c7a3-8577-5a03f78f941c.png)

コード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/b95dfcfe-d6fa-6a32-35cc-a965ba5d47de.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641430/2ba88d5a-77b6-92b5-d1d0-4e28a0ff0870.png)