reactjs - Storybook nu poate găsi componente în proiectul React, Next.JS, Typescript

Am configurat Storybook cu proiectul meu next.js, typescript și react. Proiectul se afișează corect, dar Storybook se blochează și îmi dă următorul mesaj de eroare: "Module not found: Error: Can't resolve 'components/atoms' in..." Se pare că calea către componente cauzează această problemă:

import { Element } from 'components/atoms';

dar următorul funcționează:

import { Element } from '../../atoms

Am un fișier tsconfig.json cu următorul conținut:

  "compilerOptions": {
    "baseUrl": "src",
    },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
...

Am încercat câteva dintre sugestiile de pe internet, dar niciuna nu pare să rezolve problema căii. Am creat un fișier webpack.config.js în folderul meu .storybook cu următorul conținut, dar încă primesc erori.

module.exports = {
 ...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
};

Aș dori să nu folosesc ../../ atunci când apelez fișiere și să pot folosi doar structura ./components.

Răspuns #1

Am petrecut ceva timp luptându-mă cu Storybook )

Iată versiunea mea de .storybook/main.js, care în final a funcționat:

const path = require("path");

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules.push(path.resolve(__dirname, '../src'));

    return config;
  },

  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

Răspunsul #2

Pentru cineva care încă caută o soluție, încercați să adăugați următoarele în interiorul webpackFinal înainte de a returna config-ul. Este pentru că Storybook nu este configurat să acceseze fișierele folosind căi absolute.

config.resolve.modules = [...(config.resolve.modules || []), path.resolve('./')]