[Bug]: Storybook prefixing stories path './' causing not found module for stories files

[saipujitha]

Describe the bug

I added v8.1.1 of @Storybook/react and the portal came-up and I see my stories listed in components panel but they are not loading and throwing error Error: Cannot find module './src/cont/exam.stories.js' at webpackEmptyContext (http://localhost:xxxx/main.iframe.bundle.js:211:10) at http://localhost:xxxx/main.iframe.bundle.js:189:312

This is my project structure

project/ ├── .storybook/ │ └── main.js ├── src/ │ └── cont/ │ └── exam.stories.js

This is my main.js in .storybook folder

import * as path from "path";

const {resolve} = require("path");
/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  stories: ['../src/**/*.stories.js'], //'../src/**/*.stories.js']
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  webpackFinal: async (config, { configType }) => {
    console.log('Current working directory:', process.cwd());
    console.log('Current working __dirname:', __dirname);
    console.log('Resolved alias @:', path.resolve(__dirname, '../src'));

    config.module.rules = config.module.rules.filter(rule => {
      if (rule.test && rule.test.toString().includes('js|mjs|jsx|ts|tsx')) {
        return false;
      }
      return true;
    });

    // Add swc-loader for JavaScript files
    config.module.rules.push({
      test: /\.(js|mjs|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'ecmascript',
              jsx: true,
              decorators: true
            },
            transform: {
              legacyDecorator: true,
              decoratorMetadata: true,
              react: {
                runtime: 'automatic'
              }
            }
          }
        }
      }
    });

    return config;
  },
};
export default config;

Also why is Storybook adding './' for any path specified for stories

thanks in advance for the help!

Reproduction link

https://stackblitz.com/github/storybookjs/sandboxes/tree/next/react-webpack/17-ts/after-storybook?file=src%2Fcontainer%2Fexam.stories.js

Reproduction steps

No response

System

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm <----- active
  Browsers:
    Chrome: 124.0.6367.208
    Safari: 17.4.1
  npmPackages:
    @storybook/addon-essentials: ^8.1.1 => 8.1.1 
    @storybook/addon-interactions: ^8.1.1 => 8.1.1 
    @storybook/addon-links: ^8.1.1 => 8.1.1 
    @storybook/addon-onboarding: ^8.1.1 => 8.1.1 
    @storybook/addon-webpack5-compiler-swc: ^1.0.2 => 1.0.2 
    @storybook/blocks: ^8.1.1 => 8.1.1 
    @storybook/react: ^8.1.1 => 8.1.1 
    @storybook/react-vite: ^8.1.1 => 8.1.1 
    @storybook/react-webpack5: ^8.1.1 => 8.1.1 
    @storybook/test: ^8.1.1 => 8.1.1 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.1.1 => 8.1.1 
  npmGlobalPackages:
    @storybook/cli: 8.0.10

Additional context

No response

[rwitchell]

issue is happening on our project as well. We went from 6.5.x to 8.1.11, and it started to occur. We've reverted to 8.0.1 and it's still happening. We're still trying to find a solution, but would love any feedback / possible avenues to try and get storybook working again

[rwitchell]

further debugging: for example,

Cannot find module './src/components/contact-form/contact-form.stories.js'

under Chrome's inspect-> sources -> top -> storybook-preview-iframe -> (site name) -> src -> components .... there is no "contact-form" folder, so webpack / storybook hasn't compiled everything. All of our *stories.js|ts files are missing in the /src folder, including lots of other folders missing in the /src (/src/emails, /src/components/menu, etc).

this is also occurring on storybook v7.6.20

[rwitchell]

@shilman - any recommendations on debugging? This app is a gatsby v3 (also upgraded to v5 on another branch), webpack5, js & ts using babel, aliases through webpack and tsconfig.