ウェブサイト検索
typescript - StorybookのためのWebpack: .web、.ios、.android拡張子のtsファイルが見つかりません
私は、expo と react-native-web を使って Storybook を使用しようとしています。expo モジュールを使用しようとするたびに、次のエラーが発生します
ERROR in ./node_modules/expo-linear-gradient/build/LinearGradient.js Module not found: Error: Can't resolve './NativeLinearGradient' in '/Fleyver/front/node_modules/expo-linear-gradient/build' @ ./node_modules/expo-linear-gradient/build/LinearGradient.js 1:1373-1406解決できないファイルには、.web.ts、.ios.ts、.android.ts の複数の拡張子がありますが、.ts の単純な拡張子はありません
初心者なので、この問題をどこから直せばいいのか分からず苦労し
続きを読む →reactjs - Storybook + React Native + Typescript webpack/loader の問題
両方に従った後、storybook + RN + Typescript プロジェクトを実行しようとするとき
そして
私は得る：
ModuleParseError: Module parse failed: Unexpected token (10:12) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders| import {dontSetMe} from './utils/shims'; | import DraggableCore from './DraggableCore';
import type {ControlPosition, PositionOffsetControlPo
続きを読む →reactjs - Storybookのホットリロードがフックエラーを引き起こす
ストーリーブックがホットリロードされると、次のエラーが発生します。最初の読み込みでは完全に動作します:
TypeError: Cannot read property 'hooks' of undefined at StoryStore.cleanHooks (http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:6197:22) at renderMain (http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:8181:22) at StoryStore.rende 続きを読む →reactjs - React Storybook チェックボックスの変更ハンドラーが動作しない
私はReact、TypeScript、Storybook、Styled-Componentsを使用してチェックボックスコンポーネントを作成しています。このチュートリアル（building-a-checkbox-component-with-react-and-styled-components）に従った後、FunctionComponentを使用しているためコードを調整する必要がありましたが、変更ハンドラーで問題が発生しています。チェックボックスをチェックまたは解除できず、読み取り専用のように見え、どこで間違っているのかわかりません。こちらが私のコードです:
Checkbox.tsx
続きを読む →reactjs - Storybook が TypeScript を使っているのに tsx ファイルを TypeScript ファイルとして認識しない - '解析エラー: セミコロンがありません'
なぜそれが起こったのか、ただ理解できません。数週間修正しようとしましたが、結局自分のストーリーではJavaScriptに戻しました。
こちらはバグを再現するブランチです。これはフルプロジェクトです。./examples の中に、TypeScript と Storybook で動作する React React アプリのデモを確認できます。その中の src/stories/Xarrow.stories.tsx を見ると、yarn storybook を実行した際に、まるで JavaScript ファイル内に TypeScript を入れたかのように、Parsing error: Missing semicolon. が発生します。
続きを読む →reactjs - Docker MonoRepo で Storybook 'モジュール react/package.json が見つかりません'
私はdockerにはまだかなり不慣れで、今日は以下の設定を使って私たちのlernaモノレポをdocker化しようとしました:
ドッカーファイル
FROM node:14.13.1-alpine Add node modules bin to path ENV PATH /app/node_modules/.bin:$PATH ENV PATH /app/packages/core/node_modules/.bin:$PATH WORKDIR /app Install app deps COPY ./ ./ RUN yarn install RUN yarn bootstrap RUN cd packages/core && yarn install && cd ./node_modules/react && yarn link && cd ../../../../ && yarn link react RUN cd packages/core & 続きを読む →javascript - storybook reactでtsxとmdxを使用する
私はこれを達成しようとしています：
しかし、私のストーリーはmdxとtsxファイルに分解されています。
これまでのところ、私のmdxファイルは次のようになっています:
import { Meta, Story, Canvas, Preview, Props, ArgsTable } from '@storybook/addon-docs'; import { Button, Icons } from '../..'; <!-- Components --> export const ButtonWithoutIcon = (args) => <Button {...args}>Clic 続きを読む →javascript - 親が状態を管理する子コンポーネントのためのstorybookの書き方
私は、親が状態を管理する子要素のためのストーリーブックを書いています。例えば、value(文字列) と onChange(関数) は props を通して渡されます。両方の props は渡されていますが、ストーリーブックのファイルで状態をどのように更新するかは不明です。
テキストフィールド.tsx
import React, { FC, HTMLProps } from 'react'; type FirstNameTextFieldProps = HTMLProps<HTMLInputElement> const FirstNameTextField: FC<FirstNameTextFieldProps> = ({ ...restOfProps }) => ( <input type="text" id="fname" name=" 続きを読む →reactjs - Storybook: ジェネリックな引数/プロパティの型に注釈を付ける方法
コンテキストとコード
私たちはボタンを次のように拡張しました:
export type ButtonProps<P = Record<string, unknown>> = P & { children: ReactNode | string onClick?: () => void className?: string disabled?: boolean secondary?: boolean } const Button = <P extends Record<stri 続きを読む →reactjs - TypeScriptで書かれたStorybookのストーリーファイルが正しく扱われていません
私は最近、自分のCRAプロジェクトをNext.jsに移行しました。そのプロジェクトではStorybookを使用していたので、多くの設定を編集する必要がありましたが、それでもまだTypeScriptに関連する問題が残っています。
これは私のストーリーファイルの例です。
import { ComponentStory, ComponentMeta } from '@storybook/react'; import Index from 'pages/profile'; export default { title: 'Views/Profile', component: Index, } as ComponentMeta<typeof Index>; export const IndexTemplate: ComponentStory<typeof Index> = (args) => <Index {...args} />;ストーリーブックを実行するたび
続きを読む →