[Bug]: Module not found: Error: Can't resolve '/'

[dharma-hippocorps]

Describe the bug

I've installed storybook in my NX monorepository. Facing issue on storybook compilation with preview.ts. I just want to import my style.scss file properly. somehow I'm getting below error on compilation.

ERROR in ./apps/storybook-app/.storybook/styles.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./apps/storybook-app/.storybook/styles.scss) 10:36-65
Module not found: Error: Can't resolve '/' in '/Users/dharmasheelana/Documents/LLA-MONOREPO-MIGRATION-feat-sb-installation/apps/storybook-app/.storybook'
 @ ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./apps/storybook-app/.storybook/styles.scss 8:6-153 20:17-24 24:7-21 50:25-39 51:36-47 51:50-64 55:6-65:7 56:54-65 56:68-82 62:42-53 62:56-70 64:21-28 75:0-123 75:0-123 76:22-29 76:33-47 76:50-64 53:4-66:5
 @ ./apps/storybook-app/.storybook/preview.ts 1:0-60
 @ ./storybook-config-entry.js 5:1841-1968 24:2-29:4 24:1835-29:3

preview compiled with 1 error

main.ts

import type { StorybookConfig } from '@storybook/angular';
import path from 'path';
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  framework: '@storybook/angular',
  core: {
    builder: {
      name: '@storybook/builder-webpack5',
      options: {
        fsCache: true,
        lazyCompilation: true,
      },
    },
  },
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-links',
    '@storybook/addon-storysource',
    '@storybook/addon-docs',
    '@storybook/addon-a11y',
    '@storybook/preset-scss',
    '@storybook/addon-webpack5-compiler-babel',
  ],
  webpackFinal: (config: any) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src'),
      };
    }
    config.module.rules.push(
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
        include: [
          path.resolve(__dirname, 'node_modules'),
          path.resolve(__dirname, 'apps/storybook-app/.storybook'),
        ],
      },
      {
        test: /\.(scss|sass)$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: [
          path.resolve(__dirname, 'node_modules'),
          path.resolve(__dirname, 'apps/storybook-app/.storybook'),
          path.resolve(__dirname, '../src'),
        ],
        exclude: [
          path.resolve(__dirname, '../src/styles.scss'),
        ],
      }
    );

    return config;
  },
};

**preview.ts**

import '!style-loader!css-loader!sass-loader!./styles.scss';

style.scss

import '!style-loader!css-loader!sass-loader!./styles.scss';

webpack.config.js

const copyPlugin = require('copy-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');
module.exports = async ({ config, mode }) => {
  const copyAssets = new copyPlugin({
    patterns: [
      {
        from: 'libs/shared/ui-library/src/lib/styles/common/assets',
        to: 'common/assets',
      },
      {
        from: 'libs/shared/ui-library/src/lib/styles/vtr/assets',
        to: 'vtr/assets',
      },
    ],
  });

  const tsPaths = new TsconfigPathsPlugin({
    configFile: path.resolve(__dirname, '../.storybook/tsconfig.json'),
  });
  config.plugins.push(copyAssets);
  config.resolve.extensions.push('.ts');
  config.resolve.plugins
    ? config.resolve.plugins.push(tsPaths)
    : (config.resolve.plugins = [tsPaths]);
  return config;
};

Reproduction link

no link

Reproduction steps

No response

System

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M2 Pro
    Shell: 3.2.57 - /bin/sh
  Binaries:
    Node: 18.18.1 - /usr/local/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn <----- active
    npm: 9.8.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    @storybook/addon-a11y: ^8.1.11 => 8.2.0 
    @storybook/addon-actions: ^8.1.11 => 8.2.0 
    @storybook/addon-essentials: ^8.1.11 => 8.2.0 
    @storybook/addon-interactions: ^8.1.11 => 8.2.0 
    @storybook/addon-links: ^8.1.11 => 8.2.0 
    @storybook/addon-storysource: ^8.1.6 => 8.2.0 
    @storybook/addon-webpack5-compiler-babel: ^3.0.3 => 3.0.3 
    @storybook/angular: ^8.1.11 => 8.2.0 
    @storybook/builder-webpack5: ^8.1.11 => 8.2.0 
    @storybook/cli: ^8.1.6 => 8.2.0 
    @storybook/core-server: ^8.1.11 => 8.2.0 
    @storybook/manager-webpack5: ^6.5.17-alpha.0 => 6.5.17-alpha.0 
    @storybook/preset-scss: ^1.0.3 => 1.0.3 
    storybook: ^8.1.11 => 8.2.0

Additional context

No response

[greptile-apps]

To resolve the issue with importing styles.scss in your NX monorepository, follow these steps:

1. Update main.ts:
   Ensure that the include paths in your webpack rules are correctly pointing to the directories containing your SCSS files.

   config.module.rules.push(
     {
       test: /\.css$/i,
       use: ['style-loader', 'css-loader'],
       include: [
         path.resolve(__dirname, 'node_modules'),
         path.resolve(__dirname, 'apps/storybook-app/.storybook'),
       ],
     },
     {
       test: /\.(scss|sass)$/i,
       use: ['style-loader', 'css-loader', 'sass-loader'],
       include: [
         path.resolve(__dirname, 'node_modules'),
         path.resolve(__dirname, 'apps/storybook-app/.storybook'),
         path.resolve(__dirname, '../src'),
       ],
       exclude: [
         path.resolve(__dirname, '../src/styles.scss'),
       ],
     }
   );

2. Update preview.ts:
   Ensure the correct import statement for your SCSS file.

   import '!style-loader!css-loader!sass-loader!./styles.scss';

3. Check webpack.config.js:
   Ensure that the TsconfigPathsPlugin and copyPlugin are correctly configured.

   const copyPlugin = require('copy-webpack-plugin');
   const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
   const path = require('path');
   module.exports = async ({ config, mode }) => {
     const copyAssets = new copyPlugin({
       patterns: [
         {
           from: 'libs/shared/ui-library/src/lib/styles/common/assets',
           to: 'common/assets',
         },
         {
           from: 'libs/shared/ui-library/src/lib/styles/vtr/assets',
           to: 'vtr/assets',
         },
       ],
     });
   
     const tsPaths = new TsconfigPathsPlugin({
       configFile: path.resolve(__dirname, '../.storybook/tsconfig.json'),
     });
     config.plugins.push(copyAssets);
     config.resolve.extensions.push('.ts');
     config.resolve.plugins
       ? config.resolve.plugins.push(tsPaths)
       : (config.resolve.plugins = [tsPaths]);
     return config;
   };

These steps should help resolve the SCSS import issue in your Storybook setup.

References

/code/presets/server-webpack/src/index.ts
/code/presets/server-webpack/src/lib/compiler/index.ts
/code/presets/server-webpack/src/lib/compiler/json-to-csf-compiler.test.ts
/code/presets/server-webpack/src/lib/compiler/stringifier.ts
/code/presets/server-webpack/src/lib/compiler/types.ts
/code/presets/server-webpack/src
/code/presets/server-webpack/src/lib/compiler

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.