storybookjs / addon-styling-webpack Goto Github PK

WARN The following packages are incompatible with Storybook 8.0.0 as they depend on different major versions of Storybook packages:
WARN - @storybook/[email protected]

Storybook Environment Info:

  System:
    OS: macOS 14.4
    CPU: (8) arm64 Apple M1
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 19.3.0 - ~/.nvm/versions/node/v19.3.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.2.0 - ~/.nvm/versions/node/v19.3.0/bin/npm
    pnpm: 8.6.1 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 122.0.6261.112
    Safari: 17.4
  npmPackages:
    @storybook/addon-docs: ^8.0.0 => 8.0.0
    @storybook/addon-essentials: ^8.0.0 => 8.0.0
    @storybook/addon-links: ^8.0.0 => 8.0.0
    @storybook/addon-styling-webpack: ^0.0.6 => 0.0.6
    @storybook/manager-api: ^8.0.0 => 8.0.0
    @storybook/nextjs: ^8.0.0 => 8.0.0
    @storybook/react: ^8.0.0 => 8.0.0
    @storybook/storybook-deployer: ^2.8.16 => 2.8.16
    @storybook/theming: ^8.0.0 => 8.0.0
    storybook: ^8.0.0 => 8.0.0
    storybook-addon-apollo-client: ^5.0.0 => 5.0.0

if (meta.styles && meta.styles.length) {
    const styleValues = meta.encapsulation == ViewEncapsulation.Emulated ? compileStyles(meta.styles, CONTENT_ATTR, HOST_ATTR) : meta.styles;
    const styleNodes = styleValues.reduce((result, style) => {
      if (style.trim().length > 0) {
        result.push(constantPool.getConstLiteral(literal(style)));
      }
      return result;
    }, []);
    if (styleNodes.length > 0) {
      definitionMap.set('styles', literalArr(styleNodes));
    }
  }

const config = {
  stories: [
    '../**/*.stories.@(js|jsx|ts|tsx|mdx)'
  ],
  addons: ['@storybook/addon-essentials', {
    name: '@storybook/addon-styling-webpack',
    options: {
      rules: [{
        test: /\.scss$/,
        sideEffects: true,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              // Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
              modules: {
                auto: true,
              },
              importLoaders: 2,
            },
          },
          require.resolve('resolve-url-loader'),
          {
            loader: require.resolve('sass-loader'),
            options: {
              // Want to add more Sass options? Read more here: https://webpack.js.org/loaders/sass-loader/#options
              implementation: require.resolve('sass'),
              sourceMap: true,
              sassOptions: {},
            },
          },
        ],
      }, ],
    }
  }],
  framework: {
    name: '@storybook/angular',
    options: {
    },
  },
};

