search

storybookjs / addon-postcss

This Storybook addon can be used to run the PostCSS preprocessor against your stories.
MIT License
20 stars 22 forks source link

[Bug] @storybook/addon-postcss 3.0.0 breaks with node-logger error `Cannot use import statement outside a module` #39

Closed TheeMattOliver closed 1 year ago

TheeMattOliver commented 1 year ago

Describe the bug

@storybook/addon-postcss 3.0.0 throws an error and breaks Storybook, after following the instructions for configuring PostCSS 8 in the official Storybook docs.

Steps to reproduce the behavior

Install minimal repro and attempt to run storybook

Expected behavior

To be able to run Storybook

Screenshots and/or logs

info @storybook/react v6.5.9
info 
info => Loading presets
WARN   Failed to load preset: {"options":{"postcssLoaderOptions":{}},"type":"presets","name":"/sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/preset.js"} on level 1
ERR! /sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/dist/index.js:1
ERR! import { logger } from '@storybook/node-logger';
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (/sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/preset.js:1:18)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1101:14)
ERR!  /sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/dist/index.js:1
ERR! import { logger } from '@storybook/node-logger';
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (/sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/preset.js:1:18)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1101:14)
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Using custom postcss.config.js
(node:32068) DeprecationWarning: Relying on the implicit PostCSS loader is deprecated and will be removed in Storybook 7.0.
If you need PostCSS, include '@storybook/addon-postcss' in your '.storybook/main.js' file.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-implicit-postcss-loader for details.
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Using default Webpack4 setup
12% building 18/23 modules 5 active ...g-repro/node_modules/@storybook/core-client/dist/esm/globals/globals.js
info => Using cached manager
webpack built preview fa30ca39fb8058ac332e in 10463ms
✖ ｢wdm｣: Hash: fa30ca39fb8058ac332e
Version: webpack 4.46.0
Time: 10463ms
Built at: 07/31/2022 8:41:09 AM
                            Asset      Size        Chunks                          Chunk Names
               0.iframe.bundle.js   238 KiB             0  [emitted]               
           0.iframe.bundle.js.map   228 KiB             0  [emitted] [dev]         
               1.iframe.bundle.js   970 KiB             1  [emitted]        [big]  
           1.iframe.bundle.js.map   846 KiB             1  [emitted] [dev]         
               2.iframe.bundle.js   130 KiB             2  [emitted]               
           2.iframe.bundle.js.map   128 KiB             2  [emitted] [dev]         
               3.iframe.bundle.js  9.15 KiB             3  [emitted]               
           3.iframe.bundle.js.map  6.47 KiB             3  [emitted] [dev]         
               4.iframe.bundle.js   888 KiB             4  [emitted]        [big]  
           4.iframe.bundle.js.map   872 KiB             4  [emitted] [dev]         
               5.iframe.bundle.js  83.8 KiB             5  [emitted]               
           5.iframe.bundle.js.map  85.3 KiB             5  [emitted] [dev]         
               6.iframe.bundle.js  15.7 KiB             6  [emitted]               
           6.iframe.bundle.js.map  16.6 KiB             6  [emitted] [dev]         
               7.iframe.bundle.js   295 KiB             7  [emitted]        [big]  
           7.iframe.bundle.js.map   325 KiB             7  [emitted] [dev]         
                      iframe.html  12.2 KiB                [emitted]               
            main.iframe.bundle.js  33.7 KiB          main  [emitted]               main
        main.iframe.bundle.js.map  11.2 KiB          main  [emitted] [dev]         main
    runtime~main.iframe.bundle.js  36.3 KiB  runtime~main  [emitted]               runtime~main
runtime~main.iframe.bundle.js.map  37.6 KiB  runtime~main  [emitted] [dev]         runtime~main
    vendors~main.iframe.bundle.js  4.25 MiB  vendors~main  [emitted]        [big]  vendors~main
