reactjs - "Moduulia ei löytynyt" tai "Tuontipolku ei voi päättyä tsx" käyttäessä Storybookia TypeScriptin kanssa

Kirjoitan komponenttia, joka hyödyntää toista komponenttia, joten olen kirjoittanut

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

tiedostossa /src/stories/TextArea/TextArea.tsx.

Kuitenkin tämä antaa virheen

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

Muuttamalla import-lauseke

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

saa sen toimimaan ihan hyvin. Sen sijaan linteri valittaa:

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

Käsittääkseni .tsx -päätteet ovat kiellettyjä TypeScriptissä, joten linterin uudelleenkonfigurointi ei vaikuta parhaalta vaihtoehdolta.

Ilmeisesti Text.js-tiedoston tuominen sen sijaan ei toimi, koska sitä ei ole olemassa. Storybookin pitäisi toimia suoraan TypeScriptin kanssa, joten en ole varma, mitä minun täytyy tehdä.

Tiedostoissa .mdx, joita käytän tarinoina (kuten Text.stories.mdx), tuonti mukaan lukien .tsx hyväksytään ilman linterin varoituksia. Laajennuksen poistaminen tuottaa samanlaisen Module not found -virheen.

Projekti luotiin create-react-app-työkalulla ja siinä ajetaan Storybook 6.5.15.

Vastaus #1

sinun tuontisi import { Text } from "../Text/Text" pitäisi toimia hyvin.

Varmista, että käytät Storybookin uusinta versiota - 6.5.15.

...

Yritin toistaa ongelmaasi, mutta en onnistunut siinä. En saanut samaa virhettä ja tuonti toimi aivan hyvin. Annanpa kuvauksen toimistani vaiheista:

Asensin Storybookin projektiini käyttämällä npx storybook init --type react. Tämä asensi Storybook 6.5.15 Reactille.

Loin yksinkertaisen komponentin tiedostoon ./project/src/Button.tsx

import React from 'react'

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

Loin yksinkertaisen tarinan tiedostoon ./project/stories/Button.stories.jsx näin:

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

Eikä ole ongelmia. Tuonti toimii niin kuin sen pitäisi. Jos tämä ei auta sinua, kerro meille lisää projektisi asetuksista (esim. käytätkö Create-react-appia), jne. Näin tämän ongelman toistaminen on helpompaa.