`$_XXS: 320;
$_XS: 414;
$_XS_SM: 568;
$_SM: 768;
$_SM_MD: 960;
$_MD: 1024;
$_MD_LG: 1280;
$_LG: 1366;
$_XL: 1920;

$XXS: #{$_XXS}px;
$XS: #{$_XS}px;
$XS_SM: #{$_XS_SM}px;
$SM: #{$_SM}px;
$SM_MD: #{$_SM_MD}px;
$MD: #{$_MD}px;
$MD_LG: #{$_MD_LG}px;
$LG: #{$_LG}px;
$XL: #{$_XL}px;

:export {
  XXS: $_XXS;
  XS: $_XS;
  XS_SM: $_XS_SM;
  SM: $_SM;
  SM_MD: $_SM_MD;
  MD: $_MD;
  MD_LG: $_MD_LG;
  LG: $_LG;
  XL: $_XL;
}

    "sass-loader": "^13.3.2",
    "node-sass": "^6.0.1",
    "postcss": "^8.1.6",

# pnpm dlx storybook@latest add @storybook/addon-styling-webpack                                                               
.../share/pnpm/store/v3/tmp/dlx-16529    | +616 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
.../share/pnpm/store/v3/tmp/dlx-16529    | Progress: resolved 637, reused 616, downloaded 0, added 616, done
Verifying @storybook/addon-styling-webpack
Installing @storybook/addon-styling-webpack@^7.3.2

An error occurred while installing dependencies:
PNPM error ERR_PNPM_NO_MATCHING_VERSION  No matching version found for @storybook/addon-styling-webpack@^7.3.2

Please check the logfile generated at ./storybook.log for troubleshooting and try again.
/Users/ar/.local/share/pnpm/store/v3/tmp/dlx-16529/node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/dist/generate.js:54
An error occurred while installing dependencies:`),logger4.log(e.message),new HandledError(e)}}async removeDependencies(options,dependencies){let{skipInstall}=options;if(skipInstall){let{packageJson}=options;dependencies.forEach(dep=>{packageJson.devDependencies&&delete packageJson.devDependencies[dep],packageJson.dependencies&&delete packageJson.dependencies[dep]}),await this.writePackageJson(packageJson)}else try{await this.runRemoveDeps(dependencies)}catch(e){throw logger4.error("An error occurred while removing dependencies."),logger4.log(e.message),new HandledError(e)}}getVersionedPackages(packages){return Promise.all(packages.map(async pkg2=>{let[packageName,packageVersion]=getPackageDetails(pkg2);return`${packageName}@${await this.getVersion(packageName,packageVersion)}`}))}getVersions(...packageNames){return Promise.all(packageNames.map(packageName=>this.getVersion(packageName)))}async getVersion(packageName,constraint){let current;/(@storybook|^sb$|^storybook$)/.test(packageName)&&(current=versions_default[packageName]);let latest;try{latest=await this.latestVersion(packageName,constraint)}catch(e){if(current)return logger4.warn(`
                                                                          ^

HandledError: PNPM error ERR_PNPM_NO_MATCHING_VERSION  No matching version found for @storybook/addon-styling-webpack@^7.3.2

Please check the logfile generated at ./storybook.log for troubleshooting and try again.
    at PNPMProxy.addDependencies (/Users/ar/.local/share/pnpm/store/v3/tmp/dlx-16529/node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/dist/generate.js:54:75)
    at async add (/Users/ar/.local/share/pnpm/store/v3/tmp/dlx-16529/node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/dist/generate.js:127:1955) {
  handled: true,
  cause: Error: PNPM error ERR_PNPM_NO_MATCHING_VERSION  No matching version found for @storybook/addon-styling-webpack@^7.3.2

  Please check the logfile generated at ./storybook.log for troubleshooting and try again.
      at PNPMProxy.runAddDeps (/Users/ar/.local/share/pnpm/store/v3/tmp/dlx-16529/node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/dist/generate.js:58:5082)
      at async PNPMProxy.addDependencies (/Users/ar/.local/share/pnpm/store/v3/tmp/dlx-16529/node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/dist/generate.js:53:853)
      at async add (/Users/ar/.local/share/pnpm/store/v3/tmp/dlx-16529/node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/dist/generate.js:127:1955)
}

Node.js v20.5.1

Progress: resolved 0, reused 1, downloaded 0, added 0
Progress: resolved 86, reused 86, downloaded 0, added 0
 ERR_PNPM_NO_MATCHING_VERSION  No matching version found for @storybook/addon-styling-webpack@^7.3.2

This error happened while installing a direct dependency of /Users/ar/src/lincare/classifier/classifier-gui

The latest release of @storybook/addon-styling-webpack is "0.0.2".

If you need the full list of all 2 published versions run "$ pnpm view @storybook/addon-styling-webpack versions".

Need to install the following packages:
  [email protected]
Ok to proceed? (y) y
Verifying @storybook/addon-styling-webpack
Installing @storybook/addon-styling-webpack@^0.0.3
Adding '@storybook/addon-styling-webpack' to main.js addons field.
Running postinstall script for @storybook/addon-styling-webpack
Error running postinstall script for @storybook/addon-styling-webpack
TypeError [ERR_INVALID_ARG_TYPE]: The "file" argument must be of type string. Received undefined
at new NodeError (node:internal/errors:399:5)
    at validateString (node:internal/validators:163:11)
    at normalizeSpawnArguments (node:child_process:545:3)
    at Object.spawn (node:child_process:750:13)
    at t (/Users/javierlopezdeancos/Code/AtomicJar/tcc-web/node_modules/@storybook/addon-styling-webpack/bin/postinstall.js:5:130)
    at postinstallAddon (/Users/javierlopezdeancos/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:172:834)
    at add (/Users/javierlopezdeancos/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:172:2421) {
  code: 'ERR_INVALID_ARG_TYPE'
}

ERROR in ./src/stories/page.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[5].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./src/stories/page.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:7) /Users/deborah/Desktop/ufw/ufw-v6 2023/dev/ufw/src/stories/page.css Unknown word

  1 | 
> 2 |       import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../node_modules/style-loader/dist/runtime/insertBySelector.js";
 @ ./src/stories/page.css 8:6-335 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-305 77:0-305 78:22-29 78:33-47 78:50-64 55:4-68:5
 @ ./src/stories/Page.jsx 7:0-20
 @ ./src/stories/Page.stories.js 4:0-30 7:13-17
 @ ./src/ lazy ^\.\/.*$ include: (?:\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.stories\.(js%7Cjsx%7Cmjs%7Cts%7Ctsx))$ chunkName: [request] namespace object ./stories/Page.stories.js ./stories/Page.stories
 @ ./storybook-stories.js 25:11-29:5
 @ ./storybook-config-entry.js 8:0-50 27:21-29 30:2-33:4 30:58-33:3 32:31-39

preview compiled with 3 errors
=> Failed to build the preview
99% end closing watch compilationWARN Force closed preview build
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
    at starter (./node_modules/@storybook/builder-webpack5/dist/index.js:1:9660)
    at starter.next (<anonymous>)
    at Module.start (./node_modules/@storybook/builder-webpack5/dist/index.js:1:11692)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

❯ npx storybook add @storybook/addon-styling-webpack
Unable to find storybook main.js config