vendors~main.iframe.bundle.js.map  3.93 MiB  vendors~main  [emitted] [dev]         vendors~main
Entrypoint main [big] = runtime~main.iframe.bundle.js runtime~main.iframe.bundle.js.map vendors~main.iframe.bundle.js vendors~main.iframe.bundle.js.map main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js 196 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 4.25 KiB {main} [built]
[./generated-stories-entry.js] 402 bytes {main} [built]
[./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js] 2.9 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js] 2.91 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js] 2.9 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js] 2.91 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js] 2.9 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js] 2.9 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js] 2.9 KiB {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/globals.js] 105 bytes {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js] 2.91 KiB {vendors~main} [built]
[./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js] 2.92 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 7.69 KiB {vendors~main} [built]
    + 1116 hidden modules

ERROR in ./tw.css (./node_modules/css-loader/dist/cjs.js??ref--11-1!./node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js??ref--11-2!./tw.css)
Module build failed (from ./node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss/lib/postcss.js:55:10)
    at Object.loader (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/index.js:95:20)
 @ ./tw.css 2:26-190 53:4-74:5 56:18-182
 @ ./.storybook/preview.js
 @ ./.storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.27 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/templates/index.ejs] 2.07 KiB {HtmlWebpackPlugin_0} [built]
ModuleBuildError: Module build failed (from ./node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss/lib/postcss.js:55:10)
    at Object.loader (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/index.js:95:20)
    at /sb-postcss-addon-bug-repro/node_modules/webpack/lib/NormalModule.js:316:20
    at /sb-postcss-addon-bug-repro/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /sb-postcss-addon-bug-repro/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/sb-postcss-addon-bug-repro/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.loader (/sb-postcss-addon-bug-repro/node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/index.js:104:7)

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

info => Loading presets
WARN   Failed to load preset: {"options":{"postcssLoaderOptions":{}},"type":"presets","name":"/sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/preset.js"} on level 1
ERR! /sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/dist/index.js:1
ERR! import { logger } from '@storybook/node-logger';
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at compileFunction (<anonymous>)
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (/sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/preset.js:1:18)
ERR!  /sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/dist/index.js:1
ERR! import { logger } from '@storybook/node-logger';
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at compileFunction (<anonymous>)
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (/sb-postcss-addon-bug-repro/node_modules/@storybook/addon-postcss/preset.js:1:18)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment

npx envinfo --system --npmPackages

  System:
    OS: macOS 11.1
    CPU: (8) x64 Apple M1
    Memory: 21.28 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  npmPackages:
    @babel/cli: 7.18.9 => 7.18.9 
    @babel/core: ^7.18.9 => 7.18.9 
    @babel/preset-env: ^7.18.9 => 7.18.9 
    @babel/preset-react: ^7.18.6 => 7.18.6 
    @babel/preset-typescript: ^7.18.6 => 7.18.6 
    @rollup/plugin-commonjs: 19.0.2 => 19.0.2 
    @rollup/plugin-node-resolve: 13.0.5 => 13.0.5 
    @storybook/addon-actions: ^6.5.9 => 6.5.9 
    @storybook/addon-essentials: ^6.5.9 => 6.5.9 
    @storybook/addon-interactions: ^6.5.9 => 6.5.9 
    @storybook/addon-links: ^6.5.9 => 6.5.9 
    @storybook/addon-postcss: ^3.0.0-alpha.1 => 3.0.0-alpha.1 
    @storybook/builder-webpack4: ^6.5.9 => 6.5.9 
    @storybook/manager-webpack4: ^6.5.9 => 6.5.9 
    @storybook/react: ^6.5.9 => 6.5.9 
    @storybook/testing-library: ^0.0.13 => 0.0.13 
    @types/react: ^18.0.15 => 18.0.15 
    autoprefixer: ^10.4.8 => 10.4.8 
    postcss: ^8.4.14 => 8.4.14 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    rollup: 2.60.2 => 2.60.2 
    rollup-plugin-babel: 4.4.0 => 4.4.0 
    rollup-plugin-terser: 7.0.2 => 7.0.2 
    rollup-plugin-visualizer: 5.5.2 => 5.5.2 
    tailwindcss: ^3.1.7 => 3.1.7 
    tsconfig-paths-webpack-plugin: ^4.0.0 => 4.0.0 
    typescript: ^4.7.4 => 4.7.4

