reactjs - "Modul tidak ditemui" atau "Jalur import tidak boleh berakhir dengan tsx" menggunakan Storybook dengan TypeScript

Saya sedang menulis satu komponen yang menggunakan komponen lain, jadi saya telah menulis

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

dalam fail /src/stories/TextArea/TextArea.tsx.

Walau bagaimanapun, ini memberikan ralat

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

Menukar pernyataan import kepada

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

menjadikannya berfungsi dengan baik. Sebaliknya, linter mengadu:

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

Seperti yang saya fahami, akhiran .tsx dilarang dalam TypeScript jadi menkonfigur semula linter tidak nampak seperti pilihan terbaik.

Sudah tentu, mengimport Text.js sebaliknya tidak berfungsi kerana ia tidak wujud. Storybook sepatutnya berfungsi secara langsung dengan TypeScript, jadi saya tidak pasti apa yang perlu saya lakukan.

Dalam fail .mdx yang saya gunakan sebagai cerita (seperti Text.stories.mdx), import termasuk .tsx diterima tanpa sebarang aduan daripada linter. Mengeluarkan sambungan menghasilkan ralat Module not found yang serupa.

Projek ini dibuat dengan create-react-app dan sedang menjalankan Storybook 6.5.15.

Jawapan #1

import anda import { Text } from "../Text/Text" sepatutnya berfungsi dengan baik.

Pastikan anda menggunakan versi Storybook terkini - 6.5.15.

...

Saya telah cuba untuk menghasilkan semula masalah anda tetapi gagal melakukannya. Saya tidak mendapat ralat yang sama dan import berjalan dengan baik. Izinkan saya menerangkan langkah-langkah yang saya ambil:

Saya memasang Storybook dalam projek saya menggunakan npx storybook init --type react. Ini memasang Storybook 6.5.15 untuk React.

Saya telah membuat sebuah komponen ringkas dalam ./project/src/Button.tsx

import React from 'react'

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

Saya menghasilkan sebuah cerita ringkas di ./project/stories/Button.stories.jsx seperti ini:

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

Dan tiada sebarang masalah. Import berfungsi seperti yang sepatutnya. Jika ini tidak membantu anda, beritahu kami lebih lanjut tentang tetapan projek anda (contohnya, adakah anda menggunakan Create-react-app), dan lain-lain. Jadi isu ini lebih mudah untuk diperbanyakkan.