reactjs - „Modulul nu a fost găsit” sau „Calea de import nu se poate încheia cu tsx” folosind Storybook cu TypeScript

Scriu un component care folosește un alt component, așa că am scris

import { Text } from "../Text/Text"

în fișierul /src/stories/TextArea/TextArea.tsx.

Totuși, aceasta dă eroarea

Module not found: Can't resolve '../Text/Text' in '/Users/username/project/src/stories/TextArea'

Schimbarea declarației de import în

import { Text } from "../Text/Text.tsx"

funcționează perfect. În schimb, linterul se plânge:

An import path cannot end with a '.tsx' extension. Consider importing '../Text/Text.js' instead.ts(2691)

Din câte înțeleg, extensiile .tsx sunt interzise în TypeScript, așa că reconfigurarea linter-ului nu pare să fie cea mai bună opțiune.

Evident, importarea în schimb a Text.js nu funcționează deoarece nu există. Storybook ar trebui să funcționeze din start cu TypeScript, așa că nu sunt sigur ce trebuie să fac.

În fișierele .mdx pe care le folosesc ca și povești (cum ar fi Text.stories.mdx), importurile, inclusiv .tsx, sunt acceptate fără plângeri din partea linter-ului. Eliminarea extensiei produce o eroare similară de tip Module not found.

Proiectul a fost creat cu create-react-app și rulează Storybook 6.5.15.

Răspuns #1

importul tău import { Text } from "../Text/Text" ar trebui să funcționeze bine.

Asigură-te că folosești cea mai recentă versiune de Storybook - 6.5.15.

...

Am încercat să reproduc problema ta și nu am reușit. Nu am întâmpinat aceeași eroare și importul a funcționat perfect. Permite-mi să descriu pașii pe care i-am urmat:

Am instalat Storybook în proiectul meu folosind npx storybook init --type react. Aceasta a instalat Storybook 6.5.15 pentru React.

Am creat un component simplu în ./project/src/Button.tsx

import React from 'react'

export const Button = () => {
  return <div>MY BUTTON</div>
}

Am creat o poveste simplă în ./project/stories/Button.stories.jsx astfel:

import React from 'react';

import { Button } from '../src/Button';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Example/Button',
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});

// More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = {
  primary: true,
  label: 'Button',
};

Și nu există probleme. Importul funcționează așa cum trebuie. Dacă acest lucru nu te ajută, spune-ne mai multe despre configurarea proiectului tău (de exemplu, folosești Create-react-app), etc. Astfel, această problemă este mai ușor de reprodus.