Temporary (not great) workaround is to downgrade

• yarn add @storybook/addon-postcss@2 • yarn add autoprefixer@9 • yarn add postcss@9 • yarn add tailwindcss@2.0.1-compat

Additional context

There's some context in the discussion here.

preview.js:

import "../tw.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

main.js:

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
  framework: "@storybook/react",
};

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "allowJs": true,
    "checkJs": false,
    "jsx": "preserve",
    "declaration": true,
    "outDir": "./lib",
    "strict": true,
    "moduleResolution": "node",
    "rootDirs": ["src"],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "typeRoots": ["./node_modules/@types", "./@types"]
  },
  "include": [
    "@types/**/*.ts",
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.tsx",
    "script/**/*.ts"
  ],
  "exclude": ["node_modules", "./lib"]
}

package.json:

{
  "name": "sb-postcss-addon-bug-repro",
  "version": "0.0.0",
  "author": "Matt Oliver",
  "license": "UNLICENSED",
  "main": "lib/index.js",
  "module": "lib-esm/index.js",
  "exports": {
    ".": {
      "node": "./lib/index.js",
      "require": "./lib/index.js",
      "default": "./lib-esm/index.js"
    },
    "./lib-esm/*": {
      "node": [
        "./lib/*.js",
        "./lib/*/index.js"
      ],
      "default": [
        "./lib-esm/*.js",
        "./lib-esm/*/index.js"
      ]
    }
  },
  "types": "lib/index.d.ts",
  "sideEffects": false,
  "scripts": {
    "build": "rollup -c",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
  },
  "devDependencies": {
    "@babel/cli": "7.18.9",
    "@babel/core": "^7.18.9",
    "@babel/preset-env": "^7.18.9",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@rollup/plugin-commonjs": "19.0.2",
    "@rollup/plugin-node-resolve": "13.0.5",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/addon-postcss": "^3.0.0-alpha.1",
    "@storybook/builder-webpack4": "^6.5.9",
    "@storybook/manager-webpack4": "^6.5.9",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@types/react": "^18.0.15",
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.14",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "rollup": "2.60.2",
    "rollup-plugin-babel": "4.4.0",
    "rollup-plugin-terser": "7.0.2",
    "rollup-plugin-visualizer": "5.5.2",
    "tailwindcss": "^3.1.7",
    "tsconfig-paths-webpack-plugin": "^4.0.0",
    "typescript": "^4.7.4"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "dependencies": {}
}

Webpack info:

sb-postcss-addon-bug-repro@0.0.0 /sb-postcss-addon-bug-repro
├─┬ @storybook/addon-essentials@6.5.9
│ └─┬ @storybook/core-common@6.5.9
│   ├─┬ fork-ts-checker-webpack-plugin@6.5.2
│   │ └── webpack@4.46.0 deduped
│   └── webpack@4.46.0 deduped
├─┬ @storybook/addon-postcss@3.0.0-alpha.1
│ ├─┬ css-loader@3.6.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ postcss-loader@4.3.0
│ │ └── webpack@4.46.0 deduped
│ └─┬ style-loader@1.3.0
│   └── webpack@4.46.0 deduped
├─┬ @storybook/builder-webpack4@6.5.9
│ ├─┬ babel-loader@8.2.5
│ │ └── webpack@4.46.0 deduped
│ ├─┬ file-loader@6.2.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ html-webpack-plugin@4.5.2
│ │ └── webpack@4.46.0 deduped
│ ├─┬ postcss-loader@4.3.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ raw-loader@4.0.2
│ │ └── webpack@4.46.0 deduped
│ ├─┬ terser-webpack-plugin@4.2.3
│ │ └── webpack@4.46.0 deduped
│ ├─┬ url-loader@4.1.1
│ │ └── webpack@4.46.0 deduped
│ ├─┬ webpack-dev-middleware@3.7.3
│ │ └── webpack@4.46.0 deduped
│ ├─┬ webpack-filter-warnings-plugin@1.2.1
│ │ └── webpack@4.46.0 deduped
│ └─┬ webpack@4.46.0
│   └─┬ terser-webpack-plugin@1.4.5
│     └── webpack@4.46.0 deduped
├─┬ @storybook/manager-webpack4@6.5.9
│ ├─┬ @storybook/core-client@6.5.9
│ │ └── webpack@4.46.0 deduped
│ └── webpack@4.46.0 deduped
└─┬ @storybook/react@6.5.9
  ├─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
  │ └── webpack@5.74.0 deduped
  ├─┬ @storybook/core@6.5.9
  │ ├─┬ @storybook/core-server@6.5.9
  │ │ └── webpack@4.46.0 deduped
  │ └── webpack@5.74.0 deduped
  ├─┬ @storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
  │ └── webpack@5.74.0 deduped
  └─┬ webpack@5.74.0
    └─┬ terser-webpack-plugin@5.3.3
      └── webpack@5.74.0 deduped
mitikov commented 1 year ago

Same here!

TheeMattOliver commented 1 year ago

@mitikov I'm almost positive that once this is stable these issues will be addressed, but it's good for it to be documented here.

One short-term workaround the Storybook team suggests is trying this out with the Storybook 7 alpha. That requires some pretty significant re-configuration since 7.0 involves some breaking changes. Just know that if you do, it will probably break what you have :) (I haven't gotten it to work yet but didn't spend much time on it).

