reactjs - "Módulo no encontrado" o "La ruta de importación no puede terminar con tsx" usando Storybook con TypeScript

Estoy escribiendo un componente que hace uso de otro componente, así que he escrito

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

en el archivo /src/stories/TextArea/TextArea.tsx.

Sin embargo, esto da el error

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

Cambiando la declaración de importación a

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

lo hace funcionar perfectamente. En cambio, el linter se queja:

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

Según entiendo, las terminaciones .tsx están prohibidas en TypeScript, por lo que reconfigurar el linter no parece ser la mejor opción.

Obviamente, importar Text.js en su lugar no funciona ya que no existe. Se supone que Storybook debe funcionar automáticamente con TypeScript, así que no estoy seguro de lo que tengo que hacer.

En los archivos .mdx que estoy usando como historias (como Text.stories.mdx), se aceptan las importaciones que incluyen .tsx sin que el linter genere quejas. Quitar la extensión produce un error similar de Módulo no encontrado.

El proyecto fue creado con create-react-app y está ejecutando Storybook 6.5.15.

Respuesta #1

tu importación import { Text } from "../Text/Text" debería funcionar bien.

Asegúrate de estar utilizando la versión más reciente de Storybook - 6.5.15.

...

Intenté reproducir tu problema y no pude hacerlo. No obtuve el mismo error y la importación funcionó perfectamente. Déjame describir los pasos que seguí:

Instalé Storybook en mi proyecto usando npx storybook init --type react. Esto instaló Storybook 6.5.15 para React.

Creé un componente simple en ./project/src/Button.tsx

import React from 'react'

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

Creé una historia simple en ./project/stories/Button.stories.jsx así:

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

Y no hay problemas. La importación funciona como debería. Si esto no te ayuda, cuéntanos más sobre la configuración de tu proyecto (por ejemplo, ¿estás usando Create-react-app?), etc. Así será más fácil reproducir este problema.