More details on that here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md

mitikov commented 1 year ago

@TheeMattOliver Thanks mate, I lost a herd of neurons while figuring out what is wrong =\

Sounds like the 3rd version should have not been published as primary (#38) at first place.

I'm fine to force good-old v2 and keep on living.

Regards / Nik

sewera commented 1 year ago

Thanks @mitikov for the solution to stick with v2, I was about to go down the look-into-node_modules-code path. You saved me hours <3

RobyCigar commented 1 year ago

Solution If you only want to use tailwind, you can ignore & uninstall this(@storybook/addon-postcss) plugin. just import your tailwind css configuration into storybook/.preview.cjs file like below

storybook/.preview.cjs

import '../src/style.css' // add this line

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}
TheeMattOliver commented 1 year ago

Yep, for any other Tailwind users, until this is stable, @storybook/addons-postcss@2 with Autoprefixer 9 works, e.g.:

// package.json
....
 "devDependencies": {
    "@babel/cli": "7.18.9",
    "@babel/core": "^7.18.9",
    "@babel/preset-env": "^7.18.9",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/addon-postcss": "2",
    "@storybook/builder-webpack4": "^6.5.10",
    "@storybook/manager-webpack4": "^6.5.10",
    "@storybook/react": "^6.5.10",
    "@storybook/testing-library": "^0.0.13",
    "@tailwindcss/postcss7-compat": "^2.2.17",
    "@types/react": "^18.0.15",
    "autoprefixer": "^9",
    "babel-loader": "^8.2.5",
    "postcss": "^8",
    "postcss-loader": "4.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "tsconfig-paths-webpack-plugin": "^4.0.0",
    "typescript": "^4.7.4"
  },
...
IanVS commented 1 year ago

The latest tag has been moved back to 2.0.0. (https://github.com/storybookjs/addon-postcss/issues/38#issuecomment-1213651620).